jQuery :first セレクター、:first-child セレクター、first() の違い-jsチュートリアル-php.cn

jQuery :first セレクター、:first-child セレクター、first() の違い

黄舟

リリース： 2017-06-23 14:35:21

オリジナル

1805 人が閲覧しました

: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>

ログイン後にコピー

結果は次のとおりです

jQuery :first セレクター、:first-child セレクター、first() の違い

最初のテストのみが選択されます、

テスト: 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>

ログイン後にコピー

効果は次のとおりです:

jQuery :first セレクター、:first-child セレクター、first() の違い

各 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>

ログイン後にコピー

効果は次のとおりです:

jQuery :first セレクター、:first-child セレクター、first() の違い