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

JQuery模块分析及其实现第四部分属性部分功能及实现,接第三部分!

appendTo 方法

  1. 功能:将结果集中的元素 追加到指定的 dom 元素上.
  2. 语法:<target对象>.appendTo(target)
  3. 实现思路
    • 定义 appendTo 方法,声明一个形参 target .追加到目标 dom 元素
      • 选择器
      • dom 元素
      • dom 数组
    • 为了操作方便,将 target 类型统一为 itcast 对象,去 itcast 函数走一圈,出来就是 itcast 对象.
    • 遍历 this 上的每一个 dom 元素,再遍历 target 上的每一个 dom 元素
    • this 上的 dom 元素追加到 target
    • 注意: 在追加节点时,如果遍历的是第一个目标 dom 元素,不需要拷贝节点;否则要深拷贝节点,并将上述得到的节点储存到 ret
    • ret 数组转换成 itcast 对象,作为 appendTo 方法的返回值
      • 如果不这样做的话,就会在添加样式时,只有没拷贝的节点有样式
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 方法

  1. 语法: <itcast对象>.append(source) ;
  2. 功能: 将 source 上的所有 dom 元素,追加到 itcast 对象上
  3. 实现思路
    • 统一 source 类型,为 itcast 对象.
    • source.appendTo(this)
    • return this;
append: function(source) {
	//统一source类型,为itcast对象
	source = itcast(source);
	source.appendTo(this);
	return this;
},

prependTo 方法

  1. 语法: <itcast对象>.prependTo(target);
  2. 功能:将 itcast 对象上的每一个 dom 元素,追加到 target 最前边 insertBefore
  3. 实现思路
    • 统一 target 类型,为 itcast 对象
    • 定义 node 变量,临时存储被追加的结点.定义 ret 数组,存储所有被追加的节点
    • 先遍历 target 上的每一个 dom 元素
    • 定义变量 firstChild ,临时存储当前目标 dom 元素的第一个子节点,再遍历 this 上的每一个 dom 元素
    • 判断当前遍历的 dom 是否为 target 上的第一个 dom 元素
    • 如果为真,此时不需要克隆节点
    • 否则,要深克隆节点
    • 将上述的到的节点, pushret
    • 调用 insertBefore 方法追加节点,此时第一个参数为追加新的节点,第二个参数为 firstChild ,在 firstChild 之前追加新节点.
    • 两层循环结束,操作完成
    • ret 转换成 itcast 对象,作为 prependTo 方法的返回值,实现链式编程.
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 方法

  1. 语法: <itcast对象>.prepend(source);
  2. 功能:把 source 上的所有的 dom 元素,添加到 this 上的最前边
  3. 实现思路:
    • 统一 source 类型,为 itcast 对象
    • 通过 source 调用 prependTo 方法,将 source 上的所有 dom 添加到 this 上的最前边
    • return this 实现链式编程
prepend: function(source) {
	source = itcast(source);
	source.prependTo(this);
	return this;
}

next 方法

  1. 功能:获取 itcast 对象上所有 dom 元素的下一个兄弟元素 (nextSiling)
  2. 语法: <itcast对象>.next(); 返回值类型, itcast 对象
  3. 实现思路
    • 定义 ret 数组,存储所有 dom 的下一个兄弟元素
    • 遍历 this 上的所有 dom 元素
    • 遍历当前 dom 元素下面的所有兄弟,如果类型为 元素,将此元素存储 ret 内,结束循环。
    • 两层循环结束,将 ret 转换成 itcast 对象,作为 next 方法的返回值。
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

  1. 功能:获取 itcast 对象上所有 dom 元素下面的所有兄弟元素 (nextSiling)
  2. 语法: <itcast对象>.nextAll(); 返回值类型, itcast 对象
  3. 实现思路
    • 定义 ret 数组,存储所有 dom 的下一个兄弟元素
    • 遍历 this 上的所有 dom 元素
    • 遍历当前 dom 元素下面的所有兄弟,如果类型为 元素,将此元素存储 ret 内,结束循环。
    • 两层循环结束,将 ret 转换成 itcast 对象,作为 nextAll 方法的返回值。
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 方法

  1. 功能:
  2. 语法: <itcast对象>.before(source)
  3. 实现思路
    • 统一 source 类型为 itcast 对象
    • 遍历 this 上的每一个 dom 元素
    • 再遍历 source 上的每一个 dom 元素
    • 判断当前遍历 thisdom 元素的索引是否为0
    • 如果是 0 ,不需要拷贝节点
    • 否则要深拷贝节点
    • 先拿到当前遍历 thisdom 元素的父节点,调用 insertBefore 方法在其前面添加上面的到的新节点
    • 两层循环完毕,操作完成
    • return this 实现链式编程
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 方法

  1. 功能:
  2. 语法: <itcast对象>.after(source)
  3. 实现思路
    • 定义 nextSiling 变量,存储 dom 元素的下一个兄弟节点
    • 统一 source 类型为 itcast 对象
    • 遍历 this 上的每一个 dom 元素
    • 再遍历source 上的每一个 dom 元素
    • 判断当前遍历 thisdom 元素的索引是否为 0
    • 如果是 0 ,不需要拷贝节点
    • 否则要深拷贝节点
    • 先拿到当前遍历 thisdom 元素的父节点,调用 insertBefore 方法在其前面添加上面的到的新节点
    • 两层循环完毕,操作完成
    • 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 方法

  1. 功能:实现数组元素去重
  2. 语法: var newRet = itcast.unique(arr);
  3. 实现思路
    • 定义空数组对象 ret .存储去重后的元素
    • 遍历原数组,如果当前遍历到的元素在 ret 中不存在,就添加 ret
    • 循环结束, ret 存储的就是去重后的元素
    • 返回 ret
  4. 兼容IE8 indexof 方法
    • 首先判断当前浏览器是否支持 indexof 方法
    • 如果不支持就给数组对象的原型添加 indexof 方法
    • 遍历 this 上的所有元素
    • 如果遍历到的当前元素和指定参数值相同就直接返回其索引值.结束循环
    • 如果在整个上述循环都没有返回值,那么表示不存在指定参数值就返回 -1 .
unique: function(arr) {
	// 存储去重后的结果
	var ret = [];
	// 遍历原数组arr
	itcast.each(arr, function() {
		// 判断ret是否存在当前遍历到的元素
		// 如果不存在将其添加到ret中
		if(ret.indexOf(this) === -1) ret.push(this);
	});
	// 将ret返回
	return ret;
}

兼容 IE8 indexof 方法

// 兼容数组对象的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 方法

  1. 功能: 获取 itcast 对象上所有 dom 元素的前一个兄弟元素 (previousSibling)
  2. 语法: <itcast对象>.prev(); 返回值类型: itcast对象
  3. 实现思路
    • 定义 ret 数组,存储所有 dom 的前一个兄弟元素
    • 遍历 this 上的所有 dom 元素
    • 遍历当前 dom 元素之前的所有兄弟,如果类型为元素,将此元素存储 ret 内,结束循环
    • 两层循环结束,将 ret 转换成 itcast 对象,作为 next 方法的返回值
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 方法

  1. 功能: 获取 itcast 对象上所有 dom 元素的之前的所有兄弟元素 (nextSibling)
  2. 语法: <itcast对象>.nextAll(); 返回值类型: itcast对象
  3. 实现思路
    • 定义 ret数组 ,存储所有 dom 之前的所有兄弟元素
    • 遍历 this 上的所有 dom元素
    • 遍历当前 dom 元素之前的所有兄弟,如果类型为元素,将此元素存储 ret 内,结束循环
    • 两层循环结束,将 ret 转换成 itcast对象 ,作为 nextAll 方法的返回值
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));
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏水击三千

JavaScript基本类型与引用类型(二)

前文已经对基本类型和引用类型作了简单的介绍,本文将进一步介绍基本类型和引用类型。 基本包装类型   为了方便操作基本类型的值,JavaScript提供了特殊的引...

2336
来自专栏柠檬先生

Java 流程控制

Java 主要的流程控制语句有3钟,选择语句,循环语句,跳转语句。 Java 中的作用域,是一对用花括号括起来的,块定义了变量使用的范围,   各个块之间可以嵌...

2117
来自专栏Jed的技术阶梯

详解 Java 对象与内存控制(下)

以上程序说明:sub、mid和base这3个变量指向的Java对象拥有3个count实例变量,也就是说,需要3块内存来存储它们 当Sub sub = new ...

1221
来自专栏python3

python 字符串常用操作

字符串是 Python 中最常用的数据类型。我们可以使用引号('或")来创建字符串。

851
来自专栏Python研发

javascript作用域

javascript的作用域一直以来是前端开发中比较难理解的知识点,对于javascript的作用域主要记住几句话.

912
来自专栏玄魂工作室

Python黑帽编程2.3 字符串、列表、元组、字典和集合

本节要介绍的是Python里面常用的几种数据结构。通常情况下,声明一个变量只保存一个值是远远不够的,我们需要将一组或多组数据进行存储、查询、排序等操作,本节介绍...

3909
来自专栏前端知识分享

第202天:js---原型与原型链终极详解

JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object 、Function 是 JS 自带的函数对象。下面举例说明

1552
来自专栏吾爱乐享

java之学习正则预定义字符类的用法

1335
来自专栏Nian糕的私人厨房

JavaScript 字符串

toString() 方法,返回一个表示该对象的字符串,可以将所有的数据都转换为字符串,但是要排除掉 null 和 undefined

837
来自专栏海说

常见正则表达式

正则表达式(RegExp:regular expression):一种用特殊符号编写的模式,描述一个或多个文本字符串。最适合用来搜索和操纵文本字符串。如,检查输...

2100

扫码关注云+社区

领取腾讯云代金券