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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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可逆加密/解密函数分享
2012/09/25 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
JSONP跨域请求
2017/03/02 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Jquery $.map使用方法实例详解
2020/09/01 jQuery
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Pandas的数据过滤实现
2021/01/15 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
工程概预算专业毕业生求职信
2013/10/04 职场文书
函授毕业生的自我鉴定
2013/11/26 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
中学教师师德承诺书
2014/05/23 职场文书
安全生产年活动总结
2014/08/29 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
nginx中proxy_pass各种用法详解
2021/11/07 Servers