* 탐색 선택자
- 탐색 선택자를 사용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있음.
- 탐색 선태자는 선택한 요소 중 요소의 위치를 기준으로 선택하는 위치 탐색 선택자, 요소의 지정된 속성을 기준으로 선택하는 속성 탐색 선택자가 있음.
- 그 외의 탐색 선택자로 요소 내에서 콘텐츠의 포함 여부를 따져 선택하는 콘텐츠 탐색 선택자, 선택한 요소를 한 번 더 필터링할 수 있는 필터링 선택자 등이 있음.
[위치 탐색 선택자]
- 기본 선택자로 선택한 요소 중 요소의 위치 또는 인덱스 번호를 이용하여 특정 요소를 좀 더 정확히 선택.
- 위치 탐색 선택자 종류
|
종류 |
사용법 |
설명 |
|
$("요소 선택: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부터 참조하는 요소를 불러옴. |
1) first / last 선택자
- first 선택자는 선택된 요소 중 첫 번째 요소만 선택
- last 선택자는 선택된 요소 중 마지막 요소만 선택
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#menu li:first").css("background-color", "yellow");
// id="menu"인 요소의 하위 <li> 태그 중에 첫 번째 요소만 배경에 노란색을 적용함.
$("#menu li:last").css("background-color", "pink");
// id="menu"인 요소의 하위 <li> 태그 중에 마지막 요소만 배경에 분홍색을 적용함.
});
</script> |
cs |
2) even / odd 선택자
- even은 선택한 요소 중 홀수 번째(짝수 인덱스) 요소만 선택해 옴.
- odd는 짝수 번째(홀수 인덱스) 요소만 선택해 옴.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("#menu li:even").css("background-color", "yellow");
// id="menu"인 요소의 하위 <li> 태그 중 홀수 번째 요소에만 배경에 노란색을 적용함.
$("#menu li:odd").css("background-color", "pink");
// id="menu"인 요소의 하위 <li> 태그 중 짝수 번째 요소에만 배경에 분홍색을 적용함.
});
</script> |
cs |
3) first-of-type / last-of-type 선택자
- first-of-type 선택자는 선택한 요소의 무리 중 첫 번째 요소만 선택.
- last-of-type 선택자는 선택한 요소의 무리 중 마지에 위치한 요소만 선택
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
<ul>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("li:first-of-type").css("background-color", "yellow");
// <li> 태그의 무리 중 각 첫 번째 <li> 태그의 배경에 노란색을 적용함. (내용1, 내용4)
$("li:last-of-type").css("background-color", "pink");
// <li> 태그의 무리 중 각 마지막 <li> 태그의 배경에 분홍색을 적용함. (내용3, 내용6)
});
</script> |
cs |
4) nth-child(숫자n) / nth-last-of-type(숫자) 선택자
- nth-child(숫자n) 선택자는 선택한 요소의 무리 중 지정한 숫자(배수) 번째의 요소를 선택.
- nth-last-of-type(숫자) 선택자는 선택한 요소의 무리 중 마지막에서 지정한 숫자 번째의 요소를 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1</li>
<li>내용2</li> <!--li:nth-last-of-type(2) 사용 시 선택됨. -->
<li>내용3</li> <!--li:nth-child(3n) 사용 시 선택됨. -->
</ul>
<ul>
<li>내용4</li>
<li>내용5</li> <!--li:nth-last-of-type(2) 사용 시 선택됨. -->
<li>내용6</li> <!--li:nth-child(3n) 사용 시 선택됨. -->
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("li:nth-child(3n)").css("background-color", "yellow");
// 모든 <li> 태그의 무리 중 각 3의 배수 번째의 <li> 태그에 노란색 배경을 적용함.
$("li:nth-last-of-type(2)").css("background-color", "pink");
// 모든 <li> 태그의 무리 중 각 마지막 두 번째 <li> 태그에 분홍색 배경을 적용함.
});
</script> |
cs |
5) only-child / slice(index) 선택자
- only-child 선택자는 지정한 요소가 부모 요소에 오직 한 개만 존재할 때 선택.
- slice(index) 선택자는 선택한 요소에 지정한 인덱스부터 참조하는 요소만 선택
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="first_list">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<ul>
<li>내용5</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("li:only-child").css("background-color", "yellow");
// 부모 요소에 하나만 있는 <li> 태그의 배경에 노란색을 적용함.
$("#first_list li").slice(2).css("background-color", "pink");
// 선택된 <li> 태그 중 인덱스가 2 이상인 요소에만 배경에 분홍색을 적용함.
});
</script> |
cs |
6) eq(index) / lt(index) / gt(index) 선택자
- eq(index) 선택자는 선택한 요소 중 지정한 인덱스가 참조하는 요소만 선택.
- lit(index) 선택자는 선택한 요소 중 지정한 인덱스보다 작은(lt:Less Than) 인덱스를 참조하는 요소만 선택.
- gt(index) 선택자는 선택한 요소 중 지정한 인덱스보다 큰(gt:Greater Than) 인덱스를 참조하는 요소만 선택.
- 예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<!-- 문단 태그 영역 -->
<body>
<h1>탐색 선택자</h1>
<ul id="first_list">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</body>
<!-- 선택자 영역 -->
<script type="text/javascript">
$(function(){
$("li:eq(3)").css("background-color", "yellow");
// index가 3인 <li> 태그의 배경에 노란색을 적용함.
$("li:lt(3)").css("background-color", "pink");
// index가 3보다 작은 <li> 태그의 배경에 분홍색을 적용함.
$("li:gt(3)").css("background-color", "aqua");
// index가 3보다 큰 <li> 태그의 배경에 아쿠아색을 적용함.
});
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > jQuery' 카테고리의 다른 글
| 객체 조작 메서드 - 수치 조작 메서드 (0) | 2017.05.22 |
|---|---|
| 객체 조작 메서드 - 속성 조작 메서드 (0) | 2017.05.22 |
| 선택자와 함께 사용하면 편리한 메서드들 (0) | 2017.05.22 |
| 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2017.05.22 |
| 탐색 선택자 - 속성 탐색 선택자 (0) | 2017.05.22 |
| 직접 선택자와 인접 관계 선택자 (0) | 2017.05.22 |
| 선택자 (Selector) (0) | 2017.05.22 |
| 제이쿼리란? (0) | 2017.05.22 |
