jQuery 탐색 선택자
jQuery 탐색 선택자에 대해 알아보는 시간을 가지도록 하겠습니다.
01. 탐색 선택자 종류
| 선택자 종류 | 설명 | |
|---|---|---|
| children() | $("div").children() | div 요소의 자식 요소를 선택합니다. |
| parent() | $("p").parent() | p 요소의 부모 요소를 선택합니다 |
| parents() | $("p").parents("div") | p 요소의 부모가 되는 모든 div 요소를 선택합니다. |
| closest() | $("p").closest("div") | p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. |
| next() | $("div.m").next() | div.m 요소의 다음 요소를 선택합니다. |
| nextAll() | $("div.m").nextAll() | div.m 요소의 다음 요소들을 모두 선택합니다. |
| nextUntil() | $("div.m").nextUntil("p") | div.m 다음 요소부터 p 요소 전까지의 요소를 선택합니다. |
| prev() | $("div.m").prev() | div.m 요소의 이전 요소를 선택합니다. |
| prevAll() | $("div.m").prevAll() | div.m 요소의 이전 요소들을 모두 선택합니다. |
| prevUntil() | $("div.m").prevUntil("p") | div.m 이전 요소부터 p 요소 다음 요소까지를 선택합니다. |
| siblings() | $("div").siblings("p") | div 요소의 형제 요소 중 p 요소를 선택합니다. |
| find() | $("div").find("span") | div 요소의 하위 요소 중 span 요소를 선택합니다. |
| filter() | $("div").filter(".m") | div 요소 중 class가 "m"인 요소를 선택합니다. |
| not() | $("div").not(".m") | div 요소 중 class가 "m"이 아닌 요소를 선택합니다. |
| has() | $("div").has(".span") | div 요소 중 span 요소를 포함하고 있는 요소를 선택합니다. |
| eq() | $("div").eq(0) | div 요소 중 index가 0인 요소들을 선택합니다 index 0번은 첫 번째 요소입니다. |
| gt() | $("div").gt(0) | index가 0보다 큰 div 요소들을 선택합니다. |
| lt() | $("div").lt(3) | index가 3보다 작은 div 요소들을 선택합니다. |
01-1. 예제
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>탐색 선택자</title>
<style>
* {
margin: 5px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("#m1").children().css("border","2px solid red");
$("#m2").children().children("span").css("border","2px solid orange");
$("#m3 span").closest("div").css("border","2px solid yellow");
$("#m4 > span.m").nextUntil("em").css("border","2px solid green");
$("#m5 > span").filter(".m").css("border","2px solid blue");
$("#m6 > div").has(".span").css("border","2px solid navy");
});
</script>
</head>
<body>
<div id="m1">
<a href="#">내용1_1</a><span>내용1_2</span>
</div>
<div id="m2">
<a href="#">내용2_1</a><span>내용2_2</span>
</div>
<div id="m3">
<div><span>내용3_1</span></div>
</div>
<div id="m4">
<span class="m">내용4_1</span><span>내용4_2</span><span>내용4_3</span><em>내용4_4</em>
</div>
<div id="m5">
<span class="m">내용5_1</span><span>내용5_2</span><span>내용5_3</span>
</div>
<div id="m6">
<div><span>내용6_1</span></div>
<div>내용6_2</div>
</div>
</body>
</html>
}
01-2. 결과물
02. 기타 탐색 선택자 종류
| 선택자 종류 | 설명 |
|---|---|
| add() | $("div").add("p") div 요쇼와 p 요소를 선택합니다. |
| addBack() | $("div").children("p").addBack() p 요소와 이전 선택요소 div를 선택합니다. |
| end() | $("div").find("span").css(...).end().find("em").css(...) $("div").find("span").css(...)의 실행이 끝나면 처음 선택자 $("div")로 다시 돌아와 $("div").find("em").css(...)가 실행됩니다. |
| is() | 선택한 요소를 판별해 주는 선택자로 보통 if 문의 조건식에 사용됩니다. if("div").children().is("p")){ console.log("p 요소가 맞습니다.") } |
02-1. 예제
{
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 탐색 선택자</title>
<style>
* {
margin: 5px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("#m1 > div").add("#m1 > p").css("border","2px solid red");
$("#m2").children("p").addBack().css("border","2px solid orange");
$("#m3").find("span").css("border","2px solid yellow").end().find("em").
css("border","2px solid green");
if($("m4").children().is("p")) {
console.log("p 요소가 존재합니다.")
}
});
</script>
</head>
<body>
<div id="m1">
<div>내용1_1</div><p>내용1_2</p>
</div>
<div id="m2">
<p>내용2</p>
</div>
<div id="m3">
<span>내용3_1</span><em>내용3_2</em>
</div>
<div id="m4">
<p>내용4</p>
</div>
</body>
</html>
}
02-2. 결과물
'jQuery' 카테고리의 다른 글
| jQuery 속성 메서드 (2) | 2022.09.03 |
|---|---|
| jQuery 클래스 메서드 (3) | 2022.09.03 |
| 필터 선택자 (4) | 2022.08.30 |
| 속성 선택자 (4) | 2022.08.30 |
| 기본 선택자 (4) | 2022.08.30 |
댓글