jQuery:first选择器，:first-child选择器以及first()的使用区别

来源：动视网责编：小采时间：2020-11-27 20:18:59

jQuery:first选择器，:first-child选择器以及first()的使用区别

jQuery:first选择器，:first-child选择器以及first()的使用区别::first 获取第一个元素。:first-child 选择器选取属于其父元素的第一个子元素的所有元素。first() 返回被选元素的首个元素。测试代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-

推荐度：

点击下载本文 文档为doc格式

导读jQuery:first选择器，:first-child选择器以及first()的使用区别::first 获取第一个元素。:first-child 选择器选取属于其父元素的第一个子元素的所有元素。first() 返回被选元素的首个元素。测试代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-

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

效果如下：