码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-11-04 18:11:49      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:tle   child   charset   tail   javascrip   bsp   head   效果   back   

: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()的使用区别

标签:tle   child   charset   tail   javascrip   bsp   head   效果   back   

原文地址:http://www.cnblogs.com/guo-rong/p/7783559.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!