[jQuery]
[jQuery] 요소의 탐색 (자손 요소의 탐색)
북방바다코끼리표범
2023. 10. 3. 10:15
복습
https://shins99.tistory.com/87
[jQuery] 요소의 탐색 (형제 요소의 탐색)
복습 https://shins99.tistory.com/86 [jQuery] 요소의 탐색 (조상 요소의 탐색) 복습 https://shins99.tistory.com/84 [jQuery] 요소의 복사 및 삭제 복습 https://shins99.tistory.com/83 [jQuery] 요소의 추가 복습 https://shins99.tist
shins99.tistory.com
자손 요소의 탐색
자손(descendant) 요소의 탐색
- DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메서드
1. .children()
2. .find()
.children() 메서드
- 선택한 요소의 자식(child) 요소를 모두 선택
(선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있음)
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
$("ul").children() // <ul>요소의 자식 요소를 모두 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
.find() 메서드
- 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택
(별표("*")를 인수로 전달하여, 선택한 요소의 자손 요소를 모두 선택할 수도 있음)
1
2
3
4
5
6
7
|
예제
$(function() {
$("button").on("click", function() {
$("li").find("*") // 각 <li>요소의 자손 요소을 모두 선택함.
.css({"border": "2px solid red"}); // 해당 요소의 CSS 스타일을 변경함.
});
});
|
cs |
자손 요소를 탐색하는 메소드
.children() | 선택한 요소의 자식(child) 요소를 모두 선택함. |
.find() | 선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택함. |