jQuery - 탐색 선택자

jQuery 탐색 선택자

오늘은 탐색 선택자에 대해서 알려드리겠습니다.

---

탐색 선택자

선택자 종류	설명
children()	$("div").children()	div 요소의 자식 요소를 선택합니다.
parent()	$("p").parent()	p 요소의 부모 요소를 선택합니다.
parents()	$("p").parents("div")	p 요소의 부모가 되는 모든 div 요소를 선택합니다.
closet()	$("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").siblings("p")	div 요소의 형제 요소 중 p 요소를 선택합니다.
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 요소들을 선택합니다.

기본 탐색 선택자 예시

기본 탐색 선택자들을 이용해 간단한 예시로 보여드리겠습니다.

<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>

결과

기타 탐색 선택자

선택자 종류	설명
add()	$("div").add("p") div 요소와 p 요소를 선택한다.
addBack()	$("div").chlildren("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 요소가 맞습니다"); }

기타 탐색 선택자 예시

기타 탐색 선택자를 사용한 예시입니다.

<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>

결과