jQuery - 遍历( Traversing)
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)等来访问list item 2 。
例子 (Example)
以下是将颜色添加到第二个列表项的简单示例。
<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>
这将产生以下结果 -
新页面打开过滤掉元素
filter( selector )方法可用于过滤掉与指定选择器不匹配的匹配元素集中的所有元素。 可以使用任何选择器语法编写选择器。
例子 (Example)
以下是一个简单的示例，它将颜色应用于与中产阶级相关的列表 -
<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 )方法可用于定位特定类型元素的所有后代元素。 可以使用任何选择器语法编写选择器。
例子 (Example)
以下是选择不同
元素中可用的所有元素的示例 -
<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>
这将产生以下结果 -
新页面打开JQuery DOM过滤方法
下表列出了可用于从DOM元素列表中过滤掉各种元素的有用方法 -
| Sr.No. | 方法和描述 |
|---|---|
| 1 | eq( index ) 将匹配元素集减少为单个元素。 |
| 2 | filter( selector ) 从匹配元素集中删除与指定选择器不匹配的所有元素。 |
| 3 | filter( fn ) 从与指定函数不匹配的匹配元素集中删除所有元素。 |
| 4 | is( selector ) 检查表达式的当前选择，如果选择的至少一个元素适合给定的选择器，则返回true。 |
| 5 | map( callback ) 将jQuery对象中的一组元素转换为jQuery数组中的另一组值（可能包含元素，也可能不包含元素）。 |
| 6 | not( selector ) 从匹配元素集中删除与指定选择器匹配的元素。 |
| 7 | slice( start, [end] ) 选择匹配元素的子集。 |
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] ) 获取一组元素，其中包含每个匹配元素集的所有唯一兄弟元素。 |
