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

最新推荐文章于 2020-08-05 20:41:06 发布

mingqingyuefeng

最新推荐文章于 2020-08-05 20:41:06 发布

阅读量483

点赞数

:first 获取第一个元素。

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

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

测试代码如下：

[html]view plaincopy 
   
 <!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 plaincopy 
   
 <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 plaincopy 
   
 <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 plaincopy 
   
 <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元素的第一个，不论它的父元素是谁。

mingqingyuefeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中:first，:first-child，first()的使用区别

:first 获取第一个元素。:first-child 选择器选取属于其父元素的第一个子元素的所有元素。first() 返回被选元素的首个元素。测试代码如下：[html] view plain copy> html> head> meta charset="UTF-8"> title>Insert tit
复制链接

扫一扫