简单讲解jQuery中的子元素过滤选择器


Posted in Javascript onApril 18, 2016

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

简单讲解jQuery中的子元素过滤选择器

$('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>

在浏览器中显示的效果:

简单讲解jQuery中的子元素过滤选择器

通过

$("li:first-child")

选择器代码,获取了两个<ul>父元素中的第一个<li>元素,并使用

css()

方法修改了它们在页面中显示的文字颜色。

Javascript 相关文章推荐
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 #Javascript
AngularJS入门教程之AngularJS模型
Apr 18 #Javascript
You might like
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
javascript 解析url的search方法
2010/02/09 Javascript
理解Javascript闭包
2013/11/01 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
一看就懂得Python的math模块
2018/10/21 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
求职信模板标准格式范文
2014/02/23 职场文书
高三毕业寄语
2014/04/10 职场文书
调解协议书
2014/04/16 职场文书
地质灾害防治方案
2014/05/14 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL