셀렉터

jQuery 2. 요소 선택 방법 - 셀렉터

 jQuery는 뭐?

선택하고 조작하고, 선택하고 조작하고...

그러니, 우선 선택하는 방법을 정리해봅니다.

셀렉터를 이용해서 HTML 태그 요소를 선택하는겁니다.

 

1. 태그 셀렉터   $("h1"). html 문서내의 <h1>...</h1> 을 선택합니다. <h1>헤드라인</h1>

 

2. id 셀렉터   $("#title"). html 태그요소중에 id="title" 인 요소를 선택합니다. <h1 id="title">헤드라인</h1> 만약 h1 태그중에 id가 title 인 요소를 선택하려면, 아래와 같이 셀렉터를 작성할 수 있습니다. $("h1#title").

 

3. class 셀렉터   $(".title"). html 태그요소중에 class="title" 인 요소를 선택합니다. <h1 class="title">헤드라인</h1> 만약 h1 태그중에 class가 title 인 요소를 선택하려면, 아래와 같이 셀렉터를 작성할 수 있습니다. $("h1.title").

 

4. 자손 셀렉터   자손이라고 하는 것은 특정 태그 내에 포함되어 있는 모든 태그 요소를 의미합니다. <ul id="grand">     <li>아들 1</li>     <li>딸 1</li>     <li>             <ul id="parent">                   <li>손자1</li>                   <li>손녀1</li>             <ul>     </li> </ul> 위 구조에서 아들1, 딸1, 손자1, 손녀1 모두 최상위 ul의 자손인거죠..ㅡ.ㅡ 위의 모든 li 요소들을 선택하기 위한 셀렉터는 아래와 같이 작성할 수 있습니다. $("ul#grand li"). 아이디가 grand 인 ul 의 하위에 있는 모든 li 요소를 선택한다는 의미입니다.

 

5. 자식 셀렉터 자식은 바로 아래에 있는 요소들을 의미합니다. $("ul#parent > li"). 이렇게 셀렉터를 작성하면, 바로 아래 단계의 손자1, 손녀1만 선택할 수 있습니다. 이건 예가 그닥 좋지는 않군요..ㅡ.ㅡ

 

5. 그룹 셀렉터   그룹은 여러개를 묶어놓으면 그룹인거죠. 쉽게 콤마(,)를 이용해서 나열해 주는 방법으로 선택할 수 있습니다. $("h1, h2").

 

7. 유니버설 셀렉터 특정 요소 하위의 모든 요소를 선택할 수 있는 방법입니다. $("ul#grand *").

 

8. 인접 셀렉터 인접은 바로 옆이라는 의미죠. 가장 가까이 있는 요소를 말합니다. $("#first + li"). 위와 같이 작성하면, id가 first 인 요소 다음에 가장 먼저 오는 li 요소를 선택할 수 있습니다.

 

9. first-child 셀렉터   말그대로 첫번째 자식을 선택할 수 있습니다. $("li:first-child"). li는 ul의 자식요소인데, li가 여러개 있을 경우, 첫번째 li 요소를 선택합니다.

 

10. 간접셀렉터 특정 요소 뒤에 나타나는 모든 요소를 선택할 수 있습니다. $("#second ~ li").

 

 

11. only-child 유사클래스 셀렉터 $("li span:only-child") 예) <li><span>제이쿼리</span></li> li 요소 안에 span 요소가 온리 하나뿐이면 선택됩니다. 자식이라곤 span 밖에 없는 li요소..

 

12. nth-child 유사클래스 셀렉터   $("li:nth-child(2)"). ul 하위 li들 중에 2번째 li를 선택합니다. $("li:nth-child(even)"). ul 하위 li들 중에 짝수째 li를 선택합니다. $("li:nth-child(odd)"). ul 하위 li들 중에 홀수째 li를 선택합니다. $("li:nth-child(3n)"). ul 하위 li들 중에 3의 배수번째 li들을 선택합니다.

 

13. last-child 유사클래스 셀렉터   마지막 자식, 막내를 선택합니다.  $("li:last-child").

 

14. not 유사클래스 셀렉터 $("li:not(:first-child)").   not 으로 지정한 특성을 제외한 li요소들을 선택합니다.

 

 

15. empty 유사클래스 셀렉터 $("li:empty"). <li></li> 처럼 속 내용이 빈 요소를 선택합니다. 속성은 html 태그에 더해진 id, class 등을 의미합니다. <li id="first" class="number" >블라블라</li> id도 속성이고 해당 value는 first, class도 속성이고 해당 value 는 number 인거죠. $("[속성]"). $("[id]"). html 태그 요소중에 id 라는 속성을 가진 요소들을 선택합니다. $("[속성='값']"). $("[id='first']"). html 태그 요소중에 id값이 first 인 요소들을 선택합니다. $("[속성!='값']"). $("[id=!'first']"). html 태그 요소중에 id값이 first 가 아닌 요소들을 선택합니다...만, 위와 같이 사용할 수 없고 반드시 해당 html태그를 명시해줘야합니다. $("li[id=!'first']"). 위 예는 li 요소중에 id가 first가 아닌 것들을 선택합니다. $("[속성^='값']"). 속성이 특정 문자열로 시작되는 요소들을 선택합니다. $("[title^='f']"). 태그중에 title 속성의 값이 f로 시작하는 태그 요소들을 선택합니다. <li title='first'>블라블라</li> $("[속성$='값']"). 속성이 특정 문자열로 끝나는 요소들을 선택합니다. $("[title$='d']"). 태그중에 title 속성의 값이 d로 끝나는 태그 요소들을 선택합니다. <li title='second'>블라블라</li> $("[속성*='값']"). 속성이 특정 문자열을 포함하는 요소들을 선택합니다. $("[title$='u']"). 태그중에 title 속성의 값이 u를 포함하는 태그 요소들을 선택합니다. <li title='fourth'>블라블라</li> 위 속성 셀렉터를 중복으로 사용할 수 있습니다. title속성이 f 로 시작하고, u를 포함하는 요소를 선택하고 싶으면 아래와 같이 할 수 있습니다. $("[title^='f'][title$='u']"). 여기까지 내용은 CSS 에서 요소를 선택하는 방법과 같습니다. CSS 작성할 때 위와 같은 방법으로 요소들을 지정해 줄수 있습니다. 아! CSS3까지 포함된 내용입니다. jQuery 자체 필터 그리고, jquery 자체 필터라는게 있습니다. jquery 가 지원하는 셀렉팅 방법이지요. - first / last  필터 $("li:first") / $("li:last") 위와 같이 첫번째 li 요소와 마지막 li 요소를 선택할 수 있습니다. first-child, last-child 와 의미가 비슷하죠? 하지만, 같은 방법을 굳이 만들었을리가..ㅡ.ㅡ first-child와 last-child는 공통된 부모 요소 내에서 첫번째, 마지막을 골라내주는 것이고, first, last 필터는 부모와 관계없이 페이지내에 존재하는 모든 태그들 중에서 첫번째, 마지막을 골라내주는 것입니다. - even, odd 필터 $("li:even") / $("li:odd")    // 짝수 , 홀수 nth-child에서 even, odd 를 사용하는 것과 비슷하지만, 이 필터 역시 공통 부모의 의미가 없이 전체 태그들을 대상으로해서 짝수번째, 홀수번째를 골라내줍니다. - eq, gt, lt 필터   eq 는 같다, gt는 뭐보다 크다, lt는 뭐보다 작다...의미입니다. 같은 종류의 태그가 여러개 있을 경우, eq 는 몇번째 태그를 지정해주거나, gt 는 몇번째 태그보다 큰것들을 모두 골라내거나, lt 는 몇번째 태그보다 작은것들을 모두 골라내줍니다. 크고 작음을 어떻게 구분할까요? 같은 태그가 여러개 있을 경우, 첫번째 태그는 0번, 그 이후 1,2,3... 등으로 인덱스가 붙습니다. 인덱스가 0번부터 시작함에 주의해야합니다. 이 필터를 사용할 때는 이 인덱스 번호를 이용합니다. $("li:eq(2)")   여러개의 li 요소중에 3번째 li요소를 선택합니다. $("li:gt(2)")   여러개의 li 요소중에 인덱스 번호가 2보다 큰 li요소를 선택합니다. 4번째, 5번째...등등 골라내주는거죠. $("li:lt(2)") 여러개의 li 요소중에 인덱스 번호가 2보다 작은 li요소를 선택합니다. 1번째, 2번째 li요소를 골라내주는거죠. 이 세가지 필터 모두 역시 공통 부모와 무관하게 전체 태그요소들을 대상으로 동작합니다. - header  필터 $(":header") 로 사용해서 h1~h6 태그를 선택할 수 있습니다. - contains / has 필터   contains 는 특정 문자열을 포함하고 있는지를 확인해서 선택하고, has 는 특정 태그를 포함하고 있는지를 확인해서 선택합니다. <li>제이쿼리</li>의 경우, $("li:contains("제이")") 로 선택할 수 있습니다. <li><strong>제이쿼리</strong></li> 는 strong이라는 태그를 포함하고 있으니까, 태그를 기준으로 선택하려면, 아래와 같이 has를 사용할 수 있습니다. $("li:has(strong)").   - parent 필터   값을 가지고 있는 자식태그를 선택해 줍니다. $("li:parent") 라고 작성하면, li 들 중에, 값을 가지고 있고, 어떤 태그의 자식 태그인 요소를 선택해줍니다. li는 무조건 ul 태그의 자식 태그니까, 자식 태그라는 요건은 만족하고, 값을 가지고 있느냐를 더 확인을 하겠지요.   <ul>     <li>아들 1</li>     <li>딸 1</li>     <li></li> </ul> 위 예에서는 아들1을 포함한 li 태그와 딸1을 포함한 li태그만이 선택됩니다.

 

참조 :

 

http://zzaps.tistory.com/67