기본 선택자 포스팅이 끝나고 다음 탐색 선택자에 대해 공부한다. 사실 syntax 방식은 다 비슷하다. $선택자 안에 쓰이거나, 메소드() 형식으로 쓰인다. 굳이 다른점을 꼽자면 어떻게 쓰이고 기능하는지의 차이다.
1. ' : '
1) ' :first ', ' :last ' : 요소의 첫번째, 마지막을 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
// #menu li의 첫번째 요소
$("#menu li:first")
.css("background-color", "yellow");
// #menu li의 마지막 요소
$("#menu li:last")
.css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>#menu 요소의 첫번째 <li>요소와 마지막 요소 <li>가 선택되었다.
<결과>
<li>의 첫번쨰 요소와 마지막 요소에 스타일이 적용된 것을 확인할 수 있다.
2) ' :even ', ' :odd ' : 짝수 / 홀수번째 요소 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#menu li:even") // 짝수
.css({"background-color":"yellow"});
$("#menu li:odd") // 홀수
.css({"background-color":"aqua"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li id = "first">내용1</li>
<li id = "second">내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>짝수번째 요소에는 배경색을 노란색으로, 홀수번째 요소에는 아쿠아색으로 배경색을 설정한다.
<결과>
여기서 의문이 생길 수 있다. 첫번째 요소(1)는 홀수번째인데 노란색이 적용됐다. 반대로 두번째 (2) 요소에는 아쿠아색이 적용됐다. 홀수와 짝수가 서로 바뀐 것 아니냐라는 의문이다. 여기서 인덱스라는 개념이 들어가는데, 인덱스는 0 베이스이다. 즉, 첫번째 <li>는 인덱스가 0이므로 짝수이다. 그래서 노란색 배경이 적용되고, 그 다음 <li> 요소는 인덱스가 1이기 떄문에 홀수이다. 그래서 아쿠아색 배경이 적용된다. 여기서 요소의 인덱스를 확인해볼 수 있다.
var indexFirst = $("#first").index();
console.log(index); // 0
var indexSecond = $("#second").index();
console.log(index); // 1
3) eq(), ' :lt() ', ' :gt() ' : 인덱스 번호로 요소찾기
eq(index)는 지정한 번호의 인덱스를 선택한다.
':lt(index)'는 less than(미만)의 약자, 지정한 인덱스 번호 미만의 인덱스를 가진 요소들을 선택한다.
':gt(index)'는 greater than (~보다 큰)의 약자, 지정한 인덱스 번호보다 큰 인덱스를 가진 요소들을 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 탐색 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#menu li").eq(2)
.css({"background-color":"yellow"});
$("#menu li:lt(2)")
.css({"background-color":"aqua"});
$("#menu li:gt(2)")
.css({"background-color":"pink"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
</ul>
</body>
</html>
<결과>
4) ' :first-of-type ', ' :last-of-type '
' :first-of-type ', ' :last-of-type '는 각각의 <li> '그룹'들 중에서 첫번째 <li>요소, 마지막 <li>요소를 선택한다. 말로는 좀 어려울 수 있으니 코드를 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("li:first-of-type") // 각각 li 그룹들 중에서 첫번째 li'들만' 적용
.css({"background-color":"#ff0"});
$("li:last-of-type") // 각각 li 그룹들 중에서 마지막 li'들만' 적용
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<!--li Group 1-->
<ul>
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<!--li Group 2-->
<ul>
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html>이렇게 li Group1, 2가 있다. 여기서 :first-of-type 선택자를 쓰게 되면?
<li>내용1-1</li>
<li>내용2-1</li>이 두개의 요소가 선택되고, 반대로 :last-of-type을 선택자를 쓰면
<li>내용1-3</li>
<li>내용2-3</li>요소가 선택된다. 위 코드의 결과를 보면
<결과>
첫번쨰 <li>요소들에게 노란색 배경이 설정됐고, 마지막 <li>요소들에게 아쿠아색 배경이 설정되었다.
5) ' nth-child() '
' nth-child() '는 지정한 숫자번째의 요소를 선택하는 선택자이다. 여기서 햇갈리는 개념이 있다. 아까 ' :even() ', ' :odd() ' 개념에서 첫번쨰 인덱스는 0번 인덱스라 짝수번째 인덱스로 취급된다고했다. 여기서
'~번 인덱스와' '~번쨰 요소'는 다르다.무슨 뜻이냐면, '0번 인덱스'의 인덱스 번호는 '0'이지만, '1번째 요소'이기 때문이다.
'0번' 인덱스는 '1번째' 요소이 개념을 혼동하면 안된다. 이 개념을 숙지하고 코드를 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#menu1 li:nth-child(1)") // '첫번째' 요소
.css({"background-color":"#ff0"});
$("#menu1 li:nth-child(2n)") // '짝수번째' 요소
.css({"border":"2px dashed #f00"});
$("#menu2 li:nth-last-child(2)") // '뒤에서 부터 2번째' 요소
.css({"background-color":"#0ff"});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
<li>내용1-4</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>
</html><결과>
결과를 보면 1번째 <li> 요소에 노란색 배경이 적용된 것을 확인할 수 있고, 2n(짝수번째) 즉, 2번째, 4번째 <li>요소에 dashed border이 적용되었다. 마지막으로 뒤에서 부터 두번째 요소에 아쿠아색 배경이 설정된 것을 알 수 있다.
'웹 개발 공부 : Front-end > JQuery' 카테고리의 다른 글
| [JQuery] Chapter 1-1 선택자(3) (0) | 2021.09.08 |
|---|---|
| [JQuery] Chapter 1-1 선택자(2) (0) | 2021.09.08 |
| [JQuery] Chapter 1-1 선택자(1) (2) | 2021.09.04 |
| [JQuery] JQuery 개요 (0) | 2021.09.03 |
