ホームページ > 記事 > ウェブフロントエンド > jQuery :first セレクター、:first-child セレクター、first() の違い
jQuery :first セレクター、:first-child セレクター、first() の違い
- 黄舟オリジナル
- 2017-06-23 14:35:211786ブラウズ
:first 最初の要素を取得します。
:first-child セレクターは、親要素の最初の子要素であるすべての要素を選択します。
first() は、選択された要素の最初の要素を返します。
テストコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>ul_1 item 1</li>
<li>ul_1 item 2</li>
<li>ul_1 item 3</li>
<li>ul_1 item 4</li>
<li>ul_1 item 5</li>
</ul>
<ul>
<li>ul_2 item 1</li>
<li>ul_2 item 2</li>
<li>ul_2 item 3</li>
<li>ul_2 item 4</li>
<li>ul_2 item 5</li>
</ul>
</body>
</html>最初のテスト: まず、コードは次のとおりです
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:first").css("background-color","yellow");
})
</script>結果は次のとおりです
最初のテストのみが選択されます、
テスト: first-child 、コードは次のとおりです
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:first-child").css("background-color","yellow");
})
</script>効果は次のとおりです:
各 ul の最初の li 要素が選択されていることがわかりました、
Test first()、コードは次のとおりです
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li").first().css("background-color","yellow");
})
</script>効果は次のとおりです:
最初のものだけが選択されていることがわかりました、
ここで、:first が最初の ul 要素の最初の li 子要素を選択し、その後スタイルを追加することがわかります。このページには要素がいくつありますか。最初の
だけが検索され、:first-child が選択されます。これは、ul の下の最初の子要素が li である要素です。ul_1 と ul_2 の 2 つの親要素があり、どちらも ul_1 と ul_2 です。独自の子要素 li があります。
最後のものは first() で、:first に似ており、要素の数に関係なく、最初の ul 要素の最初の li サブ要素を取得します。
以上がjQuery :first セレクター、:first-child セレクター、first() の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。