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. POJ 1118 Lining Up 直线穿过最多的点数

    http://poj.org/problem?id=1118 直接枚举O(n^3) 1500ms能过...数据太水了...这个代码就不贴了... 斜率排序O(n^2logn)是更好的做法...枚举斜率 ...

  2. HDU 1007 Quoit Design 平面内最近点对

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 上半年在人人上看到过这个题,当时就知道用分治但是没有仔细想... 今年多校又出了这个...于是学习了一下平 ...

  3. Vue 学习记录<1>

    1.环境搭建:(前提node.js搭建) # 全局安装 vue-cli $ npm install --global vue-cli   # 创建一个基于 webpack 模板的新项目 $ vue i ...

  4. 文字记录而已！！人民币直充/兑换PayPal美金

    人民币直充/兑换PayPal美金 用PAYPAL国际使用外国货币,没有信用卡是不能冲值的,到淘宝买吧,被骗的几率大一些,弄来弄去,PAYPAL被冻结. 今天朋友介绍使用 中美互动网 让它给自己的PAY ...

  5. HTML的SEO（搜索引擎优化）标准

    HTML的SEO(搜索引擎优化)标准 一.总结 这个做seo的时候要多看,做网站优化的时候 1. SEO(搜索引擎优化):通过总结搜索引擎的排名规律,对网站进行合理优化,使你的网站在百度和Google ...

  6. 学习活动管理系统：LAMS

    学习活动管理系统:LAMS 一.总结 基于java的cms 二.LAMS Learning Activity Management System,学习活动管理系统. 数字化学习已经具有完整的发展方法来 ...

  7. Redis-消费模式

    一 . 两种模式简介 发布消息通常有两种模式:队列模式(queuing)和发布订阅模式(qublish-subscribe).队列模式中,consumers可以同时从服务端读取消息,每个消息纸杯其中一 ...

  8. 洛谷——U10206 Cx的治疗

    https://www.luogu.org/problem/show?pid=U10206 题目背景 「Cx的故事」众所周知,Cx是一个宇宙大犇.由于Cx在空中花园失足摔下,导致他那蕴含着无穷智慧的大 ...

  9. j2ee,jsp,servlet文件下载server端

    1.getOutputStream() has already been called for this response 报错的原因: 使用tomcat容器调用response.getOutputS ...

  10. jquery设置attr属性值

    1.返回属性值 $(selector).attr(attribute); 2.设置属性值 $(selector).attr(attribute,value); 3.设置多个属性值 $(selector ...