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 URL参数判断,确定菜单样式
May 31 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
innerText 使用示例
Jan 23 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
linux iconv方法的使用
2011/10/01 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python中实现三目运算的方法
2015/06/21 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
Python玩转Excel的读写改实例
2019/02/22 Python
下载官网python并安装的步骤详解
2019/10/12 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
高三地理教学反思
2014/01/11 职场文书
运动会广播稿150字
2014/02/19 职场文书
卖房协议书
2014/04/11 职场文书
小学家长评语大全
2014/04/16 职场文书
节约用水的口号
2014/06/20 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android