首頁  >  文章  >  web前端  >  jquery怎麼查詢子元素

jquery怎麼查詢子元素

青灯夜游
青灯夜游原創
2022-03-18 14:52:227201瀏覽

jquery查詢子元素的方法:1、使用children()方法,可以取得指定元素下的直接子集元素;2、使用find()方法,可以取得指定元素下的所有(包括子集的子集)子集元素。

jquery怎麼查詢子元素

本教學操作環境:windows7系統、jquery1.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怎麼查詢子元素

此時我們再把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]);
 
 
	$("div").find(".no1").css({color:&#39;#a61c00&#39;,backgroundColor:"#0000ff"});
	console.log($("div").find(".no1")[0]);
</script>
</html>

對應截圖:

jquery怎麼查詢子元素

總結一下區別:

children() 方法傳回傳回所有被選元素的直接子元素(直接子元素,只找兒子不要孫子(: 也就是說不會遞歸去遍歷)

find()方法獲得目前元素集合中每個元素的後代(注意find()方法,必須傳參數,否者無效)

【推薦學習:jQuery影片教學web前端

以上是jquery怎麼查詢子元素的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn