極客書

jQuery DOM遍歷

jQuery是一個非常強大的工具，它提供了各種DOM遍歷方法來幫助我們隨機地選擇文檔中的元素以及順序方法中的元素。大多數DOM遍歷方法不修改jQuery對象，它們用於根據給定條件從文檔中篩選出元素。

Find Elements by Index

考慮一個包含以下HTML內容的簡單文檔−

Live Demo 
<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）等來訪問。

Example

下面是一個將顏色添加到第二個列表項的簡單示例。

Live Demo 
<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>

這將產生以下結果&負;

Filtering out Elements

filter（selector）方法可用於從與指定選擇器不匹配的匹配元素集中篩選出所有元素。選擇器可以使用任何選擇器語法編寫。

Example

下面是一個簡單的示例，它將顏色應用於與中產階級相關聯的列表−

Live Demo 
<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>

這將產生以下結果&負;

Locating Descendant Elements

find（selector）方法可用於定位特定類型元素的所有子元素。選擇器可以使用任何選擇器語法編寫。

Example

下面是一個示例，它選擇不同元素中可用的所有<span>元素;

Live Demo 
<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 Filter Methods

下表列出了一些有用的方法，您可以使用這些方法從DOM元素列表中篩選出各種元素;

Sr.No. Method & Description
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 Traversing Methods

下表列出了可用於定位DOM中各種元素的其他有用方法−

Sr.No. Methods & Description
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] )

獲取一組元素，其中包含每個匹配元素集的所有唯一同級。