Jquery 상향 순회, 하향 순회, 형제 순회 및 필터링 사용법에 대한 자세한 설명

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

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

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

참고: 상위와 상위의 차이점은 상위는 직접 상위 노드를 반환하고 상위는 모든 상위 노드를 반환하는 반면 $("html").parent()는 document 노드를 반환한다는 것입니다. ").parents( )는 빈 값을 반환합니다.

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

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

4 $(selector).offsetParent(): 일치하는 요소의 가장 최근 위치에 있는 상위 요소를 반환합니다. 소위 위치가 지정된 상위 요소는 주로 애니메이션 중에 상대, 절대, 고정으로 설정된 CSS position 속성을 참조합니다. 프리젠테이션 요소의 오프셋과 위치를 계산하는 것은 매우 유용합니다.

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

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

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

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

기타 변형 사용법:

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

2. elements

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

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

기타 변형 사용법:

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

3 .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)): 콜백 함수를 기반으로 현재 일치하는 요소 집합을 필터링합니다. 콜백 함수에 의해 전달된 매개변수 인덱스는 집합에 있는 요소의 index를 참조합니다. 함수 본문의 요소를 나타내는 데 사용됩니다. 함수는 true/false를 반환합니다. true가 반환되면 하위 요소가 유지되고, 그렇지 않으면 하위 요소가 제외됩니다.

기타 변환 사용법:

.filter(element|jQueryObject)

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

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

4 .eq(index/-index): 현재 일치하는 요소 집합에서 지정된 위치에 있는 요소를 반환합니다. 인덱스는 0부터 시작하고 음수는 꼬리에서 머리로 정렬됨을 나타냅니다.

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

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

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

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

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

위 내용은 Jquery 상향 순회, 하향 순회, 형제 순회 및 필터링 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!