<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é)果 ——

http://wiki.jikexueyuan.com/project/jquery/images/tra-jt-1.png" alt="" />

上述每個(gè)列表都有自己的索引，并且通過(guò)使用如下所示的例子中的 eq(index) 方法直接定位。
每個(gè)子元素的索引都是從 0 開(kāi)始，因此，list item 2 可以通過(guò)使用 $("li").eq(1) 來(lái)訪問(wèn)，等等。

示例

下述是一個(gè)簡(jiǎn)單的例子，為第二個(gè) list item 添加顏色。

<html>
   <head>
      <title>The JQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示的結(jié)果 ——

http://wiki.jikexueyuan.com/project/jquery/images/tra-jt-2.png" alt="" />

過(guò)濾元素

過(guò)濾器(選擇器)方法可以用來(lái)從匹配的元素集合中過(guò)濾掉與指定的選擇器不匹配的所有元素。選擇器可以使用任何選擇器的語(yǔ)法來(lái)編寫(xiě)。

示例

下述是一個(gè)簡(jiǎn)單的例子，將顏色應(yīng)用到與 middle 類(lèi)關(guān)聯(lián)的列表中 ——

<html>
   <head>
      <title>The JQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示結(jié)果 ——

http://wiki.jikexueyuan.com/project/jquery/images/tra-jt-3.png" alt="" />

定位后代元素

find (選擇器)方法可以用于定位某一特定類(lèi)型元素的所有后代元素。選擇器可以通過(guò)使用任何選擇器的語(yǔ)法來(lái)編寫(xiě)。

示例

下面的例子中選取了在不同的 < p> 元素內(nèi)部所有可用的 < span>元素 ——

<html>
   <head>
      <title>The JQuery Example</title>
      <script type="text/javascript" src="http://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>

這將產(chǎn)生如下所示結(jié)果 ——

http://wiki.jikexueyuan.com/project/jquery/images/tra-jt-4.png" alt="" />

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è)可匹配元素集合的全部唯一的兄弟元素。

上一篇：jQuery - 概述下一篇：jQuery - CSS 選擇器方法