DOM 요소 및 노드의 jQuery 탐색에 대한 자세한 설명

이 기사의 예에서는 DOM 요소와 노드를 순회하는 jQuery 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

1. 위쪽으로 트래버스 - 조상 요소

① $(selector).parent([filter]): 선택기 일치 요소의 직접 상위 요소를 반환합니다. 이 메서드는 반환된 상위 요소를 필터링하기 위해 필터 선택기를 허용할 수 있습니다.

② $(selector).parents([filter]): 문서 루트 요소 html까지 일치하는 요소의 모든 상위 노드를 반환합니다. 이 메서드는 반환된 상위 노드를 필터링하기 위해 필터 선택기를 허용할 수 있습니다.

비고: 부모와 부모의 차이점은 부모는 직접 부모 노드를 반환하고 부모는 모든 조상 노드를 반환하며 $("html").parent()는 문서 노드를 반환하는 반면 $("html")은 반환한다는 것입니다. parent()는 비어 있는 상태를 반환합니다.

③ $(selector).parentUntil([ancestorSelector][,filter]): 일치하는 노드와 조상 선택기 사이의 모든 조상 노드를 반환합니다. 이 메서드는 필터 선택기를 허용할 수 있습니다. 반환 Ancestor 노드를 필터링합니다. 조상 셀렉터가 비어 있거나 조상 노드에 일치하는 조상 셀렉터가 없으면 모든 조상 노드가 반환됩니다. 이는 parent() 메서드와 동일합니다.

$(selector).parentUtil(element[,ancestorSelector]): 사용법과 의미는 위와 동일합니다.

IV $(selector).offsetParent(): 일치하는 요소 중 가장 최근에 배치된 상위 요소를 반환합니다. 소위 위치화된 상위 요소는 해당 CSS 위치 속성이 상대, 절대, 고정으로 설정됨을 의미합니다. 애니메이션 시연 과정에서 계산되는 요소의 오프셋과 위치는 큰 역할을 합니다.

⑤ $(selector).closest(ancestorSelector[,context]): 이 메소드는 검색 범위를 제어하기 위해 매개변수 컨텍스트를 허용할 수 있습니다. Parent 방식과의 차이점은 다음과 같습니다.

a.closest는 현재 요소 자체부터 위쪽으로 검색합니다
parent는 상위 노드 요소에서 시작합니다.

b.closest는 조상 선택기와 일치하는 요소 위치를 찾을 때까지 DOM 트리를 탐색합니다.
부모는 문서의 루트 요소까지 DOM 트리를 탐색하여 각 조상 요소를 임시 컬렉션에 추가합니다. 선택기가 적용되면 이 컬렉션은 선택기를 기준으로 필터링됩니다.

c.closest는 0개 또는 1개의 요소를 포함하는 jQuery 객체를 반환합니다
부모는 0, 하나 이상의 요소를 포함하는 jQuery 객체를 반환합니다

기타 변환 사용법:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. 하향 순회 - 하위 요소

① .children([childrenSelector]): 요소의 직접 하위 요소를 반환합니다. 메서드는 반환된 하위 요소를 필터링하는 매개 변수를 허용할 수 있습니다.

② .find(descendantSelector):DescendantSelector와 일치하는 요소의 모든 하위 요소를 마지막 하위 요소까지 반환합니다.

기타 변환 사용법:

.find(jQuery object);
.find(element);

③ .contents(): 요소의 모든 하위 요소를 반환합니다. 하위 요소와 다른 점은 콘텐츠에 텍스트 노드와 주석 노드가 포함된다는 것입니다.

3. 형제 순회 - 형제 요소

① .siblings([selector]): 현재 요소의 모든 형제 요소를 반환합니다. 이 메서드는 반환된 형제 요소를 필터링하는 선택적 매개변수를 받을 수 있습니다.

② .next([selector]): 현재 요소의 다음 형제 요소를 반환합니다. 이 메서드는 반환된 형제 요소를 필터링하기 위해 선택적 매개 변수를 허용할 수 있습니다.

3 .nextAll([selector]): 현재 요소 뒤의 모든 형제 요소를 반환합니다. 이 메서드는 반환된 형제 요소를 필터링하기 위해 선택적 매개 변수를 허용할 수 있습니다.

4 .nextUntil([selector][,filter]): 선택기 조건과 일치하는 형제 요소가 발견될 때까지 현재 요소의 모든 형제 요소를 반환합니다. 이 메서드는 반환된 형제 요소를 필터링하기 위해 선택적 매개변수 필터를 허용할 수 있습니다.

⑤ .prev/prevAll/prevUntil은 next/nextAll/nextUntil과 사용법 및 기능은 동일하지만 검색 방향이 반대입니다.

4. 필터링

① .filter(selector): 현재 일치하는 요소 집합에서 선택기 조건을 만족하는 하위 집합을 필터링하여 일치 범위를 줄입니다.

.filter(function(index)): 콜백 함수에 따라 현재 일치하는 요소 집합을 필터링합니다. 콜백 함수에 전달된 매개변수 인덱스는 집합에 있는 요소의 인덱스를 참조하는 데 사용할 수 있습니다. 함수 본문의 요소를 나타내며 함수는 true/false를 반환합니다. true가 반환되면 하위 요소가 유지되고, 그렇지 않으면 하위 요소가 제외됩니다.

기타 변환 사용법:

.filter(element|jQueryObject)

② .first(): 현재 일치하는 요소 집합의 첫 번째 요소를 반환합니다.

③ .last(): 현재 일치하는 요소 집합의 마지막 요소를 반환합니다.

4 .eq(index/-index): 현재 일치하는 요소 집합에서 지정된 위치에 있는 요소를 반환합니다. 인덱스는 0부터 시작하며, 음수는 끝에서 처음으로 정렬된다는 의미입니다.

⑤ .has(selector/element): 현재 요소 세트에서 해당 하위 요소가 없는 요소를 제외하고 특정 하위 요소가 포함된 요소 세트를 반환합니다. 매개변수 선택기 또는 요소 개체를 사용하여 하위 요소를 일치시킬 수 있습니다.

⑥ .is(selector|function(index)|element|jQueryObject): 선택기나 콜백 함수 또는 요소나 jQuery 객체를 기반으로 요소 컬렉션을 확인하고, 주어진 표현식과 일치하는 요소가 하나 이상 포함되어 있으면 반환합니다. true, 그렇지 않으면 false가 반환됩니다. 또한 현재 요소 컬렉션이 비어 있거나 표현식이 비어 있으면 false가 반환됩니다. 이 메서드는 일반적으로 이벤트 핸들러와 같은 콜백 함수에서 특정 요소인지 여부를 확인하는 데 사용됩니다

⑦ .map(callback(index,domElement)): 일반 jQueryObject를 변환하려는 경우 콜백 함수 반환 값을 통해 현재 일치하는 요소 배열을 다른 개체 배열(dom 요소인지 여부)로 변환합니다. 배열을 구현하려면 jQuery.map(array,callback(objectOfArray,indexOfArray)) 메서드를 사용할 수 있습니다.

⑧ .not(selector|elements|function(index)|jQuery object): 현재 일치하는 요소 배열에서 매개변수 조정을 충족하는 요소를 삭제합니다. 매개변수는 선택기, DOM 요소, 일반 jQuery 객체 및 반환 부울일 수 있습니다. 변수의 콜백 함수.

⑨ .slice(start[,end]): 현재 일치하는 요소 집합에서 지정된 범위의 하위 집합을 가져옵니다. start와 end가 음수인 경우 끝에서 시작까지 요소 방향을 가져옵니다.

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자들은 이 사이트에서 특별한 주제를 확인할 수 있습니다: "JQuery 순회 알고리즘 및 기술 요약", "jQuery 테이블(테이블) 작업 기술 요약 " , "jQuery 드래그 효과 및 기법 요약", "jQuery 확장 기법 요약", "jQuery 공통 클래식 특수 효과 요약" , "jQuery 애니메이션 및 특수 효과 사용 요약", "jquery 선택기 사용 요약" 및 "jQuery 일반 플러그인 및 사용 요약"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.