首頁 >web前端 >js教程 >jQuery :first選擇器，:first-child選擇器以及first()的使用區別

jQuery :first選擇器，:first-child選擇器以及first()的使用區別

黄舟原創: 2017-06-23 14:35:211799瀏覽

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

先測試: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()的使用區別

##只有第一個被選取,

測試: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元素都被選中，

測試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()的使用區別

結果發現只有第一個被選中，

這裡發現，:first選中的是第一個ul元素的第一個li子元素，然後添加樣式，不論這個元素在本頁面有多少個，它只找第一個

而:first-child選擇的是所有ul下面的第一個子元素是li的元素，有兩個ul父元素，ul_1,ul_2他們都擁有各自的子元素li。

最後是first()它和:first 類似，取得的第一個ul元素的第一個li子元素，不管有多少個本元素

以上是jQuery :first選擇器，:first-child選擇器以及first()的使用區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery ：first-child選擇器在這種情況下為什麼會無效呢？下一篇：jquery ：first-child選擇器在這種情況下為什麼會無效呢？

看更多