我從w3c上截了一張圖，如圖所示：

下面我們來詳細說一說。這些選擇器。

1.add() 方法將元素添加到匹配元素的集合中。例子：

.add(selector)

$("div").add("p").css("background", "yellow"); div 中添加一個 p 元素，並且設置他的背景。

2.andSelf() 聽名字都知道是包括自己。例子：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

$("li.third-item").nextAll().andSelf().css("background-color", "red"); //結果是項目 3,4,5 擁有紅色背景

$("div").children(".selected").css("color", "blue"); //找到類名為 "selected" 的所有 div 的子元素，並將其設置為藍色：

　　$( document ).bind("click", function( e ) {
    　　$( e.target ).closest("li").toggleClass("hilight");
  　});

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");//找到段落中的所有文本節點，並用粗體標簽包裝它們

6.each() 方法規定為每個匹配元素規定運行的函數。

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});//輸出每個 li 元素的文本

$("p").find("span").end().css("border", "2px red solid");//選擇所有段落，找到這些段落中的 span 元素，然後將它們恢復為段落，並把段落設置為兩像素的紅色邊框

8.eq() 方法將匹配元素集縮減值指定 index 上的一個

$("body").find("div").eq(2).addClass("blue");//通過為 index 為 2 的 div 添加適當的類，將其變為藍色

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

$("p").find("span").css(‘color‘,‘red‘);//搜索所有段落中的後代 span 元素，並將其顏色設置為紅色

$("p span").first().addClass(‘highlight‘);//高亮顯示段落中的第一個 span

$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
$("ul").has("li").addClass("full");

var isFormParent = $("input[type=‘checkbox‘]").parent().is("form");
$("div").text("isFormParent = " + isFormParent);//返回 false，因為 input 元素的父元素是 p 元素

$("p span").last().addClass(‘highlight‘);//高亮顯示段落中的最後一個 span 

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );//構建表單中所有值的列表

$("p").next(".selected").css("background", "yellow");//查找每個段落的下一個同胞元素，僅選中類名為 "selected" 的段落

$("div:first").nextAll().addClass("after");//查找第一個 div 之後的所有類名，並為他們添加類名

$("#term-2").nextUntil("dt").css("background-color", "red");
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "blue");

$("p").not("#selected")//從包含所有段落的集合中刪除 id 為 "selected" 的段落

$(‘li.item-a‘).offsetParent().css(‘background-color‘, ‘red‘);//設置類名為 item-a 的 li 元素的最近定位父元素的背景色

$("p").parent(".selected")//查找每個段落的帶有 "selected" 類的父元素

$("b").parents()//查找每個 b 元素的所有父元素

$("li.item-a").parentsUntil(".level-1")
  .css("background-color", "red");

$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
  .css("border", "3px solid blue");//查找 <li class="item-a"> 的祖先元素，直到 <ul class="level-1">，並將它們設置為紅色背景。同時，找到 <li class="item-2"> 的所有類名為 "yes" 的祖先元素，直到 <ul class="level-1">，然戶為它們設置藍色邊框

$("p").prev(".selected")//檢索每個段落，找到類名為 "selected" 的前一個同胞元素

$("div:last").prevAll().addClass("before");//定位最後一個 div 之前的所有 div，並為它們添加類

$("#term-2").prevUntil("dt").css("background-color", "red");
var term1 = document.getElementById(‘term-1‘);
$("#term-3").prevUntil(term1, "dd").css("color", "green");
//查找 <dt id="term-2"> 之前的同胞元素，直到前一個 <dt>，並將它們設置為紅色。同時，查找 <dt id="term-3"> 前面的 <dd> 同胞，直到 <dt id="term-1">，並把它們設置為藍色文本

$("p").siblings(".selected")//查找每個 p 元素的所有類名為 "selected" 的所有同胞元素

$("p").slice(0, 2).wrapInner("");//選中所有段落，然後將所選內容縮減為只包含第一和第二個段落

over~很實用~

jquery的遍歷選擇器-隨機整理下