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. Vue render: h => h(App) $mount

    $mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...

  2. 斜率优化dp练习

    1.HDU3507 裸题,有助于理解斜率优化的精髓. dp[i]=min(dp[j]+m+(sum[i]-sum[j])2) 很显然不是单调队列. 根据斜率优化的的定义,就是先设两个决策j,k 什么时 ...

  3. 记2018/5/5 qbxt 测试

    记2018/5/5 qbxt 测试 竞赛时间: 2018 年 5 月 5 日 13:30-17:00 T1 一.maze(1s,512MB): 简单的迷宫问题:给定一个n*m的迷宫,.表示可以通过,# ...

  4. Python 极简教程（五）输入输出

    输入函数,用于接收键盘输入.主要用于在学习和练习过程中,增加练习的乐趣.让我们的程序相对完整和具备简单的交互能力. 输出函数,将代码运行结果打印在控制台上,同样也能让我们观察程序运行的结果.也是为了增 ...

  5. PatentTips - Method, apparatus and system for instructing a virtual device from a virtual machine

    BACKGROUND OF THE INVENTION A virtual machine (VM) may be or include a framework or environment crea ...

  6. 全然用linux工作，放弃windows

    按: 虽然我们已经不习惯看长篇大论, 但我还是要说, 这是一篇值得你从头读到尾的长篇文章. 2005年9月22日,清华在读博士生王垠在水木社区BLOG上发表了<清华梦的粉碎--写给清华大学的退学 ...

  7. winedt （latex 编译器）解决中文的问题（CJK & CTEX）

    主要是导入相关的库支持: 1. CJK \usepackage{CJK}:CJK,是中日韩的英文首字母的组合,处理中文需要先导入这个包: \begin{CJK*}{GBK}{song}:默认句式,表示 ...

  8. iOS_06_基本运算符

    一.算术运算 c语言一共有34种运算符,包括了常见的加减乘除 1.加法运算+ # 除了能做加法运算,还能表示正号:+5.+90 2.减法运算- # 除了能做减法运算,还能表示符号:-10.-200 3 ...

  9. net基础题

    1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private :   私有成员, 在类的内部才可以访问. protected : 保 ...

  10. GridView与ArrayAdapter的结合

    activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android ...