简单讲解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 相关文章推荐
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 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多个文件及图片上传实例详解
2014/11/10 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
jQuery实现验证用户登录
2019/12/10 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
django rest framework 过滤时间操作
2020/07/12 Python
django和flask哪个值得研究学习
2020/07/31 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
《在山的那边》教学反思
2014/02/23 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
公司节能减排方案
2014/05/16 职场文书
2014年内勤工作总结
2014/11/24 职场文书
行政助理岗位职责
2015/02/10 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书