3.3.2 仿DOM导航查找的相关方法
在DOM模型中,可以利用节点之间的父子关系进行导航,通过这种导航关系可以找到当前节点的兄弟节点、父节点和子节点等。DOM模型的导航关系虽然简单明了,但用起来依然比较烦琐,jQuery进一步简化了这种导航关系。在jQuery中可以利用如下方法找到当前jQuery对象(可能包含一个或多个DOM对象)的兄弟节点、父节点、子节点对应的jQuery对象。
获取距离最近元素
| 方法 |
描述 |
closest(selector或者jQuery或者element) |
查找距离当前jQuery对象最近且符合传入参数的元素。该方法的参数既可以是任何合法的选择器,也可以是原生的DOM 元素,还可以是另一个jQuery对象。该方法返回由符合条件的DOM元素包装成的jQuery对象。 |
最近的可定位的元素
| 方法 |
描述 |
offsetParent() |
查找当前jQuery对象的最近且能定位(如CSS样式中position属性值为relative 或absolute 的元素)的祖先元素。返回由符合条件的DOM 元素包装成的jQuery对象。 |
获取DOM内的内容
| 方法 |
描述 |
contents() |
查找当前jQuery对象包含的DOM对象内的全部内容,包括DOM元素和文本。如果jQuery包装的DOM元素是<iframe>,则获取该iframe所装载的文档的内容。 |
获取后代元素
| 方法 |
描述 |
find(selector或者element或者jQuery) |
查找当前jQuery对象包含的DOM对象内能**匹配传入参数的所有后代元素**。该方法的参数既可是任何合法的选择器,也可是原生的DOM元素,还可是另一个jQuery对象。返回由符合条件的DOM元素包装成的jQuery对象。 |
获取全部后代元素
| 方法 |
描述 |
children([selector]) |
查找当前jQuery对象包含的DOM对象内的全部后代元素。如果指定了selector 选择器,则只查找匹配selector 选择器的后代元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
获取父元素
| 方法 |
描述 |
parent([selector]) |
查找当前jQuery对象包含的DOM对象的父元素。如果指定了selector选择器,则该父元素还必须匹配selector选择器。返回由符合条件的DOM元素包装成的jQuery对象。 |
获取祖先元素
| 方法 |
描述 |
parents([selector]) |
查找当前jQuery对象包含的DOM对象的所有祖先元素。如果指定了selector选择器,则只找出匹配selector的祖先元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
parentsUntil([selector或者element] [,filter]) |
查找当前jQuery对象(实际是该对象包含的DOM对象)中匹配selector的元素或element元素的所有祖先元素。如果指定了filter选择器,则只找出匹配filter的祖先元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
获取前面的兄弟元素
| 方法 |
描述 |
prev([selector]) |
查找紧邻当前jQuery对象对象包含的DOM对象之前的元素。如果指定了selector 选择器,则该元素必须匹配selector 选择器。返回由符合条件的DOM元素包装成的jQuery对象。 |
prevAll([selector]) |
查找当前jQuery对象包含的DOM对象之前的所有兄弟元素。如果指定了selector选择器,则只找出匹配selector选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
prevUntil([selector或者element] [,filter]) |
查找当前jQuery对象包含的DOM对象**之前匹配selector的元素或element元素之后的所有兄弟元素**。如果指定了filter选择器,则只找出匹配filter选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
获取后面的兄弟元素
| 方法 |
描述 |
next([selector]) |
查找紧跟当前jQuery对象包含的DOM对象**之后的元素**。如果指定了selector选择器,则该元素必须匹配selector选择器。返回由符合条件的DOM元素包装成的jQuery对象。 |
nextAll([selector]) |
查找当前jQuery对象包含的DOM对象**之后的所有兄弟元素**。如果指定了selector 选择器,则只找出匹配selector 选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
nextUntil([selector或者element] [,filter]) |
查找当前jQuery对象包含的DOM对象**之后匹配selector的元素或element元素之前的所有兄弟元素**。如果指定了filter选择器,则只找出匹配filter选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
获取所有的兄弟元素
| 方法 |
描述 |
siblings([selector]) |
查找当前jQuery对象包含的DOM 对象前后的所有兄弟元素。如果指定了selector选择器,则只找出匹配selector选择器的兄弟元素。返回由符合条件的DOM元素包装成的jQuery对象。 |
提示:siblings([selector])方法返回的结果相当于prevAll([selector])和nextAll([selector])方法返回结果的总和。
程序示例
下面的程序示范了上面这些DOM导航相关方法的用法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 操作类数组的工具方法 </title>
</head>
<body>
<div>
<div id="java">疯狂Java讲义</div>
<div id="javaee">轻量级Java EE企业应用实战</div>
<div id="ajax">疯狂前端开发讲义</div>
<div id="xml">疯狂XML讲义</div>
<div id="ejb">经典Java EE企业应用实战</div>
<div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js">
</script>
<script type="text/javascript">
$("body>div").contents().css("background-color", "#ddd");
$("#ajax").next().css("border", "2px dotted black");
$("#ajax").nextUntil("#android").css("font-size", "20pt");
$("#ajax").prev().css("border", "2px solid black");
$("#ajax").prevUntil("#java").height(50);
$("#ajax").siblings("#java")
.append("<b> 是ID为ajax的节点的兄弟节点（且其id为java）</b>");
$("div").parent().each(function () {
alert($(this).html());
});
</script>
</body>
</html>
|
从上面的程序可以看出:
使用jQuery 的仿DOM导航方法可以更简单、更便捷地访问当前节点的兄弟节点、父节点和子节点,而且这些方法的返回值依然是jQuery 对象,因此可以直接调用jQuery对象提供的工具方法。