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>
1 <script type="text/javascript" language="javascript">

2 //此处为jQuery代码

3 </script>

需求1：把所有div的孩子的字体颜色变为红色

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

 
需求2：把所有的div的孩子中是h2标签的字体颜色变为红色
$("div").children("h2").css("color","red");//所有h2标题的文字都变成了红色

 
需求3：把所有div的孩子中是li标签的字体颜色变为红色
$("div").children("li").css("color","red");//失败！

 
为什么不成功呢？因为children只能找孩子，找不到孙子辈的，而div的孩子是h2和ul，所以找不到li；
那么要想通过children找到li，只有先选定li的父亲ul
$("div ul").children("li").css("color","red");//所有li的文字都变成了红色

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

 
需求4：把ul的第二个孩子的字体颜色变为红色
$("div ul").children(":eq(1)").css("color","red");//猜你喜欢的第二行“六神花露水”会变红

 
要第二个孩子变红，为什么是eq(1)呢？因为顺序号是从0开始的，第一个孩子的序号是0，所以第二个孩子的序号就是1咯。
细一看发现只有“猜你喜欢”模块的第二行变了，“热门推荐”的第二行没变，为什么呢？因为children筛选器筛选出来的孩子是在一块排序的，所以“热门推荐”的第二行就变成了老7，要想变红可以这么写：
$("div ul").children(":eq(1),:eq(7)").css("color","red");//猜你喜欢的第二行，热门推荐的第二行都变红

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

jQuery笔记-jQuery筛选器children()详解的更多相关文章

  1. jQuery Pagination Ajax分页插件中文详解（摘）

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  2. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  3. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  4. Android 高级UI设计笔记07：RecyclerView 的详解

    1. 使用RecyclerView       在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...

  5. IP地址和子网划分学习笔记之《IP地址详解》

    2018-05-03 18:47:37   在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. ...

  6. 云时代架构阅读笔记六——Java内存模型详解（二）

    承接上文:云时代架构阅读笔记五——Java内存模型详解(一) 原子性.可见性.有序性 Java内存模型围绕着并发过程中如何处理原子性.可见性和有序性这三个特征来建立的,来逐个看一下: 1.原子性(At ...

  7. 系统批量运维管理器Fabric详解

    系统批量运维管理器Fabric详解 Fabrici 是基于python现实的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包 ...

  8. GridBagLayout布局管理器应用详解

    http://www.cnblogs.com/kungfupanda/p/7220217.html GridBagLayout布局管理器应用详解 很多情况下,我们已经不需要通过编写代码来实现一个应用程 ...

  9. Android进阶笔记：Messenger源码详解

    Messenger可以理解为一个是用于发送消息的一个类用法也很多,这里主要分析一下再跨进程的情况下Messenger的实现流程与源码分析.相信结合前面两篇关于aidl解析文章能够更好的对aidl有一个 ...

随机推荐

  1. 【2017 Multi-University Training Contest - Team 6】Kirinriki

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6103 [题意] 给出一串字符串,从中选出两个不重叠的字符串,使得两个字符串的距离和 <= m 的最 ...

  2. 洛谷 P2692 覆盖

    P2692 覆盖 题目背景 WSR的学校有B个男生和G个女生都来到一个巨大的操场上扫地. 题目描述 操场可以看成是N 行M 列的方格矩阵,如下图(1)是一个4 行5 列的方格矩阵.每个男生负责打扫一些 ...

  3. ORA-01078错误举例：SID的大写和小写错误

    案例重演: dbca建库.SID:metro    --手工建库时实例名小写的metro ...... [oracle@org54 ~]$ export ORACLE_SID=METRO        ...

  4. Google Web Toolkit(GWT) 在windows下环境搭建

    1.什么是GWT? Google Web Toolkit(简称GWT,读作/ˈɡwɪt/),是一个前端使用JavaScript,后端使用Java的AJAX framework,以Apache许可证2. ...

  5. 看好腾讯，鄙视百度（腾讯的核心竞争力，不是超过10亿的QQ的注册用户，也不是某一项产品、技术方面优势，而是“耐心”：懂得在合适的时间推出合适的产品。”）

    百度,自始至终只是一个低劣的模仿者,且一切向前看,完全违背了一个搜索引擎所应该遵循的基本原则.谁给的钱多就能搜着谁,这跟贩毒有什么区别? 腾讯也在模仿别人,但是,它是模仿然后超越.在中国互联网发展历史 ...

  6. amaze样例页面分析（一）

    amaze样例页面分析(一) 一.总结 1.从审查(inspect)中是很清楚的可以弄清楚这些part之间的结构关系的 2.一者在于弄清楚他们之间的结构关系,二者在于知道结构的每一部分是干嘛的 3.i ...

  7. JQuery map()函数

    DOM.map(callback(index,domElement)); 对匹配元素执行函数对象. 返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组. 返回数据类 ...

  8. Docker---(7)Docker安装启动RabbitMQ

    原文:Docker---(7)Docker安装启动RabbitMQ 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/ ...

  9. 【例题 7-6 UVA - 140】Bandwidth

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力做就好. O(8!*26^2) [代码] /* 1.Shoud it use long long ? 2.Have you ev ...

  10. ajax上传进度条

    <script type="text/javascript"> function register(){ var frm = document.getElementBy ...