jquery 中children、find区别

首先看一段HTML代码，如下：

 <table id="tb">

     <tr>

         <td>0</td>

         <td>1</td>

         <td>2</td>

     </tr>

     <tr>

         <td>3</td>

         <td>4</td>

         <td>5</td>

     </tr>

 </table>

如果要获取第一个tr里边的第二个td的值：

children:

$('#tb>tbody').children('tr:eq(0) td:eq(1)').html()

find:

$('#tb>tbody').find('tr:eq(0) td:eq(1)').html()

结果：

children获取的值为：undefined

find获取的值为：4

结论：

children()方法查找的是孩子。（仅儿子辈）。

find()方法查找的是子孙后代。

.find()方法要注意的知识点：

1、find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。

2、find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。

3、find只在后代中遍历，不包括自己。

解释：find只在后代中遍历，不包括自己：

 <body>

     <div class="css">

         <p class="rain">测试1</p>

     </div>

     <div class="rain">

         <p>测试2</p>

     </div>

 </body>

如果用find方法找到div里边含有rain的类：

$('div').find('.rain').css('color',"red");

结果：

结论：

上面例子中$（‘div’）包含两个元素，第一个元素符合要求，但第二个元素div本身的class虽然是“rain”,但其内部没有class=rain，所以不符合。

jquery 中后代遍历之children、find区别的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. jquery 中 html与text函数的区别

    jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...

  9. 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

随机推荐

  1. h5页面 内嵌h5页面遇到的问题

    1.input框无法获取焦点输入内容 input { -webkit-user-select: auto; } 2.div里面放img标签有3px的距离 div { font-size: 0; } i ...

  2. Js 编程题汇总

    Coding题: 1. 预测以下代码的输出结果: var Foo = function(a) { function bar() { console.log(a); }; this.baz = func ...

  3. Python全栈之路----函数----参数

    参数可以让你的函数更灵活,不只能做死的动作,还可以根据调用时传参的不同决定函数内部的执行流程. 形参:只有在被调用时才分配内存单元,在调用结束时,即可释放所分配的内存单元.因此形参只在函数内部有效.函 ...

  4. String类常用方法练习

    String 类代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 字符串是常量:它们的值在创建之后不能更改.字符串缓冲区支持可变的字符串. ...

  5. hdu 2095 find your present (2) 位运算

    题意:找出现次数为奇数的数 xor运算 #include <cstdio> #include <iostream> #include <algorithm> usi ...

  6. phpmyadmin nginx设置

    1,解压缩phpmyadmin4.2.8压缩包到/usr/local/phpMyAdmin 2,复制config.sample.inc.php为config.inc.php 3,修改nginx.con ...

  7. Sublime远程连接Linux

      1:Ctrl+Shift+P,输入install 选择红框框然后Enter       2:输入ftp,然后找到sftp,Enter       3:修改配置     修改账号密码信息远程路径之后 ...

  8. 用C自撸apache简易模块，搭建图片处理服务器。

    写C是个撸sir /* ** mod_acthumb.c -- Apache sample acthumb module ** [Autogenerated via ``apxs -n acthumb ...

  9. python eval()和exec()以及complie()

    1.eval() 函数 eval() 函数用来执行一个字符串表达式,并返回表达式的值. ------->>  eval(expression[, globals[, locals]]) 参 ...

  10. WPF Chart

    https://quant.stackexchange.com/questions/7065/how-to-create-charts-in-wpf-finance-applications