ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery: 最初の子セレクターについての深い理解
概要
最初の子要素と一致します
':first'は1つの要素のみと一致しますが、このセレクターは各親要素に対して1つの子要素と一致します
例
説明:
各ULで最初の要素を検索しますli
HTML コード:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jQuery コード:
$("ul li:first-child")
結果:
[ <li>John</li>, <li>Glen</li> ]
$("p:first-child") 定義:
親に属する要素と最初の要素を選択すべての兄弟要素のうちの p は p:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>first-child选择器</title> <script src="../../jquery.min.js"> </script> <script> $(document).ready(function(){ $("p:first-child").css("background-color","red"); }); </script> </head> <body> <p>the first paragraph in body</p> <div style="border:1px solid;"> <p>The first paragraph in div.</p> <p>the last paragraph in div.</p> </div><br> <div style="border:1px solid;"> <span>This is a span element.</span> <p>The first paragraph in another div.</p> <p>The last paragraph in another div.</p> </div> </body></html>
DOM ツリー構造
よくある説明現在のすべての p の親要素を見つけます。 $("p:last-child") は、最初の要素が p ではなく、span 要素である場合はその逆です。バックシャドウ効果は変更されません。
Extension
$("p:nth-child(n)")
親要素の n 番目の子要素である各 p 要素を選択します。n番目の要素がp要素でない場合、このセレクターで選択された範囲には属しません。
$(“p:nth-last-child(n)”)
親要素の最後の子要素から数えて3番目の子要素であるp要素を選択します
最後からn番目の要素がpでない場合要素は、このセレクターで選択された範囲に属しません。
以上がJquery: 最初の子セレクターについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。