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()区别是什么了？下个文章解释。
时间： 2024-10-07 07:12:57