jquery에서 find()와 children()의 차이점은 무엇입니까?

차이: children(selector) 메소드는 일치하는 요소 세트에 있는 각 요소의 모든 하위 요소(아들만)를 반환하고 매개변수는 선택 사항입니다. find(selector) 메소드는 일치하는 요소에 있는 각 요소의 자손을 반환합니다. (요구 사항을 충족하는 한 아들인지 손자인지는 중요하지 않습니다.)

관련 권장사항: "jQuery Video Tutorial"

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

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

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

<ul class="level-1">
	<li class="item-i">I</li>
	<li class="item-ii">II
		<ul class="level-2">不包括自己
			<li class="item-a">A</li>
			<li class="item-b">B
				<ul class="level-3">
					<li class="item-1">1</li>
					<li class="item-2">2</li>
					<li class="item-3">3</li>
				</ul>
			</li>
			<li class="item-c">C</li>
		</ul>
	</li>
	<li class="item-iii">III</li>
</ul>

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

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

예를 보면

<script>
$(document).ready(function(){
    $("#abc").children(".selected").css("color", "blue");
});
</script>
<p id="abc">
	<span>Hello</span>
	<p class="selected">Hello Again</p>
	<p><--换成<p>
		<p class="selected">And Again</p>
		<span class="selected">aaAnd Again</span>
	</p><--换成</p>
	<p>And One Last Time</p>
</p>

결과는 다음과 같습니다.

예상된 결과이지만 위의 e388a4556c0f65e1904146cc1a846bee를 e388a4556c0f65e1904146cc1a846bee로 바꾸면 코드 주석을 참조하세요. 위의 결과는 다음과 같습니다.

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 객체인 경우 이 컨텍스트에서 검색됩니다.

예를 살펴보겠습니다

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

범위 선택기를 이 환경으로 제한했기 때문에 클릭한 요소의 범위만 추가 클래스를 받게 됩니다.

내부적으로 selector context는 .find() 메소드를 통해 구현되므로 $("span", this)는 $(this).find("span"), $('li . item-ii').find('li')는 $('li', 'li.item-ii')

find()와 동일합니다. 자세한 내용은 https://www.php를 참조하세요. .cn/dic/jquery/find.html

children()자세한 내용은 https://www.php.cn/dic/jquery/children.html

프로그래밍 관련 지식을 더 보려면 다음을 참조하세요. 방문: 프로그래밍 비디오 코스! !

위 내용은 jquery에서 find()와 children()의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!