jQuery DOM遍历
jQuery允许我们使用节点关系导航DOM树。
jQuery提供了各种DOM遍历方法来随机选择文档中的元素以及顺序方法。
什么是DOM遍历？
DOM遍历基本上意味着在组成网页的DOM周围移动。遍历DOM时，可以将文档树上移到任何所需的元素。您还可以将层次结构向下移动到给定的子节点，或移到同级节点。这使您可以浏览HTML页面，以找到需要收集一些数据或进行更改的确切位置。
下图将HTML页面显示为树（DOM树）。使用jQuery遍历，您可以从所选元素开始轻松地在树中向上（祖先），向下（后裔）和侧向（同级）移动。这种移动称为DOM树的遍历-或导航-或移动。
从上图可以看到：
<html>是<head>和<body>的父元素，它是所有元素的祖先
<head>是<title>的父元素，是<html>的子元素
<body>是<h1>和<a>的父元素，是<html>的子元素
<title>是<head>的子元素，是<html>的后代
<h1>是<body>的子元素，是<html>的后代
<a>是<body>的子元素，是<html>的后代
这两个<h1>和<a>的兄弟同级元素（它们具有共同的父元素），是<html>和<body>的后代。
祖先是父母，祖父母，曾祖父母等等。
后代是孩子，孙子，曾孙等。
兄弟元素是那些共享同一父元素的元素。
遍历DOM树
jQuery提供了多种方法来允许我们遍历DOM。
下一章将向您展示如何在DOM树中上下移动。
jQuery 遍历 - 祖先
使用jQuery，我们可以轻松地遍历DOM树以查找元素的祖先。
祖先是父母，祖父母，曾祖父母等等。
在本章中，我们将解释如何遍历DOM树。
遍历DOM树
我们有以下jQuery方法，用于遍历DOM树：
parent()
parents()
parentsUntil()
jQuery parent()方法
jQuery parent()方法返回所选元素的直接父元素。
此方法仅在DOM树上向上移动一个级别。
您还可以使用可选参数来过滤搜索父项。
下面的示例返回每个段落具有“ selected”类的直接父元素：
示例
$(document).ready(function(){
$("p").parent(".selected").css("background", "coral");
});
jQuery parents()方法
jQuery parents()方法返回所选元素的所有祖先元素。
此方法从父元素沿着DOM元素的祖先向上遍历，一直到文档的根元素（<html>）。
jQuery ParentUntil()方法
jQuery parentsUntil()方法返回两个给定参数之间的所有祖先元素。
jQuery 遍历 - 后代
使用jQuery，我们可以轻松地遍历DOM树以查找元素的后代。
后代是孩子，孙子，曾孙等。
在本章中，我们将解释如何遍历DOM树。
遍历DOM树
我们有以下jQuery方法，用于遍历DOM树：
children()
find()
jQuery children()方法
jQuery children()方法返回所选元素的所有直接子级。
此方法仅在DOM树下遍历单个级别。
下面的示例返回DIV的直接子元素：
示例
$(document).ready(function(){
$("div").children().css("background-color", "coral");
});
您还可以使用可选参数来过滤搜索子项。
以下示例返回DIV的直接子代的所有<p>元素：
示例
$(document).ready(function(){
$("div").children("p").css("background-color", "coral");
});
jQuery find()方法
jQuery find()方法返回与指定参数匹配的所有后代元素。
此方法沿DOM元素的后代向下遍历，一直向下到最后一个后代。
从所有段落开始，并搜索后代span元素，与$("p span")：
示例
$(document).ready(function(){
$("p").find("span").css("background", "mediumpurple");
});
要返回多个后代，请用逗号分隔选择器名称。
以下示例返回作为<p>元素后代的所有<span>和<i>元素：
示例
$(document).ready(function(){
$("p").find("span, i").css("background", "mediumpurple");
});
jQuery 遍历 - 兄弟(siblings)
使用jQuery，我们可以轻松地在DOM树中横向遍历以查找元素的同级。
兄弟元素是那些共享同一父元素的元素。
在本章中，我们将解释如何在DOM树中横向遍历。
在DOM树中横向遍历
我们有以下jQuery方法用于DOM树中的横向遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
jQuery siblings()方法
jQuery siblings()方法返回所选元素的所有同级元素。
以下示例返回类名称为“ middle”的每个<li>元素的所有同级元素：
示例
$(document).ready(function(){
$("li.middle").siblings().css("background-color", "lightgreen");
});
您还可以使用可选参数来过滤对同级的搜索。
下面的示例返回每个列表项的类为“ bold”的所有同级：
示例
$(document).ready(function(){
$("li").siblings(".bold").css("background-color", "lightgreen");
});
jQuery next()方法
jQuery next()方法返回紧跟在所选元素之后的下一个同级元素。
下面的示例返回每个DIV元素的下一个同级元素：
示例
$(document).ready(function(){
$("div").next().css("background", "lightblue");
});
jQuery nextAll()方法
jQuery nextAll()方法返回所选元素的所有下一个同级元素。
下面的示例返回每个DIV元素的所有下一个同级元素：
示例
$(document).ready(function(){
$("div").nextAll().css("background", "lightblue");
});
jQuery prev()方法
jQuery prev()方法返回上一个兄弟元素，该兄弟元素紧邻所选元素。
下面的示例返回每个DIV元素的上一个同级元素：
示例
$(document).ready(function(){
$("div").prev().css("background", "lightblue");
});
jQuery prevAll()方法
jQuery prevAll()方法返回所选元素的所有先前的同级元素。
下面的示例返回每个DIV元素的所有先前的同级元素：
示例
$(document).ready(function(){
$("div").prevAll().css("background", "lightblue");
});
jQuery nextUntil()和prevUntil()方法
jQuery nextUntil()方法返回两个给定参数之间的所有下一个同级元素。
jQuery prevUntil()方法返回两个给定参数之间的所有先前的同级元素。
以下示例返回在<dt id="term-2">之后直到下一个<dt>的所有下一个同级：
示例
<!DOCTYPE html>
<html>
<title>jQuery nextUntil()遍历同级兄弟示例 - 基础教程(nhooo.com)</title>
<head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#term-2").nextUntil("dt").css("background-color", "coral");
});
</script>
</head>
<body>
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt id="term-3">term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
</body>
</html>
以下示例返回<dt id="term-2">之前的所有兄弟姐妹，直至之前的<dt>：
示例
$(document).ready(function(){
$("#term-2").prevUntil("dt").css("background-color", "coral");
});
jQuery 遍历 - 过滤
使用jQuery，我们可以轻松地从DOM元素列表中过滤掉各种元素。
在本章中，我们将说明如何缩小对DOM树中元素的搜索范围。
过滤DOM树
我们有以下jQuery方法，用于根据特定元素在一组元素中的位置来选择它们：
first()
last()
eq()
filter()
not()
has()
is()
jQuery first()方法
jQuery first()方法返回所选元素的第一个元素。
以下示例突出显示了第一段：
示例
$(document).ready(function(){
$("p").first().css("background", "coral");
});
jQuery last()方法
jQuery last()方法返回所选元素的最后一个元素。
以下示例突出显示了最后一段：
示例
$(document).ready(function(){
$("p").last().css("background", "coral");
});
jQuery eq()方法
jQuery eq()方法返回具有选定元素的特定索引号的元素。
索引号始终从0开始，因此第一个数字将具有索引0（而不是1）。
下面的示例选择第三段（索引号2）：
示例
$("button").click(function(){
$("p").eq(2).css("background-color", "red");
});
jQuery filter()方法
jQuery filter()方法返回与特定条件匹配的元素。
此方法过滤掉所有不符合所选条件的元素，并且将返回那些匹配项。
下面的示例返回所有类名为“ demo”的段落：
示例
$(document).ready(function(){
$("p").filter(".demo").css("background", "coral");
});
下面的示例返回所有偶数列表项：
示例
$(document).ready(function(){
$("li").filter(":even").css("background", "coral");
});
jQuery not()方法
jQuery not()方法返回不符合特定条件的元素。
此方法与该filter()方法相反。
下面的示例返回所有不具有类名称“ demo”的段落：
示例
$(document).ready(function(){
$("p").not(".demo").css("background", "coral");
});
jQuery has()方法
jQuery has()方法返回与指定选择器匹配的所有元素，其中包含一个或多个元素。
以下示例返回其中包含<span>元素的所有段落：
示例
$(document).ready(function(){
$("p").has("span").css("background-color", "coral");
});
jQuery is()方法
jQuery is()方法检查所选元素之一是否与给定参数匹配。
如果这些元素中的至少一个与给定参数匹配，则此方法将返回true，否则返回false。
下面的示例检查<p>的父级是否为<div>元素：
示例
$(document).ready(function(){
$("p").parent().is("div");
});
网友评论