jQuery는 컬렉션 개체입니다. 컬렉션에서 첫 번째 수준 하위 요소를 빠르게 찾으려면 children() 메서드를 사용할 수 있습니다.
참고: .children(selector) 메서드는 일치하는 요소 집합에 있는 각 요소의 모든 하위 요소를 반환합니다(아버지-아들 관계로 이해될 수 있는 아들 세대만 해당)
노드 검색 관계 이해:
<div class="div">
" " t;
위 코드: $("div").children()인 경우 div와 ul이 있으므로 ul만 찾을 수 있다는 의미입니다. 부모-자식 관계이고, li와 div는 조상 관계이므로 찾을 수 없습니다.
children()에는 매개변수가 없습니다
DOM 트리에서 이러한 요소의 직접적인 하위 요소를 검색하고 일치하는 요소의 새 jQuery 객체를 구성할 수 있습니다.
참고: jQuery는 컬렉션 객체이므로 하위 항목을 전달하는 것은 Combine입니다. 각 요소의 첫 번째 수준 하위 요소
Children() 메서드를 사용하여 동일한 유형의 선택기 표현식
$("div")을 선택적으로 허용하는 것도 jQuery가 컬렉션 개체이기 때문일 수 있습니다. 컬렉션 개체를 필터링하여 대상 요소를 찾으면 선택기 표현식을 전달할 수 있습니다
아래 예를 작성해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>childred()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>php.cn</li>
<li>php 中文网</li>
</ul>
<p> php </p>
</div>
<script>
$("div").children().css("color", "red");
</script>
</body>
</html>위 코드를 작성하면 $("div").children()으로 이동합니다. css("color", "red"); 그러면 div 아래의 하위 요소가 검색되므로 div의 요소가 빨간색으로 변합니다. 위의 코드를 사용하면 다음과 같습니다. p 태그에 있는 요소의 색상은 변경되지 않았습니다. children()에 매개변수가 있기 때문입니다. 첫 번째 요소가 첫 번째 요소이므로 div에서 첫 번째 하위 요소를 찾게 됩니다
<ul> 는 div의 첫 번째 요소이므로 li 태그의 요소가 변경됩니다. 로컬에서 코드를 작성하여 시도해 볼 수 있습니다
다음 섹션