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
반응형
'lang > jquery' 카테고리의 다른 글
jQuery 를 이용한 멀티레이어 메뉴 (0) | 2018.07.16 |
---|---|
$.deferred 비동기 호출 서비스 (0) | 2014.10.13 |
jquery mobile 페이지 전환 깜박거림 (0) | 2013.11.26 |
jQuery가 지원하는 기본 CSS 셀렉터 (0) | 2010.07.29 |
jquery bookmarklet 생성기 (0) | 2010.07.20 |