免費(fèi)AI編程助手
DOM 遍歷
jQuery - DOM 遍歷
jQuery 是一個(gè)非常強(qiáng)大的工具，提供了各種各樣的 DOM 遍歷方法來(lái)幫助我們?cè)谖臋n中以隨機(jī)的連續(xù)的方式選擇元素。
大部分的 DOM 遍歷方法不修改 jQuery 對(duì)象，它們是用于從一個(gè)基于給定條件的文檔中過(guò)濾元素的。
通過(guò)索引找到元素 ——
考慮一個(gè)簡(jiǎn)單的文檔，帶有下述 HTML 內(nèi)容 ——
<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>這將產(chǎn)生如下所示結(jié)果 ——
-
上述每個(gè)列表都有自己的索引，并且通過(guò)使用如下所示的例子中的 eq(index) 方法直接定位。
- 每個(gè)子元素的索引都是從 0 開始，因此，list item 2 可以通過(guò)使用 $("li").eq(1) 來(lái)訪問，等等。
示例
下述是一個(gè)簡(jiǎn)單的例子，為第二個(gè) 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>這將產(chǎn)生如下所示的結(jié)果 ——
過(guò)濾元素
過(guò)濾器(選擇器)方法可以用來(lái)從匹配的元素集合中過(guò)濾掉與指定的選擇器不匹配的所有元素。選擇器可以使用任何選擇器的語(yǔ)法來(lái)編寫。
示例
下述是一個(gè)簡(jiǎn)單的例子，將顏色應(yīng)用到與 middle 類關(guān)聯(lián)的列表中 ——
<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>這將產(chǎn)生如下所示結(jié)果 ——
定位后代元素
find (選擇器)方法可以用于定位某一特定類型元素的所有后代元素。選擇器可以通過(guò)使用任何選擇器的語(yǔ)法來(lái)編寫。
示例
下面的例子中選取了在不同的 < p> 元素內(nèi)部所有可用的 < 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>這將產(chǎn)生如下所示結(jié)果 ——
jQuery DOM 過(guò)濾方法
下表列出了有用的方法，你可以用它來(lái)從 DOM 元素列表中過(guò)濾掉各種元素 ——
| 序號(hào) | 方法 & 描述 |
|---|---|
| 1 |
eq( index )
將一個(gè)匹配的元素集合減小為一個(gè)單個(gè)的元素。 |
| 2 |
filter( selector )
從匹配的元素集合中刪除與指定的選擇器不匹配的元素。 |
| 3 |
filter( fn )
從匹配的元素集合中刪除與指定的函數(shù)不匹配的元素。 |
| 4 |
is( selector )
檢查表達(dá)式的當(dāng)前選擇，如果選項(xiàng)中至少有一個(gè)元素符合給定的選擇器，那么返回 true。 |
| 5 |
map( callback )
將 jQuery 對(duì)象中的一組元素轉(zhuǎn)換成 jQuery 數(shù)組中的另一組值(該數(shù)組可能包含也可能不包含元素)。 |
| 6 |
not( selector )
從可匹配元素的集合中刪除與指定的選擇器相匹配的元素。 |
| 7 |
slice( start, [end] )
選取可匹配元素的子集。 |
JQuery DOM 遍歷方法
下表列出了其他有用的方法，你可以在 DOM 中使用，用于定位各種元素 ——
| 序號(hào) | 方法 & 描述 |
|---|---|
| 1 |
add( selector )
在匹配的元素集合中添加更多的與給定的選擇器相匹配的元素。 |
| 2 |
andSelf( )
將先前的選擇添加到當(dāng)前的選擇中。 |
| 3 |
children( [selector])
獲取一個(gè)元素集合，包含每個(gè)可匹配元素集合的唯一的直接的全部孩子元素。 |
| 4 |
closest( selector )
獲取一個(gè)元素集合，包含與指定的選擇器相匹配的最近的父親元素，包括起始元素。 |
| 5 |
contents( )
在匹配的元素(包括文本節(jié)點(diǎn))中找到所有的孩子節(jié)點(diǎn)，如果元素是一個(gè) iframe，那么在內(nèi)容文檔中找到所有的孩子節(jié)點(diǎn)。 |
| 6 |
end( )
恢復(fù)最近的'破壞性'操作，將匹配的元素集合設(shè)置為它之前的狀態(tài)。 |
| 7 |
find( selector )
搜索與指定的選擇器匹配的后代元素。 |
| 8 |
next( [selector] )
獲取一個(gè)元素集合，包含給定元素集合的唯一的下一個(gè)兄弟元素。 |
| 9 |
nextAll( [selector] )
找到當(dāng)前元素之后的所有兄弟元素。 |
| 10 |
offsetParent( )
返回一個(gè) jQuery 集合以及第一個(gè)匹配元素的父親的定位。 |
| 11 |
parent( [selector] )
獲取一個(gè)元素的直接父親。如果在一組元素中調(diào)用，父元素會(huì)返回一組它們唯一直接父親元素的集合。 |
| 12 |
parents( [selector] )
得到一個(gè)元素集合，包含匹配元素集合的唯一的祖先元素(根元素除外)。 |
| 13 |
prev( [selector] )
得到一個(gè)元素集合，包含匹配元素集合的唯一的先前的兄弟元素。 |
| 14 |
prevAll( [selector] )
找到當(dāng)前元素之前的所有兄弟元素。 |
| 15 |
siblings( [selector] )
獲取一個(gè)元素集合，包含每個(gè)可匹配元素集合的全部唯一的兄弟元素。 |
更多建議：