집 >웹 프론트엔드 >JS 튜토리얼 >jquery_jquery에서 children()과 find()의 차이점을 기반으로 한 소개

jquery_jquery에서 children()과 find()의 차이점을 기반으로 한 소개

WBOY원래의: 2016-05-16 17:35:091401검색

.children(selector) 메서드는 일치하는 요소 집합에 있는 각 요소의 모든 하위 ( 하위만 )를 반환합니다. 매개변수는 선택사항입니다. 매개변수를 추가한다는 것은 선택기와 필터링 요소를 통한 필터링을 의미합니다.

.find(selector) 메소드는 일치하는 요소 세트에 있는 각 요소의 descendants를 반환합니다. 매개변수는 필수이며 선택기, jquery 객체 또는 요소를 필터링하는 요소일 수 있습니다.

.find()는 DOM 트리에서 한 수준 아래로만 탐색한다는 점을 제외하면 .children() 메서드와 유사합니다. 내가 이해하는 여기의 아이들은 아들 수준에서만 횡단됩니다. 예제 보기:

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

.children (선택기) 메서드는 일치하는 요소 집합에 있는 각 요소의 모든 하위(하위만)를 반환합니다. 매개변수는 선택사항입니다. 매개변수를 추가한다는 것은 선택기와 필터링 요소를 통한 필터링을 의미합니다.

.find(selector) 메서드는 일치하는 요소 집합에 있는 각 요소의 하위 항목을 반환합니다. 매개변수는 필수이며 선택기, jquery 객체 또는 요소를 필터링하는 요소일 수 있습니다.

.find()는 DOM 트리에서 한 수준 아래로만 탐색한다는 점을 제외하면 .children() 메서드와 유사합니다. 내가 이해하는 여기의 아이들은 아들 수준에서만 횡단됩니다. 예시를 살펴보세요:

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

$( 'ul.level-2').children().css('ground-color', 'red')

이 코드 줄의 결과는 다음과 같습니다. 항목 A, B, C는 빨간색 배경을 갖습니다. 선택기 표현식을 적용하지 않았으므로 반환된 jQuery 개체에는 모든 하위 요소가 포함됩니다. 선택기가 적용되면 일치하는 항목만 포함됩니다.

예시를 보면

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

< ;스크립트>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});

안녕하세요
;aa그리고 또 🎜>

얻은 결과는 다음과 같습니다.

예상된 결과이지만 위의

를

로 바꾸면 위의 코드 주석을 보면 결과는 다음과 같습니다.

.find() 메서드에 대해 참고할 사항:

1. 찾기는 현재 요소 컬렉션에 있는 각 요소의 하위 요소를 탐색하는 것입니다. 요건을 충족하기만 하면 아들이든 손자이든 상관없습니다.

2. 다른 트리 순회 방법과 달리 선택기 표현식은 .find()에 대한 필수 매개변수입니다. 모든 하위 요소를 검색해야 하는 경우 와일드카드 선택기 '*'를 전달할 수 있습니다.

3. find는 자신을 제외하고 자손만 순회합니다.

4. 선택기 컨텍스트는 .find() 메서드로 구현됩니다. 따라서 $('li.item-ii').find('li')는 $('li', 'li.item)과 동일합니다. -ii').

선택기의 구문은 다음과 같습니다: jQuery(selector, [context])

일반적으로 jquery 선택기가 첫 번째 매개변수로 사용됩니다. 실제로 jquery() 함수를 사용하면 두 번째 매개변수를 전달할 수도 있습니다. 이 매개변수를 전달하는 목적은 이전 선택기를 컨텍스트 환경으로 제한하는 것입니다. 즉, 두 번째 매개변수가 전달되지 않으면 선택기는 문서의 루트에서 DOM을 검색합니다(두 번째 매개변수가 지정된 경우 $()는 현재 HTML 문서에서 DOM 요소를 검색합니다). DOM 요소 Set 또는 jquery 객체인 경우 이 컨텍스트에서 검색됩니다.

아래 예시 보기

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

 
$( "div.foo").click(function() { 
 $("span", this).addClass("bar"); 
}) 

범위 선택기를 이 환경으로 제한했기 때문에 클릭한 요소의 범위만 추가 클래스를 받게 됩니다.
내부적으로 선택기 컨텍스트는 .find() 메서드를 통해 구현되므로 $("span", this)는 $(this).find("span"),$('li.item-ii').find('li')는 $('li', 'li.item-ii')와 동일합니다.

find()에 대한 자세한 내용을 보려면 http://www.w3school.com.cn/jquery/traversing_find.asp

를 방문하세요.

children() 자세한 내용은 다음을 방문하세요: http://www.w3school.com.cn/jquery/traversing_children.asp

성명：

이전 기사：jQuery 구문 강조 플러그인은 다양한 프로그램 소스 코드 구문 색상 지정 및highlighting_jquery를 지원합니다.다음 기사：jQuery 구문 강조 플러그인은 다양한 프로그램 소스 코드 구문 색상 지정 및highlighting_jquery를 지원합니다.

jquery_jquery에서 children()과 find()의 차이점을 기반으로 한 소개

관련 기사