ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryを使用して子要素をクエリする方法

jqueryを使用して子要素をクエリする方法

青灯夜游
青灯夜游オリジナル
2022-03-18 14:52:227184ブラウズ

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を使用して子要素をクエリする方法

この時点で、検索項目を開いてコメントします

<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 ビデオ チュートリアル , ウェブフロントエンド]

以上がjqueryを使用して子要素をクエリする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。