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(1) td:eq(1)").html()

Find    ：


代码如下:

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

结果，通过children获取的值为：null,而通过find获取的值为：4 这是为什么呢？

查了一下资料，通过children获取的是该元素的下级元素，而通过find获取的是该元素的下级所有元素。

这时回到上面，我们可以得出，$("#tb>tbody").children() 获取的是两个tr元素（不包括它们子元素td），

而children里面的选择器则是在获取的两个tr元素里再根据条件进行筛选，所以上面那种写法获取不到值。

如果一定用children我们可以这样写：


代码如下:

$("#tb>tbody").children("tr:last").children("td:eq(1)").html()

赞 (0)

相关推荐

  • 基于jquery中children()与find()的区别介绍

    基于jquery中children()与find()的区别介绍

    .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元素集合中每个元素的后代.参数是必选的,可以为选择器.jquery对象可元素来对元素进行筛选. .find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级.这里的children,我理解为儿子,只在儿子这一级遍历.看下例子: 复制代码 代码如下: .chi

  • jQuery find和children方法使用

    需要查找一个对象内包含的某个子对象. 为了避免和美工冲突,对特定操作对象加上id标识,美工不大改也没什么问题. 1.children("condition") 获取的是一级子元素. 2.find("condition")获取包含的所有子元素.

  • 谈谈Jquery中的children find 的区别有哪些

    精华:find方法能找子孙,children方法只能找儿子 一.Jquery中children 语法 .children(selector) 说明 expr是表达式,可选参数,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象. 二.Jquery中find find() 方法获得当前元素集合中每个元素的后代,通过选择器

  • jQuery初学:find()方法及children方法的区别分析

    jQuery初学:find()方法及children方法的区别分析

    首先看看英文解释吧: children方法:find方法:通过以上的解释,可以总结如下: 1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样. 2:children方法获得的仅仅是元素一下级的子元素,即:immediate children. 3:find方法获得所有下级元素,即:descendants of these elements in the DOM tree 4:children方

  • Jquery中children与find之间的区别详细解析

    首先看一段HTML代码,如下: 复制代码 代码如下: <table id="tb">            <tr>                <td>0</td>                <td>1</td>                <td>2</td>            </tr>            <tr>               

  • Jquery AJAX POST与GET之间的区别详细介绍

    1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个原则 2:一.谈Ajax的Get和Post的区

  • 引用 js在IE与FF之间的区别详细解析

    js调试工具推荐firefox的firebug插件 能够给js设置断点执行 能够运行时修改css样式 查看dom模型等 ☆IE8自带的developerbar也很不错 ☆打开firefox所有js警告:在地址栏里录入:about:config双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错 ☆IE->firefoxjavascript类 △document.all("id")->document.getElementById(

  • jQuery中text() val()和html()的区别实例详解

    jQuery中text() val()和html()的区别实例详解

    简单的说:html()和text()的区别主要在于是否包含标签.而val()针对的是表单元素. 但是有时还是不是那么太清晰. html(),val(),text()都分为有参和无参. 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容.必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素. 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用.</p> <h3>选中下

  • jQuery中children()方法用法实例

    本文实例讲述了jQuery中children()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得一个包含匹配元素集合中每一个元素的所有子元素的元素集合. 可以通过可选的表达式来过滤所匹配的子元素. 注意:find()将查找所所有子元素,而children()只获取一级子元素. 语法结构: 复制代码 代码如下: $(selector).children(expr) 参数列表: 参数 描述 expr 可选.用以过滤子元素的表达式 实例代码: 实例一: 复制代码 代码如下: <!DOCTYP

  • jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍

    insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

  • jquery中live()方法和bind()方法区别分析

    本文实例讲述了jquery中live()方法和bind()方法区别.分享给大家供大家参考,具体如下: live()不受加载时间顺序的影响,只要查找能够配对上就能够绑定对应的事件,而bind方法只有在第一次被加载的时候才绑定时间,如果代码之后再加载配对的元素,则不能绑定对应的事件 $("#manual_disconnect").live("click", function(){ connectionProfile("0"); }); $("

  • jquery中attr、prop、data区别与用法分析

    本文实例讲述了jquery中attr.prop.data区别与用法.分享给大家供大家参考,具体如下: 在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. .data()看作是存取data-xxx这样DOM附加信息的方法 上面的描述也许有点模糊,举几个例子就知道了. <a href="h

  • jQuery中event.target和this的区别详解

    this和event.target的区别: 1.js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远指向触发事件的DOM元素本身: 2.this和event.target都是dom对象,使用jQuey中的方法可以将他们转换为jquery对象:$(this)和$(event.target). 比如,一个很简单的例子. $(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成橙色, 但其外围的大方框不会变色, 即没有触发事件的冒

  • java 抽象类和接口的区别详细解析

    abstractclass和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力.abstractclass和interface之间在对于抽象类定义的支持方面具有很大的相似性,甚至可以相互替换,因此很多开发者在进行抽象类定义时对于abstractclass和interface的选择显得比较随意.其实,两者之间还是有很大的区别的,对于它们的选择甚至反映出对于问题领域本质的理解.对于设计意图的理解是否正确.合理.本文将对它们

随机推荐