3.3.2 仿DOM导航查找的相关方法

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导航相关方法的用法。

<!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之内所有内容（包括节点和文本），实际返回div下的6个子div。
		$("body>div").contents().css("background-color", "#ddd");

		// 获取id为ajax节点的下一个兄弟节点
		$("#ajax").next().css("border", "2px dotted black");

		// 获取id为ajax节点后面的、id为android的节点之前的所有兄弟节点
		$("#ajax").nextUntil("#android").css("font-size", "20pt");

		// 获取id为ajax节点的上一个兄弟节点
		$("#ajax").prev().css("border", "2px solid black");

		// 获取id为ajax节点的之前的、id为java的节点之后的所有兄弟节点
		$("#ajax").prevUntil("#java").height(50);

		// 获取获取id为ajax节点的、id为java的兄弟节点
		$("#ajax").siblings("#java")
			.append("<b> 是ID为ajax的节点的兄弟节点（且其id为java）</b>");
			
		// 取出所有div元素的父元素，将会输出body元素、和一个div元素
		$("div").parent().each(function () {
			alert($(this).html());
		});
	</script>
</body>

</html>

从上面的程序可以看出:

使用jQuery 的仿DOM导航方法可以更简单、更便捷地访问当前节点的兄弟节点、父节点和子节点,而且这些方法的返回值依然是jQuery 对象,因此可以直接调用jQuery对象提供的工具方法。

原文链接: 3.3.2 仿DOM导航查找的相关方法