가장 많이 사용되는 id와 class 셀렉터를 먼저 알아보겠습니다.
1. class 셀렉터
<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>
ex) $( ".text" ).text( "The DOM is now loaded" );
=> 실행 결과
<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>
ex) $( "#text" ).text( "The DOM is now loaded" );
=> 실행 결과
1. all selector ("*")
ex) $("*").css("border", 3px solid red");
-----------------------------------------------------------------------------------------------
2. 속성 prefix 셀렉터 [name|=”value”]
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>
ex) $( "a[hreflang|='en']" ).css( "border", "3px dotted green" );
=> 실행 결과
Some text Some other text will not be outlined
-----------------------------------------------------------------------------------------------
3. 문자를 포함하는 셀렉터 [name*=”value”]
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
ex) $( "input[name*='man']" ).val( "has man in it!" );
=> 실행 결과
-----------------------------------------------------------------------------------------------
4. 단어를 포함하는 셀렉터 [name~=”value”]
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
ex) $( "input[name*='man']" ).val( "mr. man is in it!" );
=> 실행 결과
-----------------------------------------------------------------------------------------------
jquery 셀렉터에 대해 간략하게 소개하였습니다~
다음 강의에서 만나요~
+ More jQuery
- [jQeury] jquery this, 코드 줄이기, jquery index, 인덱스
- [jQuery] - jQeury] val(), text() 값 셋팅, 값 가져오기 setValue, setText
- [jQuery] - [jQeury] jquery 클래스 추가(addClass), class 추가 삭제(removeClass) 및 확인(hasClass)
- [jQuery] - [jQeury] jquery tigger, jquery 함수 실행, 이벤트 실행
'jQuery' 카테고리의 다른 글
jQuery] val(), text() 값 셋팅, 값 가져오기 setValue, setText (0) | 2015.10.11 |
---|---|
[jQuery] jquery tigger, jquery 함수 실행, 이벤트 실행 (0) | 2015.10.05 |
[jQuery] jquery this, 코드 줄이기, jquery index, 인덱스 (0) | 2015.10.04 |
[jQuery] jquery event 클릭, 버튼 클릭 (0) | 2015.10.03 |
[jQuery] jquery 클래스 추가(addClass), class 추가 삭제(removeClass) 및 확인(hasClass) (0) | 2015.10.01 |