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

来源：互联网发布：mac视网膜高清壁纸编辑：程序博客网时间：2024/05/19 18:16

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

效果如下;

只有第一个被选中,

测试:first-child，代码如下

<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()，代码如下

<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