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. 相对路径 System.Web HttpServerUtilityBase Server.MapPath("~/")

    相对路径 System.Web  HttpServerUtilityBase  Server.MapPath("~/")

  2. Manning.EJB.3.in.Action.2nd.Edition

    Manning.EJB.3.in.Action.2nd.Edition http://files.cnblogs.com/files/rojas/EJB_3_in_Action_2nd_Edition ...

  3. Quartz学习总结（1）——Spring集成Quartz框架

    一.Quartz简介 Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简 ...

  4. 栅格数据AE

    转自原文 栅格数据AE 两个星期以来一直与栅格数据打交道,对AO的栅格部分应该有了一定的理解,下面是自己的一点体会,希望高手指教:-) 1.栅格数据的存储类型 栅格数据一般可以存储为ESRI GRID ...

  5. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  6. [JWT] JWT Signature With RS256 - Learn The Advantages Compared to HS256

    The advantage of RS256 over HS256 is RS256 no longer need to share the secret key between client and ...

  7. RocketMQ(八)：消息发送

    匠心零度 转载请注明原创出处,谢谢! RocketMQ网络部署图 NameServer:在系统中是做命名服务,更新和发现 broker服务. Broker-Master:broker 消息主机服务器. ...

  8. spring 通过编程来获取属性文件

    配置可以读取属性: <beans profile="dev"> <context:property-placeholder ignore-resource-not ...

  9. 【河南省多校脸萌第六场 A】分班级

    [链接]点击打开链接 [题意] 在这里写题意 [题解] 最大的给了最小的,实际上就对应了,最大值减1,最小值加1. 那么二分最后班级人数最小的最大可能是几->temp1; 二分最后班级人数最大的 ...

  10. 不在JPA 的 persistence.xml 文件中配置Entity class的解决办法

    在Spring 集成 Hibernate 的JPA方式中,需要在persistence配置文件中定义每一个实体类,这样非常地不方便,2种方法可以解决此问题: 这2种方式都可以实现不用在persiste ...