[jQuery原理] jQueryDOM操作相关方法

最新推荐文章于 2020-09-03 18:46:51 发布

^ω^奋斗小青年

最新推荐文章于 2020-09-03 18:46:51 发布

阅读量3k

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/DeathDomain/article/details/107017464

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

DOM操作相关方法

empty

empty ==> 清空指定元素中的所有内容

empty: function () {
	// 1.遍历指定的元素
	this.each(function (key, value) {
		value.innerHTML = "";
	});
	// 2.方便链式编程
	return this;
},

remove

remove ==> 删除所有的元素或指定元素

remove: function (sele) {
	if(arguments.length === 0){
		// 1.遍历指定的元素
		this.each(function (key, value) {
			// 根据遍历到的元素找到对应的父元素
			var parent = value.parentNode;
			// 通过父元素删除指定的元素
			parent.removeChild(value);
		});
	}else{
		var $this = this;
		// 1.根据传入的选择器找到对应的元素
		$(sele).each(function (key, value) {
			// 2.遍历找到的元素, 获取对应的类型
			var type = value.tagName;
			// 3.遍历指定的元素
			$this.each(function (k, v) {
				// 4.获取指定元素的类型
				var t = v.tagName;
				// 5.判断找到元素的类型和指定元素的类型
				if(t === type){
					// 根据遍历到的元素找到对应的父元素
					var parent = value.parentNode;
					// 通过父元素删除指定的元素
					parent.removeChild(value);
				}
			});
		})
	}
	return this;
},

html

html ==> 设置所有元素的内容，获取第一个元素的内容

html: function (content) {
	if(arguments.length === 0){
		return this[0].innerHTML;
	}else{
		this.each(function (key, value) {
			value.innerHTML = content;
		})
	}
},

text

text ==> 设置所有元素的文本内容，获取所有元素的文本内容

text: function (content) {
	if(arguments.length === 0){
		var res = "";
		this.each(function (key, value) {
			res += value.innerText;
		});
		return res;
	}else{
		this.each(function (key, value) {
			value.innerText = content;
		});
	}
},

appendTo

元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后

特点
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中

appendTo: function (sele) {
	// 1.统一的将传入的数据转换为jQuery对象
	var $target = $(sele);
	var $this = this;
	var res = [];
	// 2.遍历取出所有指定的元素
	$.each($target, function (key, value) {
		// 2.遍历取出所有的元素
		$this.each(function (k, v) {
			// 3.判断当前是否是第0个指定的元素
			if(key === 0){
				// 直接添加
				value.appendChild(v);
				res.push(v);
			}else{
				// 先拷贝再添加
				var temp = v.cloneNode(true);
				value.appendChild(temp);
				res.push(temp);
			}
		});
	});
	// 3.返回所有添加的元素
	return $(res);
},

prependTo

元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面

prependTo: function (sele) {
	// 1.统一的将传入的数据转换为jQuery对象
	var $target = $(sele);
	var $this = this;
	var res = [];
	// 2.遍历取出所有指定的元素
	$.each($target, function (key, value) {
		// 2.遍历取出所有的元素
		$this.each(function (k, v) {
			// 3.判断当前是否是第0个指定的元素
			if(key === 0){
				// 直接添加
				value.insertBefore(v, value.firstChild);
				res.push(v);
			}else{
				// 先拷贝再添加
				var temp = v.cloneNode(true);
				value.insertBefore(temp, value.firstChild);
				res.push(temp);
			}
		});
	});
	// 3.返回所有添加的元素
	return $(res);
},

append

指定元素.append.元素 ==> 将元素添加到指定元素内部的最后

appendTo 和 append 不同点
两者顺序不同
appendTo把字符串当做选择器,append不会把字符串当做选择器
appendTo添加到数组,包装成返回值 append直接返回this(返回值类型不同)

append: function (sele) {
	// 判断传入的参数是否是字符串
	if(njQuery.isString(sele)){
		this[0].innerHTML += sele;
	}else{
		$(sele).appendTo(this);
	}
	return this;
},

prepend

指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面

prependTo 和 prepend 不同点
参数调用不同
字符串处理不同
返回值不同

prepend: function (sele) {
	// 判断传入的参数是否是字符串
	if(njQuery.isString(sele)){
		this[0].innerHTML = sele + this[0].innerHTML;
	}else{
		$(sele).prependTo(this);
	}
	return this;
},

insertBefore

元素.insertBefore.指定元素==〉将元素添加到指定元素外部的前面
指定元素.before.元素==>将元素添加到指定元素外部的前面

insertBefore: function (sele) {
	// 1.统一的将传入的数据转换为jQuery对象
	var $target = $(sele);
	var $this = this;
	var res = [];
	// 2.遍历取出所有指定的元素
	$.each($target, function (key, value) {
		var parent = value.parentNode;
		// 2.遍历取出所有的元素
		$this.each(function (k, v) {
		// 3.判断当前是否是第0个指定的元素
		if(key === 0){
			// 直接添加
			parent.insertBefore(v, value);
			res.push(v);
		}else{
			// 先拷贝再添加
			var temp = v.cloneNode(true);
			parent.insertBefore(temp, value);
			res.push(temp);
		}
		});
	});
	// 3.返回所有添加的元素
	return $(res);
},

insertAfter

元素.insertAfter.指定元素==>将元素添加到指定元素外部的后面
指定元素.after.元素==>将元素添加到指定元素外部的后面

insertAfter: function (sele) {
	// 1.统一的将传入的数据转换为jQuery对象
	var $target = $(sele);
	var $this = this;
	var res = [];
	// 2.遍历取出所有指定的元素
	$.each($target, function (key, value) {
		var parent = value.parentNode;
		var nextNode = $.get_nextsibling(value);
		// 2.遍历取出所有的元素
		$this.each(function (k, v) {
			// 3.判断当前是否是第0个指定的元素
			if(key === 0){
				// 直接添加
				parent.insertBefore(v, nextNode);
				res.push(v);
			}else{
			// 先拷贝再添加
				var temp = v.cloneNode(true);
				parent.insertBefore(temp, nextNode);
				res.push(temp);
			}
		});
	});
	// 3.返回所有添加的元素
	return $(res);
},

replaceAll

元素.replaceAll.指定元素 ==> 替换所有指定元素

replaceAll: function (sele) {
	// 1.统一的将传入的数据转换为jQuery对象
	var $target = $(sele);
	var $this = this;
	var res = [];
	// 2.遍历取出所有指定的元素
	$.each($target, function (key, value) {
		var parent = value.parentNode;
		// 2.遍历取出所有的元素
		$this.each(function (k, v) {
			// 3.判断当前是否是第0个指定的元素
			if(key === 0){
				// 1.将元素插入到指定元素的前面
				$(v).insertBefore(value);
				// 2.将指定元素删除
				$(value).remove();
				res.push(v);
			}else{
				// 先拷贝再添加
				var temp = v.cloneNode(true);
				// 1.将元素插入到指定元素的前面
				$(temp).insertBefore(value);
				// 2.将指定元素删除
				$(value).remove();
				res.push(temp);
			}
		});
	});
	// 3.返回所有添加的元素
	return $(res);
}

筛选相关方法

返回被选元素的后一个同级元素

next: function (sele) {
	var res = [];
	if(arguments.length === 0){
		// 返回所有找到的
		this.each(function (key, value) {
			var temp = njQuery.get_nextsibling(value);
			if(temp != null){
				res.push(temp);
			}
		});
	}else{
		// 返回指定找到的
		this.each(function (key, value) {
			var temp = njQuery.get_nextsibling(value)
			$(sele).each(function (k, v) {
				if(v == null || v !== temp) return true;
				res.push(v);
			});
		});	
	}
	return $(res);
},

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的

prev: function (sele) {
	var res = [];
	if(arguments.length === 0){
		this.each(function (key, value) {
			var temp = njQuery.get_previoussibling(value);
			if(temp == null) return true;
			res.push(temp);
		});
	}else{
		this.each(function (key, value) {
			var temp = njQuery.get_previoussibling(value);
			$(sele).each(function (k, v) {
				if(v == null || temp !== v) return true;
				res.push(v);
			})
		});
	}
	return $(res);
}

^ω^奋斗小青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[jQuery原理] jQueryDOM操作相关方法

DOM操作相关方法emptyremovehtmltextappendToprependToappendprependinsertBeforeinsertAfterreplaceAll筛选相关方法nextprev
复制链接

扫一扫