ホームページ > 記事 > ウェブフロントエンド > jqueryを使用して子要素をクエリする方法
jquery で子要素をクエリする方法: 1. Children() メソッドを使用して、指定された要素の下にある直接のサブセット要素を取得します; 2. find() メソッドを使用して、指定された要素の下にあるすべての要素を取得します(子を含む)、セットのサブセット) サブセット要素。
このチュートリアルの動作環境: 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:'#a61c00',backgroundColor:"#0000ff"}); console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined // $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"}); </script> </html>
この時点で、検索項目を開いてコメントします
<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:'#a61c00',backgroundColor:"#0000ff"}); // console.log($("div").children(".no1")[0]); $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"}); console.log($("div").find(".no1")[0]); </script> </html>
対応するスクリーンショット:
違いの要約:
children() メソッドは、選択した要素のすべての直接の子要素を返します (直接の子要素、孫ではなく息子のみを返します (つまり、再帰的走査はありません)
jQuery ビデオ チュートリアル , ウェブフロントエンド]
以上がjqueryを使用して子要素をクエリする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。