반응형
*위치 탐색 선택자 종류
- 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다.
종류 | 사용법 | 설명 |
$("요소 선택:first") $("요소 선택").first() |
$("li:first") $("li").first() |
전체 <li> 요소 중 첫 번째 요소만 선택 |
$("요소 선택:last") $("요소 선택").last() |
$("li:last") $("li").last() |
전체 <li> 요소 중 마지막 요소만 선택 |
$("요소 선택:odd") | $("li:odd") | <li>요소 무리 중 짝수 번째(홀수 인덱스) 요소만 선택 |
$("요소 선택:even") | $("li:even") | <li>요소 무리 중 홀수 번째(짝수 인덱스) 요소만 선택 |
$("요소 선택:first-of-type") | $("li:first-of-type") | <li>요소 무리 중 첫번 째 요소만 선택 |
$("요소 선택:last-of-type") | $("li:last-of-type") | <li>요소 무리 중 마지막 요소만 선택 |
$("요소 선택:nth-child(숫자)") | $("li:nth-child(3)") | <li>요소 무리 중 세 번째 요소만 선택 |
$("요소 선택:nth-child(숫자n)") | $("li:nth-child(3n)") | <li>요소 무리 중 3의 배수 번째에 있는 요소만 선택 |
$("요소 선택:nth-last-of-type(숫자)") | $("li:nth-last-of-type(2)") | <li>요소 무리 중 마지막 위치로부터 두 번째에 있는 요소만 선택 |
종류 | 사용법 | 설명 |
$("요소 선택:only-child") | $("li:only-child") | 부모 요소 내에 <li>요소가 1개 뿐인 <li>요소만 선택 |
$("요소 선택:eq(index)") $("요소 선택").eq(index) |
$("li:eq(2)") $("li").eq(2) |
<li>요소 중 인덱스 2가 참조하는 요소를 불러옴 |
$("요소 선택:gt(index)") | $("li:gt(1)") | <li>요소 중 인덱스 1보다 큰 인덱스가 참조하는 요소를 불러옴 |
$("요소 선택:lt(index)") | $("li:lt(1)") | <li>요소 중 인덱스 1보다 작은 인덱스가 참조하는 요소를 불러옴 |
$("요소 선택").slice(index) | $("li").slice(2) | <li>요소 중 인덱스 2부터 참조하는 요소를 불러옴 |
반응형
'참고 > Jquery' 카테고리의 다른 글
jquery - 제이쿼리 배열 관련 메서드 종류 (0) | 2020.05.26 |
---|---|
jquery - 탐색 선택자 (0) | 2020.05.26 |
Jquery - 인접 관계 선택자 (0) | 2020.05.25 |
Jquery - 직접 선택자 (0) | 2020.05.25 |
jquery - 선택자(selector) (0) | 2020.05.22 |
댓글