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子元素,不管有多少个本元素


发布了25 篇原创文章 · 获赞 20 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览