JQuery分析及实现part4之DOM操作模块功能及实现

appendTo: function(target) {
	var node,
		ret = [];
	// 统一target类型 为itcast对象（为了方便操作）
	target = itcast(target);
	// 遍历this上的每一个dom元素
	this.each(function(v) {
		// 在遍历目标dom元素
		target.each(function(t, i) {
			// 如果当前dom元素为 目标上的第一个.不拷贝节点
			// 否则拷贝节点
			node = i === 0 ? v : v.cloneNode(true);
			// 将被追加的节点,添加到ret内
			ret.push(node);
			// 将节点追加到指定的目标dom元素上.
			t.appendChild(node);
		});
	});
	// 将每一个添加的dom元素,转换成itcast对象返回,实现链式编程
	// 原因:在添加样式时,如果不这样做的话,只会给没克隆的节点添加样式.
	return itcast(ret);
}

append: function(source) {
	//统一source类型,为itcast对象
	source = itcast(source);
	source.appendTo(this);
	return this;
},

prependTo: function(target) {
	//定义变量node,临时存储被追加的节点
	var node,
	//定义变量firstChild,临时存储当前dom元素的第一个子节点
		firstChild,
		self = this,
		//定义ret数组,存储所有被追加的节点
		ret = [];
   //统一类型为itcast对象
	target = itcast(target);
	//遍历target上的每一个dom元素
	target.each(function(elem, i) {
		// 缓存当前目标dom元素的第一个子节点
		firstChild = elem.firstChild;
		//遍历this上的每一个dom元素
		self.each(function(dom) {
			//判断当前遍历的dom是否为target上的每一个dom元素
			//若为真,则不需要克隆节点,否则,要深克隆节点
			// 将得到的节点赋值给node
			node = i === 0 ? dom : dom.cloneNode(true);
			//将节点push到ret内
			ret.push(node);
			//调用insertBefore方法,追加节点(追加的新节点,firstChild)
			elem.insertBefore(node, firstChild);
		});
	});
    //将ret作为itcast对象,并且返回
	return itcast(ret);
}

prepend: function(source) {
	source = itcast(source);
	source.prependTo(this);
	return this;
}

next: function() {
	// 存储所用dom的下一个兄弟元素
	var ret = [];
	// 遍历this上的所有dom元素
	this.each(function() {
		// 在遍历当前dom元素下面所有的兄弟元素
		for(var node = this.nextSibling; node ; node = node.nextSibling){
			// 如果当前兄弟节点,为元素节点
			// 即为结果,将其添加ret内,并结束循环
			if(node.nodeType === 1){
				ret.push(node);
				break;
			}
		}
	});
	// 将ret转换成itcast对象,返回
	return itcast(ret);
},

nextAll: function() {
	var ret = [],
		node;
	this.each(function() {
		for(node = this.nextSibling; node ; node = node.nextSibling){
			if(node.nodeType === 1) ret.push(node);
		}
	});
	return itcast(itcast.unique(ret));
}

before: function(source) {
	var node;
	source = itcast(source);
	this.each(function(dom, i) {
		source.each(function(elem) {
			node = i === 0 ? elem : elem.cloneNode(true);
			// 获取dom的父节点，调用insertBefore方法在dom前添加新的子节点node
			dom.parentNode.insertBefore(node, dom);
		});
	});
	return this;
},

after: function(source) {
	var node,
		nextSibling;
	source = itcast(source);
	this.each(function(dom, i) {
		nextSibling = dom.nextSibling;
		source.each(function(elem) {
			node = i === 0 ? elem : elem.cloneNode(true);
			// 获取dom的父节点，调用insertBefore方法在dom前添加新的子节点node
			dom.parentNode.insertBefore(node, nextSibling);
		});
	});
	return this;
}

unique: function(arr) {
	// 存储去重后的结果
	var ret = [];
	// 遍历原数组arr
	itcast.each(arr, function() {
		// 判断ret是否存在当前遍历到的元素
		// 如果不存在将其添加到ret中
		if(ret.indexOf(this) === -1) ret.push(this);
	});
	// 将ret返回
	return ret;
}

// 兼容数组对象的indexOf方法
(function() {
	// 如果浏览器不支持indexOf方法
	// 那么就给数组对象的原型添加indexOf方法
	if(!Array.prototype.indexOf){
		Array.prototype.indexOf = function(val) {
			// 遍历this
			for(var i = 0,l = this.length; i < l; i++){
				// 如果遍历到的当前元素和val相同，返回其索引值
				if(this[i] == val) return i;
			}
			// 那么表示不存在指定参数值就返回 -1
			return -1;
		};
	}
}());

prev:function(){
	//存储所有dom的前一个兄弟元素
	var ret=[];
	//遍历this上的所有dom元素
	this.each(function(){
		//在遍历当前dom元素之前所有的兄弟元素
		for(var node=this.previousSibling;node;node=node.previousSibling){
			//如果当前兄弟节点为元素节点
			//即为结果,将其添加到ret内,并结束循环
			if(node.nodeType===1){
				ret.push(node);
				break;
			}
		}
	});
	//将ret转换成itcast对象,返回
	return itcast(ret);
},

prevAll:function(){
	var ret=[];
	this.each(function() {
		for(var node=this.previousSibling;node;node=node.previousSibling){
			if(node.nodeType===1) ret.push(node);
		}

	});
	return itcast(itcast.unique(ret));
}