jQuery 기본 강의

jQuery 효과

jQuery를 사용하면 DOM 트리를 쉽게 탐색하여 요소의 조상을 찾을 수 있습니다。

조상은 부모, 조부모, 고조부모 등입니다。

이 장에서는 DOM 트리를 탐색하는 방법을 설명합니다。

다음은 DOM 트리를 탐색하는 데 사용되는 jQuery 메서드들입니다：

이 장에서는 각 메서드를 사용하는 방법을 보여드립니다。

jQuery parent()메서드는 선택된 요소의 직접 부모 요소를 반환합니다。

이 메서드는 DOM 트리에서 한 단계 위로 이동합니다。

이 예제는 SPAN 요소의 직접 부모 요소를 반환합니다：

div（조조부모）

div（조부모）

p（직접 부모）　　　　　　　　　span

선택 사항 매개변수를 사용하여 검색 부모를 필터링할 수 있습니다。

이 예제는 각 단락이 'selected' 클래스를 가진 직접 부모 요소를 반환합니다：

예제

$("document").ready(function(){
　　$("p").parent(".selected").css("background", "coral");
});

jQuery parents()메서드는 선택된 요소의 모든 조상 요소를 반환합니다。

이 메서드는 부모 요소에서 DOM 요소의 조상으로 올라가며, 문서의 루트 요소(<html>)까지 올라갑니다。

아래의 예제는 SPAN 요소의 모든 조상을 반환합니다：

body（조조조부모）

div（조조부모）

div（조부모）

p（직접 부모）　　　　　　　　　span

jQuery parentsUntil()메서드는 두 가지 주어진 매개변수 사이의 모든 조상 요소를 반환합니다。

아래의 예제는 SPAN과 BODY 요소 사이의 모든 조상 요소를 반환합니다：

body（조조조부모）

div（조조부모）

div（조부모）

p（직접 부모）　　　　　　　　　span

완전한 탐색 메서드에 대한 정보는 다음을 방문하세요jQuery 탐색 참조。