jQuery中:first，:first-child，first()的使用区别
Posted Aaron2705
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中:first，:first-child，first()的使用区别相关的知识，希望对你有一定的参考价值。
: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(){
$("ul 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选中的是第一个ul元素的第一个li子元素，然后添加样式，不论这个元素在本页面有多少个，它只找第一个
而:first-child选择的是所有ul下面的第一个子元素是li的元素，有两个ul父元素，ul_1,ul_2他们都拥有各自的子元素li。
最后是first()它和:first 类似，获取的第一个ul元素的第一个li子元素，不管有多少个本元素
以上是关于jQuery中:first，:first-child，first()的使用区别的主要内容，如果未能解决你的问题，请参考以下文章
jQuery中 :first:first-child 和 :first-of-type 之间的不同
jQuery中:first，:first-child，first()的使用区别
[ jquery 选择器 :first :first-child ] 实例分析: :first :first-child 之间在元素选取方面的区别