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()区别是什么了？下个文章解释。

由获取子元素的方法find和children所获的更多相关文章

  1. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  2. 获取子元素节点(children,childNodes)

    在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...

  3. jquery获取子元素

    Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...

  4. 原生js获取子元素

    感谢原文作者:归一山人 原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = d ...

  5. jQuery获取所有父级元素及同级元素及子元素的方法

    jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...

  6. WPF中ItemsControl应用虚拟化时找到子元素的方法

    原文:WPF中ItemsControl应用虚拟化时找到子元素的方法  wpf的虚拟化技术会使UI的控件只初始化看的到的子元素, 而不是所有子元素都被初始化,这样会提高UI性能. 但是我们经常会遇到一个 ...

  7. vue--父组件主动获取子组件的方法

    父组件主动获取子组件的方法和属性 第一步:调用自组件的时候,给自组建定义一个Header <v-header ref='headerInfo'></v-header> 第二步: ...

  8. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

  9. jQuery获取子元素个数的方法

    //获取id=div1下的子元素的个数 $('#id').children().length; //获取id=div1下的p元素个数 $('#id').children('p').length;

随机推荐

  1. 自动删除超过30天文件的vbs脚本【转发】

    利用代码制作自动删除超过30天的文件及文件夹的vbs脚本,定期清理文件夹中长时间无用文件. 1.首先在新建一个文本文档,粘贴代码(代码可通过添加微信公众号vbs_edit(VBS脚本之家)回复018获 ...

  2. 使用 Eclipse Memory Analyzer 进行简单内存泄漏分析

    Java 内存泄露的根本原因: 保存了不可能再被访问的变量类型的引用.因此我们的目的就是要找出这样的引用. 1.测试代码: public class MainActivity extends Acti ...

  3. winxp sp2

    不支持sha2,所以ssl建立失败, sp3就可以了 http://superuser.com/questions/802693/sha2-support-for-windows-xp-sp2-any ...

  4. linux sigaction信号处理

    sigaction函数相比signal函数更为复杂,但更具灵活性,下面具体介绍她的结构和用法: #include <signal.h> int sigaction(int signum, ...

  5. c printf()详解[转载]

    ref : http://www.cnblogs.com/yuaqua/archive/2011/10/21/2219856.html #include <cstdio> #include ...

  6. 【转】configure/make/make install的使用说明

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GCC ...

  7. HDU2050 由直线分割平面推广到折线分割平面

    直线分割平面问题: 加入已有n-1条直线,那么再增加一条直线,最多增加多少个平面? 为了使增加的平面尽可能的多,我们应该使新增加的直线与前n条直线相交,且不存在公共交点.那么我们可以将新增加的这条直线 ...

  8. Webkit之HTML解析

    加载部分HTML文本(即主资源)后便可以开始解析HTML元素(对输入字节流进行逐字扫描,识别HTML元素),最后生成DOM树,本文只讲HTML解析. HTML解析部分时序图: 其中最为重要的过程是(1 ...

  9. Learning Java characteristics (Java in a Nutshell 6th)

    Java characteristics: Java .class files are machine-independent, including the endianness. Java .cla ...

  10. ntp源码解读（一）

    /* * session_key - generate session key * * This routine generates a session key from the source add ...