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)方法直接定位，如下例所示.
每个子元素从零开始其索引，因此，将使用$("li").eq(1)等访问列表项2.
以下是将颜色添加到第二个列表项的简单示例.
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>这将产生以下结果 :
lter(selector)方法可用于过滤掉与指定选择器不匹配的匹配元素集中的所有元素. 可以使用任何选择器语法编写选择器.
以下是将颜色应用于与中产阶级关联的列表的简单示例:
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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)方法可用于定位特定类型元素的所有子元素. 可以使用任何选择器语法编写选择器.
以下是选择不同<p>元素中可用的所有<span>元素的示例:
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>下表列出了有用的方法，你可以用于过滤掉DOM元素列表中的各种元素 :
| Sr.No. | 方法&说明 |
|---|---|
| 1 | eq(index) 将匹配元素集合减少为单个元素. |
| 2 | filter(selector) 从匹配的元素集中删除与指定选择器不匹配的所有元素. |
| 3 | filter(fn) 从匹配元素集合中移除与指定函数不匹配的所有元素. |
| 4 | is( selector ) 如果选择的至少一个元素适合给定的选择器，则对表达式检查当前选择并返回true./p> |
| 5 | map( callback ) 将jQuery对象中的一组元素转换为jQuery数组中的另一组值(它可能包含或不包含元素.) |
| 6 | not(selector) 从中删除与指定选择器匹配的元素一组匹配的元素. |
| 7 | slice(start，[end]) 选择匹配元素的子集. |
下表列出其他有用的方法，你可以用来定位DOM中的各种元素 :
| Sr.No . | 方法&说明 |
|---|---|
| 1 | add(selector) 将更多元素(由给定的选择器匹配)添加到匹配元素集. |
| 2 | andSelf() 将上一个选择添加到当前选择中. |
| 3 | children([selector]) 获取一组元素，其中包含每个匹配元素集的所有唯一直接子元素. |
| 4 | closest( selector ) 获取一组元素，其中包含与指定选择器匹配的最接近的父元素，起始元素包括ed. |
| 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] ) 获取一组元素，其中包含每个匹配元素集的所有唯一同胞. |
