DOM 트리를 순회하는 jQuery의 parent(), parent(), close()의 차이점은 Upward_jquery입니다.

이번 스프린트에서는 프론트엔드 UI를 작성해야 하기 때문에 jQuery를 사용합니다. 하지만 DOM 트리를 위쪽으로 순회하는 jQuery의 API에는 parent(), parent() 및 Nearest()가 포함되어 있습니다. 명확합니다. 둘 사이에는 구체적인 차이점이 있으므로 jQuery API 문서를 주의 깊게 읽고 참고용으로 여기에 차이점을 기록했습니다.

1.부모([선택자])

이 메소드는 주어진 jQuery 객체에 포함된 DOM 요소 또는 DOM 요소 세트의 조상 노드를 선택하고 이 노드를 jQuery 객체로 패키징하여 반환하는 데 사용됩니다. 반환된 노드 세트는 내부에서 외부로 정렬됩니다. .

동시에 이 메소드는 반환된 노드 세트에서 선택기와 일치하는 하위 요소 세트를 필터링하는 데 사용되는 문자열 선택기도 허용합니다.

2.부모([선택자])

이 메소드는 주어진 jQuery 객체에 포함된 DOM 요소 또는 DOM 요소 세트의 상위 노드를 선택하는 데 사용됩니다. parent()와 차이점은 한 수준 위로만 검색하는 반면, parent()는 전체 DOM 트리를 검색한다는 것입니다.

이 메소드는 문자열 선택기를 사용하여 반환된 요소를 필터링할 수도 있습니다.

누군가가 질문할 수 있습니다. DOM 요소의 상위 요소는 하나만 있지 않나요? 필터링을 위해 선택기가 필요한 이유는 무엇입니까? 실제로 jQuery 객체에는 많은 DOM 요소가 포함될 수 있습니다. 예를 들어 $('a').parent()는 모든 태그의 상위 요소를 선택하므로 필터링할 수 있습니다.

3.가장 가까운(선택자)

이 메서드는 선택기와 일치하는 노드를 찾을 때까지 jQuery 개체에 포함된 DOM 요소 또는 DOM 요소 집합의 상위 노드를 위쪽으로 탐색하는 데 사용됩니다.

부모님과의 차이점():

closest()는 자체적으로 시작하여 적합한 노드를 찾을 때까지 위쪽으로 이동합니다. 반환된 jQuery 객체에는 0개 또는 1개의 객체가 포함됩니다.

parents()는 자체 상위 노드에서 시작하여 위쪽으로 이동하여 모든 조상 노드를 반환하고 선택기에 따라 이러한 노드를 필터링합니다. 최종 반환된 jQuery 개체에는 0개, 1개 이상의 개체가 포함될 수 있습니다.

차이점을 보여주는 예:

코드 복사 코드는 다음과 같습니다.

< !DOCTYPE html>

 

                                            🎜>      

위 문서에서:


$('b').parents()는 다음을 반환합니다:span, p, div, body, html 및 기타 요소로 구성된 jQuery 개체

$('b').parent()는 다음을 반환합니다: 범위로 구성된 jQuery 객체

$('b').closest('div') 는 div에서 생성된 jQuery 객체를 반환합니다.