欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2023-12-25 08:51:33
...
: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>

效果如下;

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

只有第一个被选中,

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

效果如下:

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

发现每一个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>

效果如下:

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

结果发现只有第一个被选中,

这里发现,:first选中的是第一个ul元素的第一个li子元素,然后添加样式,不论这个元素在本页面有多少个,它只找第一个

而:first-child选择的是所有ul下面的第一个子元素是li的元素,有两个ul父元素,ul_1,ul_2他们都拥有各自的子元素li。

最后是first()它和:first 类似,获取的第一个ul元素的第一个li子元素,不管有多少个本元素

以上就是 jQuery :first选择器,:first-child选择器以及first()的使用区别的详细内容,更多请关注其它相关文章!

上一篇:

下一篇: