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()区别是什么了?下个文章解释。
05-11 10:54
查看更多