极客教程jQuery DOM遍历
jQuery是一个非常强大的工具，提供了各种DOM遍历方法，帮助我们随机选择文档中的元素，也可以按顺序选择。大多数DOM遍历方法不会修改jQuery对象，并且它们用于根据给定条件从文档中筛选出元素。
按索引查找元素
考虑一个包含以下HTML内容的简单文档−
<html>
<head>
<title>The JQuery Example</title>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
这将产生以下结果−
- 每个列表都有自己的索引，可以直接使用 eq(index) 方法来定位，如下面的示例所示。
-
每个子元素从零开始的索引，因此， 列表项2 可以通过使用 $(“li”).eq(1) 等方式进行访问。
示例
以下是一个简单的示例，将颜色添加到第二个列表项。
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
(document).ready(function() {("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
这将产生以下结果−
筛选元素
filter（selector）方法可用于过滤掉不匹配指定选择器的匹配元素集合中的所有元素。选择器可以使用任何选择器语法编写。
示例
以下是一个简单的示例，它将颜色应用于与中等类相关联的列表。
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
(document).ready(function() {("li").filter(".middle").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list item 1</li>
<li class = "top">list item 2</li>
<li class = "middle">list item 3</li>
<li class = "middle">list item 4</li>
<li class = "bottom">list item 5</li>
<li class = "bottom">list item 6</li>
</ul>
</div>
</body>
</html>
这将产生以下结果−
定位子元素
find( selector ) 方法可以用来定位特定类型的元素的所有子元素。选择器可以使用任何选择器语法来编写。
示例
以下是一个示例，它选择了所有不同的
元素内的元素−
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
(document).ready(function() {("p").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<p>This is 1st paragraph and <span>THIS IS RED</span></p>
<p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>
这将产生以下结果−
JQuery DOM筛选方法
下表列出了您可以使用的有用方法，用以从DOM元素列表中过滤出各种元素−
| 序号 | 方法与描述 |
|---|---|
| 1 | eq( 索引 ) 将匹配元素集合减少到一个元素。 |
| 2 | filter( 选择器 ) 从匹配元素集合中删除与指定选择器不匹配的所有元素。 |
| 3 | filter( 函数 ) 从匹配元素集合中删除与指定函数不匹配的所有元素。 |
| 4 | is( 选择器 ) 检查当前选择是否符合表达式，并返回 true，如果至少有一个元素的选择符合给定的选择器。 |
| 5 | map( 回调函数 ) 将 jQuery 对象中的一组元素转换为 jQuery 数组中的另一组值（可能包含元素，也可能不包含元素）。 |
| 6 | not( 选择器 ) 从匹配元素集合中删除与指定选择器匹配的元素。 |
| 7 | slice( 开始, [结束] ) 选择匹配元素的一个子集。 |
jQuery DOM 遍历方法
下表列出了其他有用的方法，您可以使用这些方法在 DOM 中定位各种元素：
| Sr.No. | 方法和描述 |
|---|---|
| 1 | add( selector ) 将匹配给定选择器的更多元素添加到匹配元素集合中。 |
| 2 | andSelf( ) 将上一个选择添加到当前选择中。 |
| 3 | children( [selector]) 获取包含每个匹配元素的所有唯一子元素的一组元素。 |
| 4 | closest( selector ) 获取包含指定选择器的最近父元素的一组元素，包括起始元素。 |
| 5 | contents( ) 查找匹配元素内的所有子节点（包括文本节点），如果元素是一个iframe，则在内容文档中查找。 |
| 6 | end( ) 恢复最近的“破坏性”操作，将匹配元素集合更改为其上一个状态。 |
| 7 | find( selector ) 查找符合指定选择器的后代元素。 |
| 8 | next( [selector] ) 获取包含给定一组元素的唯一下一个同级元素的元素集合。 |
| 9 | nextAll( [selector] ) 查找当前元素之后的所有同级元素。 |
| 10 | offsetParent( ) 返回第一个匹配元素的定位父元素的jQuery集合。 |
| 11 | parent( [selector] ) 获取元素的直接父元素。如果对一组元素调用，parent 返回一组它们的唯一直接父元素。 |
| 12 | parents( [selector] ) 获取匹配元素集的唯一祖先元素的一组元素（除根元素之外）。 |
| 13 | prev( [selector] ) 获取包含每个匹配元素的唯一前一个兄弟元素的一组元素。 |
| 14 | prevAll( [selector] ) 寻找当前元素之前的所有同级元素。 |
| 15 | siblings( [selector] ) 获取一个包含所有匹配元素的唯一兄弟元素集合的元素集合。 |