jQuery提供了一组方法用于遍历中的元素。这组方法包括：

• each()
• first()
• last()
• next()
• prev()
• parent()
• children()
• siblings()

我们将以下面的HTML代码来讲解上面的这些遍历元素的方法：

<div class="contentDiv"> Div</div>
<div class="contentDiv"> Div</div>
<div class="contentDiv"> Div</div>                              
                            

each()

each()方法可以循环遍历包装集中的每一个元素。each()方法中可以传入一个回调函数，这个回调函数会被包装集中的每一个元素都调用一次。

$(".contentDiv").each( function(index, element) {

});                              
                            

回调函数中的index参数是包装集中元素的索引。

回调函数中的element参数代表包装集的各个元素本身。

例如你想设置每一个div元素的背景颜色，可以如下编写代码：

$(".contentDiv").each( function(index, element) {
    $(element).css("background-color", "#ffaaaa");
});                              
                            

需要注意的是，在回调函数中，element是一个DOM元素，要使用jQuery的方法就要使用$()将它进行包装。

除了使用element参数，你也可以使用this关键字来代替它。此时的this代表元素本身。使用这种方法就不需要在回调函数中传入element参数了。

$(".contentDiv").each( function(index) {
    $(this).css("background-color", "#ffaaaa");
});                              
                            

first()

first()函数会返回包装集中的第一个元素。例如：

$(".contentDiv").first().css("background-color", "#ffaaaa");                             
                            

上面的代码会使第一个div的背景颜色被修改为粉红色。

last()

last()函数会返回包装集中的最后一个元素。例如：

$(".contentDiv").last().css("background-color", "#ffaaaa");                             
                            

上面的代码会使最后一个div的背景颜色被修改为粉红色。

next()

next()方法会取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。例如：

var firstDiv = $(".contentDiv").first()
firstDiv.next().css("background-color", "#ffaaaa");                             
                            

上面的代码先获取了第一个div元素的引用，然后使用next()方法修改第一个div元素后面的div元素的背景色。

prev()

prev()方法取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。例如：

var lastDiv = $(".contentDiv").last()
lastDiv.prev().css("background-color", "#ffaaaa");                              
                            

上面的代码先获取了最后一个div元素的引用，然后使用prev()方法修改最后一个div元素前面的div元素的背景色。

parent()

parent()方法取得一个包含着所有匹配元素的唯一父元素的元素集合。例如下面的例子：

<div id="theDiv" class="container">
  <div class="contentDiv" id="div1"> <span>Div</span></div>
  <div class="contentDiv" id="div2"> <span>Div</span></div>
  <div class="contentDiv" id="div3"> <span>Div</span></div>
</div>                              
                            

为上面的HTML代码添加一些CSS样式，制作出下图的布局：

.container{
  widows: 500px;
  padding: 10px;
  border: 2px solid #eee;
  float: left;
}
.contentDiv{
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
  margin: 10px;
  float: left;
  font-family: "微软雅黑";
  background: #fff;
}
.contentDiv span{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}                              
                            

然后通过下面的代码来获取#div1的父元素，并修改它的背景颜色为粉红色。

$("#div1").parent().css("background-color","#ffaaaa");                              
                            

children()

children()方法取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。例如：

var children = $("#theDiv").children();

children.each(function() {

});                              
                            

siblings()

siblings()方法取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

siblings()方法获取的是相同父元素中的所有同辈元素。例如：

var siblings = $("#div2").siblings();

siblings.each(function() {

});                             
                            

上面的代码获取#div2的同辈元素，得到的结果是#div1和#div3这两个DIV元素。

获取特性值

jQuery提供了一个attr()命令来获取和设置元素的特性值。attr()命令可以用来进行读操作，也可以用于写操作，这取决于传入attr()命令的参数。

attr()命令可以用于从匹配集里的第一个元素获取特性值，或将特性值设置到所有已匹配的元素。

获取元素特性值的attr()命令的语法为：

<img id="img1" src="img/1.jpg" alt="this is a image">
                            

alert($("#img1").attr("alt"));                             
                            

$("img").attr({
  title:'this is a image', alt:''
});                              
                            

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>                              
                            

.active{
  background: #ffaaaa;
  color: #fff;
}                              
                            

$("li").mouseenter(function(){
  $(this).addClass("active");
});                             
                            

$("table tr").each(function(){
    $(this).hover(function(){
      $(this).toggleClass("active");
    });
});                             
                            

$(".element").css("color","#ffaaaa");