由获取子元素的方法find和children所获

html代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--http://localhost:8080/ssh_easyui/test/findAndChildern.html-->
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><script type="text/javascript" src="../js/easyui/jquery-1.8.0.min.js"></script><script type="text/javascript">function findTest() {var result = $("#tb>tbody").find("tr:eq(1)").find("td:eq(1)").html();console.info(result);var result2=$("#tb>tbody").find("td:eq(5)").html();console.info(result2);}function childrenTest() {var result2=$("#tb>tbody").children("tr:eq(1)").children("td:eq(1)").html();console.info(result2);}</script>
</head>
<body>
<table border="1" id="tb"><tr><td>编号</td><td>姓名</td><td>年龄</td><td>性别</td></tr><tr><td>1</td><td>诺伊</td><td>18</td><td>女</td></tr><tr><td>2</td><td>王点点</td><td>22</td><td>女</td></tr><tr><td colspan="2"><input type="button" onclick="findTest()" value="测试Find"></td><td colspan="2"><input type="button" onclick="childrenTest()" value="测试Children"></td></tr>
</table>
</body>
</html>

区别：

find检索范围是所选元素的所有后代元素（子代+子代的子代......），检索深度为N（N>0）

children检索范围仅仅是子代元素，检索深度为1。

其代码如下所示：

<script type = "text/javascript">
function findTest(){var result = $("#tb>tbody").find("tr:eq(1)").find("td:eq(1)").html();console.info(result);var result2 = $("#tb>tbody").find("td:eq(5)").html();console.info(result2);
}
function childrenTest(){var result2 = $("#tb>tbody").children("tr:eq(1)").children("td:eq(1)").html();console.info(result2);
}
</script>

输出均为：诺伊

总结：

1.find获取的是后台元素，children获取的是子代元素。
2.可以在selector中使用 :eq(index)这样的选择器进行元素选择，比起get(index)或者[index]的好处是后者还要转换成Jquery对象，利用:eq(index)选出来的就是Jquery对象了。
3. $("selector").html()和$("selector").val()区别是什么了？下个文章解释。

转载于:https://www.cnblogs.com/LiuChunfu/p/4933926.html

由获取子元素的方法find和children所获相关推荐

[转载] js 下获取子元素的方法 -- 李富生
地址:https://www.cnblogs.com/web-fusheng/p/6816440.html firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChi ...
js 下获取子元素的方法
笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...
获取子元素节点(children,childNodes)
在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...
jq 获取含类的子集_jquery获取子元素
Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...
jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
js父元素获取子元素img_JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
爬取的网页，获取子元素内容的方法
今天练习网络爬虫,爬取豆瓣电影Top 250,其中每部电影有排名.评分.电影名.导演等信息,分布在不同的标签下面,而每部电影的所有信息都在一个大的<div>标签下,因此需要获取子元素的内容 ...
jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...

由获取子元素的方法find和children所获

由获取子元素的方法find和children所获相关推荐

最新文章

热门文章