jQuery :first選擇器，:first-child選擇器以及first()的使用區別-js教程-PHP中文網

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

黄舟

發布： 2017-06-23 14:35:21

原創

1786 人瀏覽過

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