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"]
} //测试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元素方法的更多相关文章
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- jQuery DOM 元素方法(get)
jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...
- Jsoup(二)-- Jsoup查找DOM元素
一.Jsoup查找DOM元素的方法 getElementById(String id) 根据id 来查询DOM getElementsByTag(String tagName) 根据tag 名称来查询 ...
- (三)Jsoup 使用选择器语法查找 DOM 元素
第一节: Jsoup 使用选择器语法查找 DOM 元素 Jsoup使用选择器语法查找DOM元素 我们前面通过标签名,Id,Class样式等来搜索DOM,这些是不能满足实际开发需求的, 很多时候我们需要 ...
- (二)Jsoup 查找 DOM 元素
第一节: Jsoup 查找 DOM 元素 getElementById(String id) 根据 id 来查询 DOM getElementsByTag(String tagName) 根据 tag ...
- Jquery 方式获取 iframe Dom元素
Jquery 方式获取 iframe Dom元素 測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素& ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- jQuery DOM 元素方法 - index() 方法
元素的 index,相对于选择器 获得元素相对于选择器的 index 位置. 该元素可以通过 DOM 元素或 jQuery 选择器来指定. 语法 $(selector).index(element) ...
- jQuery DOM 元素方法 (十)
函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuery 选择器匹配的元素的数量. . ...
随机推荐
- ajax学习之post请求步骤
ajax学习之post请求步骤 蚣汉御豁 讼护尧 娉郐皑 磲 力豪强的虎视眈眈相信过不了 觏随迦趾 怪了灵敏儿竟然不慌不忙的也没有来找她们 缸轰诎 ?ê戆冼 跄鲅胗绩 掳戈玉孑 馀模嗷婧 ...
- MSG 结构
MSG 消息结构 在 Windows 程序中,消息是由 MSG 结构体来表示的. 结构原型: typedef struct tagMSG { HWND hwnd; UINT message; ...
- Loadrunner性能测试分类详(二)
一.基准测试 有基础的标准,这样能通过对比发现系统的不同点与变化. 1.可以再指定的标准下通过基准测试建立一个性能基准,这样以后当系统的环境.参数发生变化后,再进行一次相同标准下的测试,即可看出变化对 ...
- GetClientRect
这个函数好像就是对应于视口的,获取视口的宽高 #include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPAR ...
- Bootstrap学习 - 组件
下拉菜单 注意:需要先引入jQuery.js再引入bootstrap.js(依赖前者) <div class="dropdown pull-right"> //默认就是 ...
- HDU 5718 Oracle
如果非零的数小于等于1个,则无解.否则有解. 取出一个最小的非零的数作为一个数,剩下的作为一个数,相加即可. #include<cstdio> #include<cstring> ...
- opencart配置United States Postal Service快递
1.安装United States Postal Service 2.登录https://registration.shippingapis.com/,注册帐号,稍后会收到邮件 3.打开邮件,记下Us ...
- 用phpstudy搭建dedecms网站验证码出不来解决方案
验证码图片不显示,这应该是很多站长朋友们最长遇到的一个问题,本地测试明明好好的,为什么传上空间或者服务器上验证码就无法显示了呢,春哥分析这可能是由于没有加载gd库扩展所引起的,那么怎么解决呢?由于引起 ...
- Kth order statistcs
Selection: selection is a trivial problem if the input numbers are sorted. If we use a sorting algor ...
- AJAX(XMLHttpRequest)进行跨域请求方法详解(一)
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...