jquery를 사용하여 하위 요소를 쿼리하는 방법-프런트엔드 Q&A-php.cn

jquery를 사용하여 하위 요소를 쿼리하는 방법

青灯夜游

풀어 주다： 2022-03-18 14:52:22

원래의

7189명이 탐색했습니다.

jquery로 하위 요소를 쿼리하는 방법: 1. children() 메서드를 사용하여 지정된 요소 아래의 직접 하위 집합 요소를 가져옵니다. 2. find() 메서드를 사용하여 지정된 요소 아래의 모든 요소(하위 집합의 하위 집합 포함)를 가져옵니다. .) 하위 집합 요소.

jquery를 사용하여 하위 요소를 쿼리하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jQuery 하위 요소 선택기 find() 및 children()

children() 메서드: 이 요소 아래의 직접 하위 집합 요소를 가져옵니다.
find() 메서드: 이 요소 아래의 직접 하위 집합 요소를 가져옵니다. 요소 모든 하위 집합 요소(하위 집합의 하위 집합 포함)

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</style>
</head>
<body>
    <div>
    	<span>11</span>
    	<span>
    		<ul>
    			<li class="no1">aaa</li>
    			<li>bbb</li>
    			<li>ccc</li>
    		</ul>
    	</span>
    	<span>222</span>
    	<ul>
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    	</ul>
    </div>
 
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	$("div").children(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
	// $("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
</script>
</html>

로그인 후 복사

jquery를 사용하여 하위 요소를 쿼리하는 방법

이때 찾기 항목을 열고 댓글을 남깁니다.

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			/*background-color: pink;*/
		}
	</style>
</head>
<body>
    <div>
    	<span>11</span>
    	<span>
    		<ul>
    			<li class="no1">aaa</li>
    			<li>bbb</li>
    			<li>ccc</li>
    		</ul>
    	</span>
    	<span>222</span>
    	<ul>
    		<li>ddd</li>
    		<li>eee</li>
    		<li>fff</li>
    	</ul>
    </div>
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
	// $("div").children(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	// console.log($("div").children(".no1")[0]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

로그인 후 복사

해당 스크린샷:

jquery를 사용하여 하위 요소를 쿼리하는 방법