[jQuery] 선택자(Selector) :탐색 선택자, 위치 탐색 선택자(1)
반응형
탐색 선택자(1)
직접 선택자로 선택한 요소 중 원하는 요소를 한번더 탐색하여 정확이 선택한다.
위치 탐색 선택자, 소성 탐색 선택자, 콘텐츠 탐색 선택자, 필터링 선택자 등이 존재.
위치 탐색 선택자
기본 선택자로 선택한 요소 중 요소 위치 또는 인덱스(index)번호를 이용하여 특정 요소를 정확히 선택.
first / last 선택자
전체 <li> 요소 중 첫 번째 요소만 선택 / 전체 <li> 요소 중 마지막 요소만 선택
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탐색 선택자 : 위치 탐색 선택자</title>
<script type="text/javascript"
src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
// 처음 나오는 li tag/ 마지막에 나오는 li tag 선택
$("li").first().css("background", "yellow");
$("li:last").css("background", "pink");
});
</script>
</head>
<body>
<h1>위치 탐색 선택자</h1>
<ul id="menu">
<li>first</li>
<li>적용 사항 없음</li>
<li>last</li>
</ul>
</body>
</html> |
cs |
odd / even 선택자
<li> 요소 그룹 중 짝수 번째(홀수 인덱스) 요소만 선택 /
<li> 요소 그룹 중 홀수 번째(짝수 인덱스) 요소만 선택
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탐색 선택자 : 위치 탐색 선택자</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
// 홀수 요소(odd)/ 짝수 요소(event)
// index번호 사용 0부터 시작. (event - 0부터 시작)
$("#menu li:even").css("background", "#aaa");
$("#menu li:odd").css("background", "#ccc");
});
</script>
</head>
<body>
<h1>위치 탐색 선택자</h1>
<ul id="menu">
<li>1.인덱스0</li>
<li>2.인덱스1</li>
<li>3.인덱스2</li>
<li>4.인덱스3</li>
<li>5.인덱스4</li>
<li>6.인덱스5</li>
<li>7.인덱스6</li>
</ul>
</body>
</html> |
cs |
first-of-type / last-of-type
<li> 요소 그룹 중 첫 번째 요소만 선택 /
<li> 요소 그룹 중 마지막 요소만 선택
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탐색 선택자 : 위치 탐색 선택자</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("li:first-of-type")
.css("background", "blue");
$("li:last-of-type")
.css("background", "deeppink");
});
</script>
</head>
<body>
<h1>위치 탐색 선택자</h1>
<ul>
<li>first-of-type</li>
<li>-------------</li>
<li>last-of-type</li>
</ul>
<ul>
<li>first-of-type</li>
<li>-------------</li>
<li>last-of-type</li>
</ul>
</body>
</html> |
cs |
nth-child(숫자) / nth-child(숫자n)
<li> 요소 그룹 중 입력 숫자 위치의 요소만 선택/
<li> 요소 그룹 중 입력 숫자 배수 위치의 요소만 선택
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탐색 선택자 : 위치 탐색 선택자</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
$("li:nth-child(2)")
.css("background", "blue");
// $("li:nth-child(2n)")
// .css("background", "deeppink");
});
</script>
</head>
<body>
<h1>위치 탐색 선택자</h1>
<ul>
<li>1111111111111</li>
<li>2222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
</ul>
</body>
</html>
</ul>
</body>
</html> |
cs |
nth-child(2n) 입력 결과.
반응형
'Programming > HTML-CSS' 카테고리의 다른 글
| [jQuery] HTML 테스터 (0) | 2017.06.23 |
|---|---|
| [jQuery] 선택자(Selector) :탐색 선택자, 속성 탐색 선택자(2) (0) | 2017.06.21 |
| [jQuery] 선택자(Selector) :직접 선택자, 인접 관계 선택자 (0) | 2017.06.19 |
| [Javascript] 로또 번호 생성기 (0) | 2017.06.08 |
| [Javascript] 자바스크립트 선언 및 변수 (0) | 2017.06.01 |
댓글