jQuery筛选器children()案例详解(图文)


Posted in Javascript onFebruary 17, 2013

jQuery的选择包含两种,一种是选择器,一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。

children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子。

完整的格式如下:

.children(expr)

其中children是筛选器的名称,expr是表达式,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象。例如:
<body> 
<div id="main"> 
<div id="like" class="rightbar"> 
<h2>猜你喜欢</h2> 
<ul> 
<li>海飞丝洗头膏</li> 
<li>六神花露水</li> 
<li>舒肤佳香皂</li> 
<li>心相印纸巾</li> 
<li>哇哈哈矿泉水</li> 
<li>王老吉</li> 
</ul> 
</div> 
<div id="hot" class="rightbar"> 
<h2>热门推荐</h2> 
<ul> 
<li>融氏橄榄油</li> 
<li>帮宝适纸尿裤</li> 
<li>有机大米</li> 
<li>妙洁垃圾袋</li> 
<li>优乐美奶茶</li> 
<li>亲亲果冻</li> 
</ul> 
</div> 
<div id="inner"></div> 
</div> 
</body>

<script type="text/javascript" language="javascript"> 
//此处为jQuery代码 
</script>

需求1:把所有div的孩子的字体颜色变为红色
$("div").children().css("color","red");//所有的文字都变成了红色

jQuery筛选器children()案例详解(图文)

需求2:把所有的div的孩子中是h2标签的字体颜色变为红色

$("div").children("h2").css("color","red");//所有h2标题的文字都变成了红色

jQuery筛选器children()案例详解(图文)

需求3:把所有div的孩子中是li标签的字体颜色变为红色

$("div").children("li").css("color","red");//失败!

jQuery筛选器children()案例详解(图文)

为什么不成功呢?因为children只能找孩子,找不到孙子辈的,而div的孩子是h2和ul,所以找不到li;

那么要想通过children找到li,只有先选定li的父亲ul

$("div ul").children("li").css("color","red");//所有li的文字都变成了红色

$("div ul")是一个联级选择器,意思是选择div下面的ul,这里不详细解释。

jQuery筛选器children()案例详解(图文)
需求4:把ul的第二个孩子的字体颜色变为红色

$("div ul").children(":eq(1)").css("color","red");//猜你喜欢的第二行“六神花露水”会变红

jQuery筛选器children()案例详解(图文)

要第二个孩子变红,为什么是eq(1)呢?因为顺序号是从0开始的,第一个孩子的序号是0,所以第二个孩子的序号就是1咯。

细一看发现只有“猜你喜欢”模块的第二行变了,“热门推荐”的第二行没变,为什么呢?因为children筛选器筛选出来的孩子是在一块排序的,所以“热门推荐”的第二行就变成了老7,要想变红可以这么写:

$("div ul").children(":eq(1),:eq(7)").css("color","red");//猜你喜欢的第二行,热门推荐的第二行都变红

二行都变红]

jQuery筛选器children()案例详解(图文)

总结一下:children是一个筛选器,找到当前jQuery对象的孩子,children(expr)中的expr是表达式,加了expr之后符合expr的孩子才会留下来,不符合的就干掉了。children只能找孩子,要想找孙子辈的、重孙子辈的,那就得用 find 筛选器。

Javascript 相关文章推荐
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 #Javascript
jQuery图片播放8款精美插件分享
Feb 17 #Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 #Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 #Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 #Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 #Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 #Javascript
You might like
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
载入进度条 效果
2006/07/08 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue服务端渲染的实例代码
2017/08/28 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Python3爬虫发送请求的知识点实例
2020/07/30 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
大学生学习2014全国两会心得体会
2014/03/13 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
神龙架导游词
2015/02/11 职场文书
社区国庆节活动总结
2015/03/23 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
少先队中队工作总结
2015/08/14 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript