jQuery 셀렉터

jquery의 선택자는 css 선택자오 동일합니다. 그래서 css를 알면 jquery선택자에서 매우 유리합니다.
jquery는 모질라 파이어폭스,인터넷 익스플로러 7, 사파리와 같은 최신브라우져가 지원하는 차세대 CSS를 사용해 고급 셀렉터를 지원합니다.

jQuery가 지원하는 기본 CSS 셀렉터
셀렉터 설명
* 모든 엘리먼트와 일치
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와 일치


때로는 페이지에 있는 엘리먼트 위치나 다른 엘리먼트와 연관된 관계를 기반으로 엘리먼트를 선택햐야 합니다.
예를들어, 페이지에서 첫번째 링크나 홀수 및 짝수번째 문단 또는 리스트마다 자리한 마지막 아이템을 선택하는것과 같은 기법이 필요할 때도 있습니다.
이때 위치를 기반으로 한 셀렉터가 유용합니다.

jQuery가 지원하는 고급위치기반 셀렉터
셀렉터 설명
:first 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환한다.
:last 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환한다.
:fist-child 첫번째 자식 엘리먼트, li:first-child는 각 리스트의 첫번째 아이템을 반환한다.
:last-child 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child 형제가 없는 모든 엘리먼트를 반환한다.
:nth-child(n) n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환한다.
:nth-child(even|odd) 짝수 또는 홀수 자식 엘리먼트. li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환한다.
: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번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.


CSS면세만으로는 표현할 수 없는 특성이 있는 엘리먼트를 선택해야 할 때도 있습니다. 이럴때는 정의 셀렉터를 이용하면 편리합니다.

jQuery 정의 필터 셀렉터
셀렉터 설명
:animated 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다.
:button 모든 버튼을 선택한다. (input[type=submit], input[type=reset], input[button], button)
:checkbox 체크박스 엘리먼트만 선택한다 (input[type=checkbox])
:checked 선택된 체크박스나 라디오 버튼만을 선택한다 (CSS에서 지원)
:contains(foo) 택스트 foo를 포함하는 엘리먼트만 선택한다.
:disabled 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file 모든 엘리먼트를 선택한다 (input[type="file])
:header 해더 엘리먼트만 선택한다. 예를들어 <h1>부터 </h6>까지의 엘리먼트를 선택한다.
:hidden 감춰진 엘리먼트만 선택한다.
image 폼 이미지를 선택한다.(input[type=image])
:input 폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(selector) selectior가 아닌것을 선택한다.괄호안의 조건이 아닌것을 선택한다.
: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) 엘리먼트만 선택한다.