<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

<body>

<ul class="level-1">

  <li class="item-i">I</li>

  <li class="item-ii">II

    <ul class="level-2">

      <li class="item-a">A</li>

      <li class="item-b">B

        <ul class="level-3">

          <li class="item-1">1</li>

          <li class="item-2">2</li>

          <li class="item-3">3</li>

        </ul>

      </li>

      <li class="item-c">C</li>

    </ul>

  </li>

  <li class="item-iii">III</li>

</ul>

<script>$('ul.level-2').children().eq(2).css('background-color', 'red');</script>

</body>

</html>

解释：children() 是儿子节点，与孙子节点是无关的。

结果如图：

children() 和find() 的区别。

如果是find()，eq(2)会把 整个的 第二个li 给算上。find() 会把孙子节点也算上。

<!DOCTYPE html>

<html>

<head>

  <script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

<body>

<ul class="level-1">

  <li class="item-i">I</li>

  <li class="item-ii">II

    <ul class="level-2">

      <li class="item-a">A</li>

      <li class="item-b">B

        <ul class="level-3">

          <li class="item-1">1</li>

          <li class="item-2">2</li>

          <li class="item-3">3</li>

        </ul>

      </li>

      <li class="item-c">C</li>

    </ul>

  </li>

  <li class="item-iii">III</li>

</ul>

<script>

$('li.item-ii').find('li').eq(2).css('background-color', 'red');

</script>

</body>

</html>

结果如下：

jQuery 中的children()和 find() 的区别的更多相关文章

  1. jquery中的children()和contents()的区别

    1.children()只会返回元素节点 2.contents()还可以返回文本节点

  2. jquery遍历之children()与find()的区别

    hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元 ...

  3. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  4. 深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...

  5. jQuery中attr和prop方法的区别说明

    jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check  node=123 id=ck & ...

  6. jquery中的$().each和$.each的区别

    jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...

  7. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  8. jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

  9. jquery中this与$(this)的用法区别

    jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...

随机推荐

  1. Linux和Windows远程桌面互连

    1.Ubuntu 连 windows    W.1 Windows设置允许远程桌面连接    U.1 Ubuntu设置 apt-get install rdesktop    U.2 Ubuntu连接 ...

  2. Linux sar分析网卡流量

    yum install sysstat    sar -n { DEV | EDEV | NFS | NFSD | SOCK | ALL }    sar 提供六种不同的语法选项来显示网络信息.-n选 ...

  3. JavaEE基础（七）

    1.面向对象(构造方法Constructor概述和格式) A:构造方法概述和作用 给对象的数据(属性)进行初始化 B:构造方法格式特点 a:方法名与类名相同(大小也要与类名一致) b:没有返回值类型, ...

  4. Linux下Date命令的用法

    转自http://blog.chinaunix.net/uid-8223172-id-2511672.html linux下date的用法比较复杂,但是也用的比较多,尤其是shell里面.现总结一下自 ...

  5. 收藏的Android非常好用的组件或者框架。

    博客分类: android android框架 先说两个网站: http://www.androidviews.net/ http://www.theultimateandroidlibrary.co ...

  6. 理解 Android Build 系统

    在配置了以上的文件之后,便可以编译出我们新添加的设备的系统镜像了. 首先,调用“source build/envsetup.sh”该命令的输出中会看到 Build 系统已经引入了刚刚添加的 vendo ...

  7. Spring AOP：面向切面编程，AspectJ，是基于spring 的xml文件的方法

    导包等不在赘述: 建立一个接口:ArithmeticCalculator,没有实例化的方法: package com.atguigu.spring.aop.impl.panpan; public in ...

  8. android的基础入门

        一.   A通信技术   1. 1G  仅限语音的蜂窝式通话标准 2. 2G  (时分多路复用)数字语音传输技术和增加接收数据的功能 3. 3G  传输声音和数据的速度有很大的 提升 4. 4 ...

  9. Paths on a Grid(简单组合数学)

    Paths on a Grid Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 23008 Accepted: 5683 Desc ...

  10. 记一次SortedDictionary的不当使用

    起初想用SortedDictionary做游戏中的排行榜,代码如下: using UnityEngine; using System; using System.Collections; using ...