jQuery常用的查找Dom元素方法

废话不多说，先来个总结，然后下面是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"]}//测试Childrenfunction testChildren() {var $result = $(".level1").children("span");console.info(getTagsInfo($result));//结果是：["SPAN#t3", "SPAN#t4", "SPAN#t11", "SPAN#t12"]}//测试Findfunction 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"]}//输出匹配到的元素的idfunction getTagsInfo($doms) {return $doms.map(function () {return this.nodeName + "#" + this.id;}).get();}</script>

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

Doing is better than nothing

jQuery常用的查找Dom元素方法相关推荐

jquery学习之-查找父元素方法parent() parents() closest()的区别
parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本篇内容,大家将会在以后使用.parent().parents()和closest ...
027_jQuery DOM 元素方法
1. get()方法 1.1. 语法 $(selector).get(index) 1.2. 参数 1.3. jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合.这是取得所有匹配元 ...
Jsoup（二）-- Jsoup查找DOM元素
一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询 ...
可折叠的html元素,jQuery炫酷HTML DOM元素纸张3D折叠特效
oriDomi是一款非常神奇的jQuery炫酷HTML DOM元素纸张折叠特效.oriDomi能够将HTML DOM元素转换为纸张状态,你可以用鼠标来任意折叠它们.oriDomi可以折叠的不仅是静态图 ...
jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...
获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
Jsoup（三）-- Jsoup使用选择器语法查找DOM元素
1.Jsoup可以使用类似于CSS或jQuery的语法来查找和操作元素. 2.实例如下: public static void main(String[] args) throws Exception ...
Jquery的动态创建DOM元素
jquery动态创建页面元素,mark一下,以备以后查询时使用.以创建div和input为例. 动态创建div: $(function(){ $("<div>",{ i ...
JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...

jQuery常用的查找Dom元素方法

jQuery常用的查找Dom元素方法

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

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

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

四. demo

jQuery常用的查找Dom元素方法相关推荐

最新文章

热门文章