jQuery DOM操作

empty/remove

<!--* @Author: 码小余* @Date: 2020-06-24 16:07:12* @LastEditTime: 2020-06-24 17:06:02* @FilePath: \代码\jQuery原理\07-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>07-jQueryDOM操作相关方法</title><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:1、empty ==> 清空指定元素中的所有内容2、remove ==> 删除所有的元素或指定元素*/var btn = document.getElementsByTagName("button")[0];btn.addEventListener("click", function () {//   $("div").empty();//   console.log($("div").empty());//   $("div").remove();// console.log($("div").remove());$("div").remove(".box");});});</script></head><body><button>调用remove</button><div>我是div<p>我是段落</p></div><div class="box">我是div<p>我是段落</p></div><p class="box"></p></body>
</html>

empty/remove 实现原理

empty: function () {// 1. 遍历指定的元素this.each(function (key, value) {value.innerHTML = "";});// 方便链式编程return this;
},
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 (key, value) {// 4. 获取指定元素的类型var t = value.tagName;// 5. 判断找到的元素的类型和指定元素的类型是否相等if (t === type) {// 根据遍历到的元素找到对应的父元素var parent = value.parentNode;// 通过父元素删除指定的元素parent.removeChild(value);}});});}return this;
},

html/text

<!--* @Author: 码小余* @Date: 2020-06-24 17:14:52* @LastEditTime: 2020-06-24 17:29:31* @FilePath: \代码\jQuery原理\08-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>08-jQueryDOM操作相关方法</title><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:3、html ==> 设置所有元素的内容，获取第一个元素的内容4、text ==> 设置所有元素的文本内容，获取所有元素的文本内容*/var btn = document.getElementsByTagName("button")[0];btn.addEventListener("click", function () {var $div = $("div");//   console.log($div.html());//   $div.html("123");//   $div.html("<div><span>我是span</span></div>");//   console.log($div.text());//   $div.text("123");$div.text("<div><span>我是span</span></div>");});});</script></head><body><button>调用text</button><div>我是div1<p>我是段落1</p></div><div class="box">我是div2<p>我是段落2</p></div></body>
</html>

html/text实现原理

html: function (content) {if (arguments.length === 0) {return this[0];} else {this.each(function (key, value) {value.innerHTML = content;});}
},
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

<!--* @Author: 码小余* @Date: 2020-06-24 17:52:32* @LastEditTime: 2020-06-25 09:03:56* @FilePath: \代码\jQuery原理\09-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后*/var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {/*特点:1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中*/// 接收一个字符串 $(".item"); ==> jQuery// $("p").appendTo(".item");// 接收一个jQuery对象  $($("div")); ==> jQuery// $("p").appendTo($("div"));// 接收一个DOM元素 $(divs);  ==> jQuery// var divs = document.querySelectorAll("div");// $("p").appendTo(divs);console.log($("p").appendTo(".item"));};});</script></head><body><button>调用appendTo</button><p>我是段落</p><p>我是段落</p><div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li></div><div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li></div></body>
</html>

appendTo实现原理

appendTo: function (sele) {// 1. 统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2. 遍历取出所有指定的元素$.each($target, function (key, value) {$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

<!--* @Author: 码小余* @Date: 2020-06-25 09:11:01* @LastEditTime: 2020-06-25 09:23:03* @FilePath: \代码\jQuery原理\10-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>10-jQueryDOM操作相关方法</title><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面*/var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {// 接收一个字符串 $(".item"); ==> jQuery//   $("p").prependTo(".item");// 接收一个jQuery对象  $($("div")); ==> jQuery// $("p").prependTo($("div"));// 接收一个DOM元素 $(divs);  ==> jQuery// var divs = document.querySelectorAll("div");// $("p").prependTo(divs);console.log($("p").prependTo(".item"));};// function prependTo(source, target) {//   /*// 调用者.insertBefore(插入的元素, 参考的元素);// insertBefore方法, 调用者是谁就会将元素插入到谁里面// *///   target.insertBefore(source, target.firstChild);// }// var p = document.querySelector("p");// var div = document.querySelector("div");// prependTo(p, div);});</script></head><body><button>调用prependTo</button><p>我是段落</p><p>我是段落</p><div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li></div><div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li></div></body>
</html>

prependTo实现原理

prependTo: function (sele) {// 1. 统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2. 遍历取出所有指定的元素$.each($target, function (key, value) {$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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11-jQueryDOM操作相关方法</title><!--<script src="js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后*/var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {// 接收一个字符串// $("p").appendTo(".item");$(".item").append("p");// $(".item").append("<span>我是span</span>");// console.log($(".item").append("p"));// 接收一个jQuery对象  $($("div")); ==> jQuery// $("div").append($("p"));// 接收一个DOM元素 $(divs);  ==> jQuery// var divs = document.querySelectorAll("div");// var ps = document.querySelectorAll("p");// $(divs).append(ps);}});</script>
</head>
<body>
<button>调用append</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li>
</div>
<div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li>
</div>
</body>
</html>

append实现原理

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

prepend

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>12-jQueryDOM操作相关方法</title><!--<script src="js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面*/var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {// 接收一个字符串// $("p").prependTo(".item");// $(".item").prepend("p");// $(".item").prepend("<span>我是span</span>");console.log($(".item").prepend("p"));// 接收一个jQuery对象  $($("div")); ==> jQuery// $("div").prepend($("p"));// 接收一个DOM元素 $(divs);  ==> jQuery// var divs = document.querySelectorAll("div");// var ps = document.querySelectorAll("p");// $(divs).prepend(ps);}});</script>
</head>
<body>
<button>调用prepend</button>
<p>我是段落</p>
<div class="item"><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li>
</div>
</body>
</html>

prepend实现原理

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

insertBefore

<!--* @Author: 码小余* @Date: 2020-06-25 10:15:53* @LastEditTime: 2020-06-25 10:16:13* @FilePath: \代码\jQuery原理\13-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>13-jQueryDOM操作相关方法</title><!--<script src="js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.2.0.js"></script><script>$(function () {/*DOM 操作:元素.insertBefore.指定元素  ==>将元素添加到指定元素外部的前面*/var btn = document.getElementsByTagName("button")[0];btn.onclick = function () {// 接收一个字符串 $(".item"); ==> jQuery// $("p").prependTo(".item");$("p").insertBefore(".item");// 接收一个jQuery对象  $($("div")); ==> jQuery// $("p").insertBefore($("div"));// 接收一个DOM元素 $(divs);  ==> jQuery// var divs = document.querySelectorAll("div");// $("p").insertBefore(divs);console.log($("p").insertBefore(".item"));};function insertBefore(source, target) {/*调用者.insertBefore(插入的元素, 参考的元素);insertBefore方法, 调用者是谁就会将元素插入到谁里面*/// 1.拿到指定元素的父元素var parent = target.parentNode;// 2.利用指定元素的父元素来调用insertBefore方法parent.insertBefore(source, target);}var p = document.querySelector("p");var div = document.querySelector("div");// insertBefore(p, div);});</script></head><body><button>调用insertBefore</button><div class="item"><p>我是段落</p><li>1我是第1个li</li><li>1我是第2个li</li><li>1我是第3个li</li></div></body>
</html>

insertBefore实现原理

insertBefore: function (sele) {// 1. 统一的将传入的数据转换为jQuery对象var $target = $(sele);var $this = this;var res = [];// 2. 遍历取出所有指定的元素$.each($target, function (key, value) {$this.each(function (k, v) {// 找到指定元素的父元素var parent = value.parentNode;// 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);
},

jQuery原理第三天相关推荐

JavaScript——JQuery原理介绍及模拟
翻了半天终于看到一个讲jQuery原理比较不错的了,具体详细内容可以看阮一峰的,写的也不错== ==================================================== ...
计算机组原理ppt,计算机组原理第三章.ppt
计算机组原理第三章计算机组成原理毛典辉北京工商大学计算机与信息工程学院 Email: amaode@ 进一步结论: 当最高有效位产生进位而符号位无进位时,产生上溢: 当最高有效位无进位而符号位有 ...
jQuery 原理的模拟代码 -4 重要的扩展函数 extend
在上两篇文章中,我们看到每次要通过 jQuery 的原型增加共享方法的时候,都需要通过 jQuery.fn 一个个进行扩展,非常麻烦,jQuery.fn.extend 提供了一个扩展机制,可以方便我们 ...
jQuery 3教程(三)：jQuery集合
原文地址:jQuery 3教程(三):jQuery集合 Introduction jQuery选择器选择出来的结果很多时候是一个DOM元素集而非单个元素,jQuery可以灵活的访问和修改DOM元素集, ...
jQuery原理第五天
addClass <!--* @Author: 码小余* @Date: 2020-06-27 08:23:36* @LastEditTime: 2020-06-27 08:26:43* @Fil ...
jQuery原理第四天
insertAfter 实现insertAfter需要用到原生JavaScript的nextSibling属性元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面 in ...
jQuery原理第一天
jQuery原理 jQuery的基本结构 jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 jQuery如何让外界访问内部定义的局部变量 window ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
【es】es 分布式一致性原理剖析(三)-Data篇
1.概述转载:Elasticsearch分布式一致性原理剖析(三)-Data篇前言 "Elasticsearch分布式一致性原理剖析"系列将会对Elasticsearch的分布 ...

jQuery原理第三天

jQuery DOM操作

empty/remove

html/text

appendTo

prependTo

append

prepend

insertBefore

jQuery原理第三天相关推荐

最新文章

热门文章