jQuery中:first，:first-child，first()的使用区别

来源：互联网发布：我心伤悲莫知我哀评价编辑：程序博客网时间：2024/05/19 20:00

:first 获取第一个元素。

:first-child 选择器选取属于其父元素的第一个子元素的所有元素。

first() 返回被选元素的首个元素。

测试代码如下：

[html] view plain copy
<!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，代码如下

[html] view plain copy
<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，代码如下

[html] view plain copy
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("li:first-child").css("background-color","yellow");  
    })  
 </script>  

效果如下：

发现每一个ul的第一个li元素都被选中，

测试first()，代码如下

[html] view plain copy
<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选中的是所有li中的第一个，不论它的父元素是谁。

而:first-child选择的是所有父元素下面的第一个子元素是li的元素，有两个ul父元素，ul_1,ul_2他们都拥有各自的子元素li。

最后是first()它和:first 类似，获取的所有li元素的第一个，不论它的父元素是谁。

0 0