jQuery遍历Dom树中的元素

一、遍历

遍历：就是根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某项选择开始，并沿着这个选择移动，知道抵达所期望的元素。

1.向上遍历DOM树 有下面三种方法

• parent() - 方法返回被选元素的直接父元素，该方法只会向上一级对DOM数进行遍历

• parents() - 方法返回被选元素的所有祖先元素，他一路向上直到文档的根元素（）。

• parentsUntil() -方法返回于俩元素之间的所有祖先元素

  $(fucntion(){
  	$("button1").click(function(){
  	//选中了span标签的直接父元素
  		$("span").parent().text("我是父元素");
  	})
  
  	$("button2").click(function(){
  	//选中了span标签的所有祖先元素  所以是一个元素集合
  		$("span").parents().text("我是span元素的祖先元素");
  	})
  
  	$("button3").click(function(){
          //span是子元素，div是祖先元素  返回两者关系之间的span祖先元素
          $("span").parentsUntil("div").text("我是span和div之间的元素");
      })
  })
  

2.向下遍历DOM树 遍历后代

• children() - 方法返回被选中元素的所有直接子元素。
• find() -方法返回被选中元素的后代元素，一直向下，直到最后一个后代。

这两种方法，分别跟上面的parent 和parents相对应。

3.在DOM树中水平遍历

• siblings() -方法返回所选元素的所有同胞元素
• next() -方法返回所选元素的下一个同胞元素
• nextAll() -方法返回被选元素的所有跟随的同胞元素；
• nextUntil() -方法返回介于两个给定参数之间的所有跟随的同胞元素；
• prev()，preAll(),prevUntil()方法分别跟上面的三种方法相对应，这三个返回的是被选元素前的同胞元素；

二、过滤

三个最基本的过滤方法是：first() last() 和eq()。他们允许基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，filter(),not()允许选取匹配或不匹配某项指定标准的元素。

$(function(){
//选取的是首个<div>元素内部的第一个<p>元素
//意思就是说，这个选择器只选中第一个div中的p元素
	$("div p").first();
 //选中的是最后一个div中的最后一个p元素
    $("div p").first();
})
<div> <p>我是第一个div的第一个p元素</p> </div>
<div> <p>我是第二个div的第一个p元素</p> </div>
    
  

//eq方法返回被选元素中带有指定索引号的元素
$(function(){
//选中的是所有p元素中的第一个p元素
	$("p").eq(1).css({"background-color":"yellow"});
});

//flilter()方法允许规定一个标准，不匹配之歌标准的元素会被从及合作内删除，匹配的元素会被返回
$(function(){
    //返回类名为.url的元素。并添加样式
    $("p").filter(".url").css("background-color","blue");
});

//not()方法返回不匹配标准的所有元素
$(function(){
    //返回不带有.url类名的元素
    $("p").not(".url").css("background-color","green");
})