简单讲解jQuery中的子元素过滤选择器
更新时间：2016年04月18日 17:26:11 作者：happyhaojie
这篇文章主要介绍了jQuery中的子元素过滤选择器,列举了一些操作DOM时获取父元素的一些方法,需要的朋友可以参考下
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素
我们知道使用
:first
过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用
:first-child
子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色。则可以使用
: first-child
<body>
<h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
<ul>
<li>芹菜</li>
<li>茄子</li>
<li>萝卜</li>
<li>大白菜</li>
<li>西红柿</li>
</ul>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ul>
</body>
<script type="text/javascript">
$("li:first-child").css("color", "red");
</script>
在浏览器中显示的效果：
通过
$("li:first-child")
选择器代码，获取了两个<ul>父元素中的第一个<li>元素，并使用
css()
方法修改了它们在页面中显示的文字颜色。
相关文章
如果你要使用html元素本身的属性或方法就需要使用this,如果你要使用jQuery包装后的方法或属性就要$(this)2014-05-05
将自己的表单元素ID和name命名为了nodeName，在chrome浏览器下报错，结果发现是表单元素命名的原因2014-03-03
我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.2011-04-04
jquery是当前比较流行的js类库，学习它可以实现很多功能。2010-08-08
浅谈jquery中的each方法$.each、this.each、$.fn.each
下面小编就为大家带来一篇浅谈jquery中的each方法$.each、this.each、$.fn.each。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jquery+html5烂漫爱心表白动画，七夕你表白了吗，如果还没有的话，抓紧来学习学习吧，祝小伙伴们表白成功。2015-08-08
jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。感兴趣的小伙伴可以参考阅读2023-04-04
这篇文章主要介绍了jQuery使用CSS()方法给指定元素同时设置多个样式的方法,实例分析了jQuery中css方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
关于hashchangebroker和statehashable的补充文档
我觉得之前写的两篇随笔有点不负责任，完全没写明白，补充了一份文档（权且算是文档吧=.=）2011-08-08
本文与大家详细探讨下用jQuery获取IE9下拉框默认值的问题,如果下拉框没有空默认值会怎么样等一系列问题，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
最新评论