[jQuery] 요소의 탐색 (자손 요소의 탐색)

복습

https://shins99.tistory.com/87

[jQuery] 요소의 탐색 (형제 요소의 탐색)

---

자손 요소의 탐색

---

자손(descendant) 요소의 탐색

- DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메서드

 

1. .children()

2. .find()

 

.children() 메서드

- 선택한 요소의 자식(child) 요소를 모두 선택

(선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있음)

 

예제
$(function() {
    $("button").on("click", function() {
        $("ul").children()                         // <ul>요소의 자식 요소를 모두 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
    });
});

 

---

.find() 메서드

- 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택

(별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있음)

 

예제
$(function() {
    $("button").on("click", function() {
        $("li").find("*")                            // 각 <li>요소의 자손 요소을 모두 선택함.
            .css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
    });
});

 

---

자손 요소를 탐색하는 메소드

.children()	선택한 요소의 자식(child) 요소를 모두 선택함.
.find()	선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택함.

---