免費AI編程助手
DOM 遍歷
jQuery - DOM 遍歷
jQuery 是一個非常強大的工具，提供了各種各樣的 DOM 遍歷方法來幫助我們在文檔中以隨機的連續(xù)的方式選擇元素。
大部分的 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) 方法直接定位。
- 每個子元素的索引都是從 0 開始，因此，list item 2 可以通過使用 $("li").eq(1) 來訪問，等等。
示例
下述是一個簡單的例子，為第二個 list item 添加顏色。
<html>
<head>
<title>The JQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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>這將產生如下所示的結果 ——
過濾元素
過濾器(選擇器)方法可以用來從匹配的元素集合中過濾掉與指定的選擇器不匹配的所有元素。選擇器可以使用任何選擇器的語法來編寫。
示例
下述是一個簡單的例子，將顏色應用到與 middle 類關聯的列表中 ——
<html>
<head>
<title>The JQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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 (選擇器)方法可以用于定位某一特定類型元素的所有后代元素。選擇器可以通過使用任何選擇器的語法來編寫。
示例
下面的例子中選取了在不同的 < p> 元素內部所有可用的 < span>元素 ——
<html>
<head>
<title>The JQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/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 元素列表中過濾掉各種元素 ——
| 序號 | 方法 & 描述 |
|---|---|
| 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 中使用，用于定位各種元素 ——
| 序號 | 方法 & 描述 |
|---|---|
| 1 |
add( selector )
在匹配的元素集合中添加更多的與給定的選擇器相匹配的元素。 |
| 2 |
andSelf( )
將先前的選擇添加到當前的選擇中。 |
| 3 |
children( [selector])
獲取一個元素集合，包含每個可匹配元素集合的唯一的直接的全部孩子元素。 |
| 4 |
closest( selector )
獲取一個元素集合，包含與指定的選擇器相匹配的最近的父親元素，包括起始元素。 |
| 5 |
contents( )
在匹配的元素(包括文本節(jié)點)中找到所有的孩子節(jié)點，如果元素是一個 iframe，那么在內容文檔中找到所有的孩子節(jié)點。 |
| 6 |
end( )
恢復最近的'破壞性'操作，將匹配的元素集合設置為它之前的狀態(tài)。 |
| 7 |
find( selector )
搜索與指定的選擇器匹配的后代元素。 |
| 8 |
next( [selector] )
獲取一個元素集合，包含給定元素集合的唯一的下一個兄弟元素。 |
| 9 |
nextAll( [selector] )
找到當前元素之后的所有兄弟元素。 |
| 10 |
offsetParent( )
返回一個 jQuery 集合以及第一個匹配元素的父親的定位。 |
| 11 |
parent( [selector] )
獲取一個元素的直接父親。如果在一組元素中調用，父元素會返回一組它們唯一直接父親元素的集合。 |
| 12 |
parents( [selector] )
得到一個元素集合，包含匹配元素集合的唯一的祖先元素(根元素除外)。 |
| 13 |
prev( [selector] )
得到一個元素集合，包含匹配元素集合的唯一的先前的兄弟元素。 |
| 14 |
prevAll( [selector] )
找到當前元素之前的所有兄弟元素。 |
| 15 |
siblings( [selector] )
獲取一個元素集合，包含每個可匹配元素集合的全部唯一的兄弟元素。 |
更多建議：