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 相关文章推荐
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
正则表达式搭配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
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python从零开始创建区块链
2018/03/06 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python lambda表达式用法实例分析
2018/12/25 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
自我鉴定200字
2013/10/28 职场文书
推广普通话演讲稿
2014/05/23 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
组织委员竞选稿
2015/11/21 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Oracle 多表查询基本语法实例
2022/04/18 Oracle