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~很实用~