728x90
탐색 선택자
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 더 정확하게 선택할 수 있습니다.
01. 기본 탐색 선택자 종류
| 선택자 종류 | 설명 | |
|---|---|---|
| children() | $("div").children() | div 요소의 자식 요소를 선택합니다. |
| parent() | $("p").parent() | p 요소의 부모 요소를 선택합니다. |
| parents() | $("p").parents("div") | p 요소의 부모가 되는 모든 div 요소를 선택합니다. |
| closest() | $("p").closet("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. 기본 탐색 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.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>
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. 기타 탐색 선택자 예시
<script src="https://code.jquery.com/jquery-3.6.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>
728x90
반응형
'jQuery' 카테고리의 다른 글
| [jQuery]속성 관련 메서드 (2) | 2022.09.02 |
|---|---|
| [jQuery]클래스 관련 메서드 (1) | 2022.09.02 |
| [jQuery]필터 선택자 (2) | 2022.08.30 |
| [jQuery]속성 선택자 (3) | 2022.08.30 |
| [jQuery]기본 선택자 (2) | 2022.08.30 |
댓글