【jQuery学习笔记----元素遍历】

元素遍历

DOM为Node类型定义了childNodes、parentNode、nextSibling、previousSlibling、firstChild和lastChild属性，这些属性为节点之间相互访问提供了支持。开发人员正是利用这些指针属性，从而可以自由地在文档结构内进行访问。

jQuery实现的元素遍历访求

jQuery定义了children()、next()、prev()和parent()四个基本元素遍历方法，使用它们可以轻松访问文档中任何元素，其中children()方法获取当前元素包含的所有子元素，next()方法获取当前元素相的下一个同级元素，prev()方法获取当前元素相邻上一个同级元素，parent()方法获取当前元素的父元素。这些方法的返回值都是jQuery对象，而不是DOM集合或对象。

javascript实现元素遍历方法

DOM预定义的节点指针属性是不区分类型的，为了方便DOM元素遍历操作需要，可以使用javascript自定义：

自定义getChildren()方法

DOMExtend(“getChildren”,function(){

var _this = this;

var a = _this.childNodes;

var b = [];

for(var i=0;i<a.length;i++){

if(a[i].nodeType==1)b.push(a[i]);

}

return b; //返回存储子元素的集合

}

自定义next()方法

DOMExtend(“getChildren”,function(){

var _this = this.nextSibling;

while(_this && _this.nodeType!=1){

_this =_this.nextSibling;

}

return _this;

}

自定义prev()方法

prev()方法与next()方法访问的方向正好相反，可以筛选出上一个元素节点，自定义prev()方法的代码如下。

DOMExtend(“prev”,function(){

var _this = this.previousSibling;

while(_this && _this.nodeType!=1){

_this =_this.previousSibling;

}

return _this;

}

自定义first()和last()方法

虽然jQuery没有封装DOM的firstChild和lastChild属性，但是我们仍有必要自定义访问第一个子元素，和最后一个子元素的方法。jQuery没定义是因为它提供了更灵活的筛选元素的方法。

DOMExtend(“first”,function(){

var _this = this.firstChild;

while(_this && _this.nodeType!=1){

_this = _this.nextSibling;

}

})

DOMExtend(“last”,function(){

var _this = this.lastChild;

while(_this && _this.nodeType!=1){

_this = _this.previousSibling;

}

})