[jQuery] jquery selector 셀렉터 정리

가장 많이 사용되는 id와 class 셀렉터를 먼저 알아보겠습니다.

1. class 셀렉터

<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>

ex) $( ".text" ).text( "The DOM is now loaded" );

=> 실행 결과

The DOM is now loaded

id 테스트입니다.

* class selector는 앞에 . 을 붙여서 선택할 수 있습니다.

------------------------------------------------------------------------

2. id 셀렉터

<div class="test">class 테스트입니다.</div>
<div id="test">id 테스트입니다.</div>

ex) $( "#text" ).text( "The DOM is now loaded" );

=> 실행 결과

class 테스트입니다.

The DOM is now loaded

* id selector는 앞에 # 을 붙여서 선택할 수 있습니다.

------------------------------------------------------------------------

위 두개의 셀렉터를 가장 많이 사용하고 두 개만 이용해도 거의 모든 기능을 다루는데 문제 없이 활용할 수 있습니다.

추가로 jquery 에서 제공하는 다양한 셀럭터들을 맛보기로 몇개만 소개하겠습니다.

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] - [jQeury] jQuery css, jQuery 스타일 적용