jQuery / Reference / .find()
개요
- .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다.
문법
.find( selector )
예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다.
$( 'h1' ).find( 'span' )
예제
- 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( 'p.b' ).find( 'span.ip' ).css( 'font-size', '2em');
} );
</script>
</head>
<body>
<p class="a">
<span class="lo">Lorem</span>
<span class="ip">Ipsum</span>
<span class="do">Dolor</span>
</p>
<p class="b">
<span class="lo">Lorem</span>
<span class="ip">Ipsum</span>
<span class="do">Dolor</span>
</p>
</body>
</html>
참고
하위 선택자를 이용해서 같은 결과를 만들 수 있습니다. 예를 들어 다음은
$( 'p.b' ).find( 'span.ip' ).css( 'font-size', '2em');
다음처럼 해도 됩니다.
$( 'p.b span.ip' ).css( 'font-size', '2em');
jQuery / Reference / .before()
개요 .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .before( content ) 예제 1 p 요소 앞에 Lorem Ipsum Dolor를 내용으로 갖는 h1 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
개요 .val()은 양식(form)의 값을 가져오거나 값을 설정합니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. var jb = $( 'input#jbInput' ).val(); 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. $( 'input#jbInput' ).val( 'ABCDE' ); 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, ...
개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...
개요 :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 type이 button인 모든 요소를 선택합니다. $( ':button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. $( '.xy:button' ) 예제 type이 button인 요소의 글자 모양을 기울임꼴로 만듭니다. 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...
개요 .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 문법 .empty() 예를 들어 다음과 같은 h1 요소가 있을 때 <h1>Lorem</h1> 다음과 같이 하면 $( 'h1' ).empty() 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Reference / .slideUp()
개요 .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
개요 .each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행합니다. 문법 .each( function ) 특정 조건을 만족할 때 반복 작업에서 빠져려면 다음을 추가합니다. return false 예제 1 p 요소에 각각 다른 클래스를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...
jQuery / Reference / .remove()
개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / :contains()
개요 :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains( text )' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택합니다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만듭니다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않습니다. <!doctype html> <html ...