由获取子元素的方法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()区别是什么了？下个文章解释。

 

posted @ 2015-11-03 17:58  LiuChunfu  阅读(1139)  评论(0)  编辑  收藏  举报