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

我從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").css("color", "blue"); //找到類名爲 "selected" 的全部 div 的子元素，並將其設置爲藍色：.children(".selected")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$("div:first").addClass("after");//查找第一個 div 以後的全部類名，併爲他們添加類名.nextAll()

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

$("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")
  .css("background-color", "red");

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

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

$("div:last").addClass("before");//定位最後一個 div 以前的全部 div，併爲它們添加類.prevAll()

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

$("p").siblings(".selected")//查找每一個 p 元素的全部類名爲 "selected" 的全部同胞元素

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

over~很實用~