您的位置：首页 > Web前端 > JQuery

jQuery常用的查找Dom元素方法

2015-12-13 15:17 597 查看

废话不多说，先来个总结，然后下面是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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航