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


Posted in Javascript onNovember 29, 2013

首先看一段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()
Javascript 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 #Javascript
JS Loading功能的简单实现
Nov 29 #Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 #Javascript
浅析JavaScript中的类型和对象
Nov 29 #Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 #Javascript
转换字符串为json对象的方法详解
Nov 29 #Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
vue cli 全面解析
2018/02/28 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
世界上最大的二手相机店:KEN
2017/05/17 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
啤酒节策划方案
2014/05/28 职场文书
社区维稳工作方案
2014/06/06 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
公司岗位说明书
2015/10/08 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS