jQuery:first选择器,:first-child选择器以及first()的使用区别
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery:first选择器,:first-child选择器以及first()的使用区别,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1674字,纯文字阅读大概需要3分钟。
内容图文
![jQuery:first选择器,:first-child选择器以及first()的使用区别](/upload/InfoBanner/zyjiaocheng/301/9e50b6e9a6914be0a4fd2080ef8364b5.jpg)
: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()的使用区别的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的jQuery:first选择器,:first-child选择器以及first()的使用区别全部内容,希望文章能够帮你解决jQuery:first选择器,:first-child选择器以及first()的使用区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。