728x90
반응형
jQuery 탐색 선택자
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 좀 더 정확하게 선택할 수 있습니다.
| 선택자 종류 | 설명 | |
|---|---|---|
| children() | $("div").children() | div 요소의 자식 요소를 선택합니다. |
| parent() | $("p").parent() | p 요소의 부모 요소를 선택합니다. |
| parents() | $("p").parents() | 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.m").siblings("p") | div 요소의 형제 요소 중 p 요소를 선택합니다. |
| find() | $("div.m").find("span") | div 요소의 하위 요소 중 span 요소를 선택합니다. |
| filter() | $("div.m").filter(".m") | div 요소 중 class가 "m인 요소를 선택합니다. |
| not() | $("div.m").not(".m") | div 요소 중 class가 "m이 아닌 요소를 선택합니다. |
| has() | $("div.m").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 요소들을 선택합니다. |
예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>탐색 선택자</title>
<script src="jquery-3.6.1.min.js"></script>
<style>
* {
margin: 5px;
}
</style>
<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").end().find("em")
$("#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 blue")
});
</script>
</head>
<body>
<div id="m1">
<a href="#">내용1_1</a><span>내용1_2</span>
</div>
<div id="m2">
<div>
<a href="#">내용2_1</a><span>내용2_2</span>
</div>
</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>
기타 탐색 선택자
| 선택자 종류 | 설명 | |
|---|---|---|
| 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("span").css(...).end().find("em").css(...)가 실행됩니다. |
|
| is() | 선택한 요소를 판별해 주는 선택자로 보통 if 문의 조건식에 사용됩니다. if("div").children().is("p")){ console.log("p 요소가 맞습니다."); } |
|
예제1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기타 탐색 선택자</title>
<script src="jquery-3.6.1.min.js"></script>
<style>
* {
margin: 5px;
}
</style>
<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>
728x90
댓글