lang/jquery

jQuery가 지원하는 고급 위치 기반 셀렉터

C/H 2010. 7. 30. 08:30
jQuery가 지원하는 고급 위치 기반 셀렉터. DOM에서 위치를 기반으로 엘리먼트를 선택한다.
셀렉터 설명
 :first  페이지에서 처음으로 일치하는 엘리먼트.
 li a:first는 리스트 아이템의 첫 번째 링크를 반환한다.
 :last  페이지 마지막으로 일치하는 엘리먼트.
 li a:last는 리스트 아이템의 마지막 링크를 반환한다.
 :frist-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번째로 일치하는 엘리먼트 (0 부터 시작)
 :gt(n) n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치
 :lt(n) n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치

* 다른 셀렉터는 0부터 시작되지만 n번째 자식 셀렉터는 1부터 시작된다.
n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작한다. 하지만 jQuery 정의 셀렉터는 법용 프로그래밍 규약에 따란 인덱스를 0부터 시작한다.

jQuery in Action (프로그래밍 jQuery) : p28

반응형