Selector 사용법

jQuery를 이용해 엘리먼트를 선택하려면 셀렉터를 $()로 감싸야 한다.

예) $('a') 모든 링크(<a>)를 선택하게 된다.

기본 CSS 셀렉터

=> jQuery는 몇몇 예외사항을 제외하고는 CSS3를 완벽하게 준수하고 있다. 

   그리고 모질라 파이어폭스(Firefox), 인터넷 익스플로러(Internet Explorer), 사파리(Safari)와 같은 최신 브라우저가 지원하는 차세대 CSS를 사용해 고급 셀렉터를 지원한다. 

   즉, 표준 호환 브라우저의 스타일시트와 jQuery 셀렉터 엔진이 선택하는 엘리먼트는 동일하다.

기본 사용

1. a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

2. #specialID - specialID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터

3. .specialClass - specialClass를 클래스로 가지는 모든 엘리먼트와 일치하는 셀렉터.

4. a#specialID.specialClass - 아이디가 speicalID이고 specialClass를 클래스로 가지는 링크와 일치하는 셀렉터.

5. p a.specialClass - <p>엘리멘트 내에 선언되고 specialClass를 클래스로 가지는 모든 링크(<a>)와 일치하는 셀렉터.

예제

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<ul class="myList">   <li><a href="http://jquery.com">jQuery supports</a>    <ul>       <li><a href="css1">CSS1</a></li>       <li><a href="css2">CSS2</a></li>       <li><a href="css3">CSS3</a></li>       <li>Basic XPath</li>     </ul>   </li>   <li>jQuery also supports     <ul>       <li>Custom selectors</li>       <li>Form selectors</li>     </ul>   </li> </ul>

위의 예제 소스를 통해서 셀렉터에 대해 자세히 알아보도록 하자. 

1. 자식 셀렉터 (>)

부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분한다. 

자식 셀렉터의 특징은 바로 하위에 있는 자식만을 찾는 다는 것이다. 

예) $('ul.myList>li>a') 이렇게 했을 경우 우선 myList를 클래스로 갖고 있는 ul에서 바로 하위에 링크(<a>)가 있는 것을 셀렉하라는 이야기 입니다. 

그래서 결과는 "<a href="http://jquery.com">jQuery supports</a>"가 선택 될 것입니다. 

2. 어트리뷰트 셀렉터(속성 셀렉터)

어트리뷰트 셀렉터는 속성의 특성을 통해서 셀렉터를 하는 경우이다. 

예) 위의 예제 소스 에서 외부 사이트에 대한 링크에 특별한 긴을 추가 하고자 하는 경우 외부 사이트를 링크로 갖고 있는 <a>를 찾아 한다. 

$('a[href^=http://]') 이렇게 하면 된다. 풀어서 설명을 하자면 href의 값이 정확이 http://로 시작하는 모든 링크(<a>)와 일치하는 것을 셀렉해라이다. 

어트리뷰트 셀렉터는 다른 방식으로도 사용이 되는데 만약 input type이 text일때 trim()을 사용하고 싶을 경우 $('input[type=text]').trim();과 같이 

사용하면 된다. 

3. 컨테이너 셀럭터

다른 에리먼트를 포함하는 엘리먼트를 선택해야 할 때 주로 사용

예) 링크(<a>)를 포함하는 <li>를 선택하는 경우 일것이다. $('li:has(a)') 이렇게 표기 한다. 

한가지 주의 할 점은 $('li a')와의 차이점이다. 후자에 있는 것은 링크(<a>)를 선택하는 것이고 전자는 <li>를 선택하는 것이라는 점이다.

셀렉터	설명
*	모든 엘리먼트와 일치
E	태그명이 E인 모든 엘리먼트와 일치
E F	E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F	E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치
E+F	E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F	E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F)	태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C	클래스명이 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함
E#I	아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A]	어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V]	값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V]	값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V]	값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V]	값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

4. 위치기반 셀렉터

페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택해야 하는 경우가 있다. 

셀렉터	설명
:first	페이지에서 처음으로 일치하는 엘리먼트 li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
:last	페이지에서 마지막으로 일치하는 엘리먼트 li a:last는 리스트 아이템의 마지막 링크를 반환한다.
:first-child	첫번째 자식 엘리먼트 li:first-child는 각 리스트의 첫 번째 아이템을 반환한다.
:last-child	마지막 자식 엘리먼트 li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child	형제가 없는 모든 엘리먼트를 반환한다.
:nth-child(even|odd)	n번째 자식 엘리먼트 li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환한다.
:nth-child(Xn+Y)	전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능하다.  li:nth-child(3n)은 3배수 번째 아이템을 반환한다. li :nth-child(5n+1)은 5의 배수 + 1번째 아이템을 반환한다.
:even/:odd	페이지 전체의 짝수/홀수 번째 엘리먼트 li:even은 모든 짝수 번째 아이템을 반환한다.
:eq(n)	n번째로 일치하는 엘리먼트
:gt(n)	n번째 엘리먼트(포함하지 않음) 이후의 엘리먼트와 일치
:lt(n)	n번째 엘리먼트(포함하지 않음) 이후의 엘리먼트와 일치
:nth-child(n)	n번째 자식 엘리먼트 li:nth-child(2)는 각리스트의 두 번째 리스트 아이템을 반환한다.

예제 소스 

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<table id="languages">   <thead>         <tr>             <th>언어</th>             <th>종류</th>             <th>연도</th>         </tr>   </thead>   <tbody>         <tr>             <td>Java</td>             <td>정적 언어</td>             <td>1995</td>         </tr>         <tr>             <td>Ruby</td>             <td>동적 언어</td>             <td>1993</td>         </tr>         <tr>             <td>Smalltalk</td>             <td>동적 언어</td>             <td>1972</td>         </tr>         <tr>             <td>C++</td>             <td>정적 언어</td>             <td>1983</td>         </tr>   </tbody>   </table>

1) 테이블에서 프로그래밍 언어의 이름을 포함한 모든 셀 얻기

$('table#languages tbody td:first-child') OR $('#languages tbody td:nth-child(1)')

라고 작성하면 된다. 

참고적으로 eq()와 nth-child()사이에는 미묘한 차이가 있다. eq()는 인덱스가 0부터 시작하지만 nth-child()는 인덱스가 1부터 시작한다는 점을 유의하기 바란다.

5. jQuery 정의 셀렉터

jQuery에서 제공하는 정의된 셀렉터가 있다. 특정 엘리먼트의 타입이나 상태를 세련되게 표현할 수 있다.

31 페이지 표 넣기 

셀렉터	설명
:animated	현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button	모든 버튼을 선택한다.(input[type=submit], input[type=reset], input[type=button], button )
:checkbox	체크박스 엘리먼트만 선택한다.(input[type=checkbox])
:checked	선택된 체크박스나 라이도 버튼만을 선택한다.(CSS에서 지원)
:contains(foo)	텍스트 foo를 포함하는 엘리먼트만 선택한다.
:disabled	인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.(CSS에서 지원)
:enabled	인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.( CSS에서 지원)
:file	모든 파일 엘리먼트를 선택한다.(input[type=file])
:header	헤더 엘리먼트만 선택한다. 예를 들어 <h1>부터 <h6>까지의 엘리먼트를 선택한다.
:hidden	감취진 엘리먼트만 선택한다.
:image	폼 이미지를 선택한다.(input[type=image])
:input	폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(filter)	필터의 값을 반대로 변경한다.
:parent	빈 엘리먼트를 제어하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password	패스워드 엘리먼트만 선택한다.(input[type=password])
:radio	라디오 버튼 엘리먼트만 선택한다.(input[type=radio])
:reset	리셋 버튼을 선택한다.(input[type=reset]이나 button[type=reset])
:selected	선택된 엘리먼트만 선택한다.
:submit	전송 버튼을 선택한다.(button[type=submit]이나 input[type=submit])
:text	텍스트 엘리먼트만 선택한다.(input[type=text])
:visible	보이는(visible)엘리멘트리만 선택한다.

참고 :not 필터 사용

셀렉터의 결과가 반대로 나오게 하고 싶다면 :not 필터를 이용한다. :not 필터는 CSS와 jQuery 셀렉터에서 모두 동작한다. 

주의 할 점이 있는데 바로 :not은  필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다는 점이다. 

 

필터 셀렉터와 찾기 셀렉터(find selector)의 차이점을 구별할 필요가 있는데, 필터 셀렉터는 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다. 

반면 찾기 세렉터는 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. 찾기 셀렉터에는 자손 셀렉터(공백 문자), 자식셀레터(>), 형제 셀렉터(+)가 있다. 

예) div p:not(:hidden) 유효하다. 하지만 div :not(p:hidden)은 잘못사용 하는 것이다. 

이런 잘못된 사용을 없애려고 필터 셀렉터는 모두 콜론 문자(:)나 대괄호 문자([])를 사용하는 형식으로 만들어 식별하기 쉽게 만들어져 있다.