废话不多说，先来个总结，然后下面是demo

一. 同级节点之间的检索(检索深度N=0)

next()是在兄弟节点中，往后匹配;

prev()是在兄弟节点中，往前匹配。

二. 父级/子级节点的检索(检索深度N=1)

children()是在子节点中，往后匹配。

parent()是在父节点中，往前匹配。

ps：请注意了---子节点和父节点都是相邻的，深度为1的节点，也就是标题提到的检索深度为1

三. 后代节点的检索（检索深度N>=1）

find()检索的是子代元素和后代元素，不会检索兄弟节点。

parents() 检索的是祖辈元素(包括父元素)的集合。

closest()检索的是最近的祖辈元素(一个)

ps：当往上级检索节点的时候，推荐使用closet，效率更高!

四. demo

HTML代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

</head>

<body>

<div class="out" id="t1">

    <div class="level1" id="t2">

        <span class="title1" id="t3"></span><span class="title2" id="t4"></span>

    </div>

    <ul class="menu" id="t6">

        <li class="item1" id="t7"></li>

        <span class="item2" id="t8"></span>

        <li class="item3" id="t9"></li>

    </ul>

    <div class="level1" id="t10">

        <span class="title1" id="t11"></span><span class="title2" id="t12"></span>

    </div>

    <ul class="menu" id="t14">

        <span class="item1" id="t15"></span>

        <li class="item2" id="t16"></li>

        <span class="item3" id="t17"></span>

    </ul>

</div>

</body>

</html>

JS测试代码如下：

    <script type="text/javascript" src="../js/lib/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">

        $(function () {

            testNext();

            testChildren();

            testFind();

            testPre();

            testParent();

        });

        //测试next。

        function testNext() {

            var $result = $(".level1").next("ul");

            console.info(getTagsInfo($result)); //结果是：["UL#t6", "UL#t14"]

        }

        //测试Children

        function testChildren() {

            var $result = $(".level1").children("span");

            console.info(getTagsInfo($result));//结果是：["SPAN#t3", "SPAN#t4", "SPAN#t11", "SPAN#t12"]

        }

        //测试Find

        function testFind() {

            var $result = $(".out").find("span");

            console.info(getTagsInfo($result));//结果是： ["SPAN#t3", "SPAN#t4", "SPAN#t8", "SPAN#t11", "SPAN#t12", "SPAN#t15", "SPAN#t17"]

        }

        //pre是next的方面，检索的是同级元素。

        function testPre() {

            var $result = $("#t12").prev("span");

            console.info(getTagsInfo($result));//结果是：["SPAN#t11"]

        }

        //parent是和children相对的，检索的上一级别的父元素

        function testParent() {

            var $result = $(".title1").parent("div");

            console.info(getTagsInfo($result));//结果是：["DIV#t2", "DIV#t10"]

        }

        //输出匹配到的元素的id

        function getTagsInfo($doms) {

            return $doms.map(function () {

                return this.nodeName + "#" + this.id;

            }).get();

        }

    </script>

相关源代码：http://yunpan.cn/c3eL2PdJiqMZ3  访问密码 47eb

jQuery常用的查找Dom元素方法的更多相关文章

  1. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  2. jQuery DOM 元素方法（get）

    jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...

  3. Jsoup（二）-- Jsoup查找DOM元素

    一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询 ...

  4. （三）Jsoup 使用选择器语法查找 DOM 元素

    第一节: Jsoup 使用选择器语法查找 DOM 元素 Jsoup使用选择器语法查找DOM元素 我们前面通过标签名,Id,Class样式等来搜索DOM,这些是不能满足实际开发需求的, 很多时候我们需要 ...

  5. （二）Jsoup 查找 DOM 元素

    第一节: Jsoup 查找 DOM 元素 getElementById(String id) 根据 id 来查询 DOM getElementsByTag(String tagName) 根据 tag ...

  6. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  7. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  8. jQuery DOM 元素方法 - index() 方法

    元素的 index,相对于选择器 获得元素相对于选择器的 index 位置. 该元素可以通过 DOM 元素或 jQuery 选择器来指定. 语法 $(selector).index(element) ...

  9. jQuery DOM 元素方法 （十）

    函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuery 选择器匹配的元素的数量. . ...

随机推荐

  1. MySQL-测试卷一

    MySQL-测试卷一 一.单项选择题 1 下面不属于Msql数据库特点的是(  ) A. 免费使用  B.不能跨平台  C.开源软件  D.功能强大 2 定义表的一个字段, 要求能表示4位整数,2位小 ...

  2. TP4056大电流1A使用注意事项

    源:TP4056大电流1A使用注意事项 TP4056为南京拓微集成电路有限公司推出的锂电池充电产品系列中的大电流充电产品.具有最大电流1A,峰值电流1.1A,良好环境下甚至峰值1.2A的单节锂离子电池 ...

  3. 转：SSH原理与运用（二）：远程操作与端口转发

    作者:阮一峰 (Image credit: Tony Narlock) 七.远程操作 SSH不仅可以用于远程主机登录,还可以直接在远程主机上执行操作. 上一节的操作,就是一个例子: $ ssh use ...

  4. String.Format(string, arg0)中sring格式

    复合格式字符串和对象列表将用作支持复合格式设置功能的方法的参数.复合格式字符串由零个或多个固定文本段与一个或多个格式项混和组成.固定文本是所选择的任何字符串,并且每个格式项对应于列表中的一个对象或装箱 ...

  5. 689D Friends and Subsequences RMQ+二分

    题目大意:给出两个数组,求第一个数组区间内的最大值和第二个区间内的最小值相同的区间有多少种. 题目思路:通过预处理(O(n*Logn))后,每次查询的时间复杂度为O(1),但是如果暴力查询O(n*n) ...

  6. Android上掌纹识别第一步：基于OpenCV的6种肤色分割 源码和效果图

    Android上掌纹识别第一步:基于OpenCV的6种肤色分割 源码和效果图 分类: OpenCV图像处理2013-02-21 21:35 6459人阅读 评论(8) 收藏 举报   原文链接  ht ...

  7. JS-运动基础（一）

    <title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red; posit ...

  8. 使用U盘在Mac机上装win8.1系统

    1.首先要准备一个8G的U盘,用苹果机格式化为FAT格式.注意:U盘格式化之前要对U盘里的文件备份,U盘格式化后,里边的内容会清空. 2.下载原版win8.1系统,不要下载ghost版,http:// ...

  9. hdu 1001 二叉树搜索

    Problem Description 判断两序列是否为同一二叉搜索树序列 Input 开始一个数n,(1<=n<=20) 表示有n个需要判断,n= 0 的时候输入结束.接下去一行是一个序 ...

  10. IDL实现 Modis经纬度查询、迅雷下载

    转载请注明原文地址 本文纯属交流学习,请勿用作其他用途.匿名登录ModisFTP站点可能导致侵权,所造成的一切法律后果,本人概不负责. 一 介绍 Modis免费分发,光谱通道丰富,产品体系成熟,在多个 ...