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. 玲珑杯 Round 19 A simple math problem

    Time Limit:2s Memory Limit:128MByte Submissions:1599Solved:270 DESCRIPTION You have a sequence anan, ...

  2. 洛谷——P1042 乒乓球

    https://www.luogu.org/problem/show?pid=1042 题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改 ...

  3. Spark MLlib LDA 源代码解析

    1.Spark MLlib LDA源代码解析 http://blog.csdn.net/sunbow0 Spark MLlib LDA 应该算是比較难理解的,当中涉及到大量的概率与统计的相关知识,并且 ...

  4. 不安装谷歌市场，下载谷歌市场中的APK

    不安装谷歌市场,下载谷歌市场中的APK GooglePlayStore 是谷歌官方的的应用市场,有的时候还是需要从谷歌市场下载APK文件.国内的安卓手机厂商都不自带GooglePlay,甚至一些手机& ...

  5. html中的瀑布流是什么

    html中的瀑布流是什么 一.总结 1.瀑布流: 从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大 2.看效果图 ...

  6. GO语言学习（十二）Go 语言函数

    Go 语言函数 函数是基本的代码块,用于执行一个任务. Go 语言最少有个 main() 函数. 你可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务. 函数声明告诉了编译器函数的名称,返回 ...

  7. 【CS Round #43 C】Rectangle Partition

    [链接]点击打开链接 [题意] 有一辆火车,它的长度为L,然后假设这辆车现在随机可能地出现在0..D之间,然后假设它已经耗光了油. 问你它需要走的期望距离是多少. 这里要走的距离指的是车里最近的加油站 ...

  8. SpringMVC-如何接收各种参数（普通参数，对象，JSON, URL）

    在交互的过程中,其中一个关键的节点就是获取到客户端发送过来的请求参数,本篇文章,我们来罗列下SpringMVC对于各种数据的获取方式: 说明:以下重点在讲解如何获取参数上,所以返回的数据不是重点 1, ...

  9. ZOJ 1242 Carbon Dating

    UVA昨天上不去,今天一大早起来还是上不去 0.0 于是去ZOJ 这题大意就是半衰期... 取对数用到了换底公式...我都忘了这玩意了T T 上代码... #include<iostream&g ...

  10. Oracle中暂时表空间的清理

    作者:iamlaosong Oracle暂时表空间主要用来做查询和存放一些缓冲区数据. 暂时表空间消耗的主要原因是须要对查询的中间结果进行排序.暂时表空间的主要作用: 索引create或rebuild ...