jQuery原理第四天

insertAfter

实现insertAfter需要用到原生JavaScript的nextSibling属性

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

insertAfter实现原理

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

function replaceAll(source, target) {// 1.将元素插入到指定元素的前面$(source).insertBefore(target);// 2.将指定元素删除$(target).remove();
}
var p = document.querySelector("p");
var li = document.querySelector("li");
// replaceAll(p, li);

replaceAll实现原理

replaceAll: 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) {// 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);
},

attr

<!--* @Author: 码小余* @Date: 2020-06-26 10:55:03* @LastEditTime: 2020-06-26 10:58:53* @FilePath: \代码\jQuery原理\15-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>15-jQuery属性操作相关方法</title><script src="js/njQuery-1.3.0.js"></script><script>$(function () {/*1.attr(): 设置或者获取元素的属性节点值*/// 传递一个参数, 返回第一个元素属性节点的值// console.log($("span").attr("class"));// 传递两个参数, 代表设置所有元素属性节点的值// 并且返回值就是方法调用者// console.log($("span").attr("class", "abc"));// 传递一个对象, 代表批量设置所有元素属性节点的值$("span").attr({class: "123",name: "888",});});</script></head><body><span class="span1" name="it666"></span><span class="span2" name="lnj"></span></body>
</html>

attr实现原理

attr: function (attr, value) {// 1. 判断是否是字符串if (njQuery.isString(attr)) {// 判断是一个字符串还是两个字符串if (arguments.length === 1) {return this[0].getAttribute(attr);} else {this.each(function (key, ele) {ele.setAttribute(attr, value);});}}// 2. 判断是否是对象else if (njQuery.isObject(attr)) {var $this = this;// 遍历取出所有属性节点的名称和对应的值$.each(attr, function (key, value) {// 遍历取出所有的元素$this.each(function (k, ele) {ele.setAttribute(key, value);});});}return this;
},

prop

<!--* @Author: 码小余* @Date: 2020-06-26 11:05:25* @LastEditTime: 2020-06-26 12:32:24* @FilePath: \代码\jQuery原理\16-jQuery吧属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>16-jQuery属性操作相关方法</title><!--<script src="js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.3.0.js"></script><script>$(function () {/*2.prop(): 设置或者获取元素的属性值*/// 传递两个参数, 代表设置所有元素属性节点的值// 并且返回值就是方法调用者console.log($("span").prop("abc", "lnj"));// 传递一个参数, 返回第一个元素属性节点的值console.log($("span").prop("abc"));// 传递一个对象, 代表批量设置所有元素属性节点的值$("span").prop({aaa: "111",bbb: "222",});});</script></head><body><span class="span1" name="it666"></span><span class="span2" name="lnj"></span></body>
</html>

prop实现原理

prop: function (attr, value) {// 1. 判断是否是字符串if (njQuery.isString(attr)) {// 判断是一个字符串还是两个字符串if (arguments.length === 1) {return this[0][attr];} else {this.each(function (key, ele) {ele[attr] = value;});}}// 2. 判断是否是对象else if (njQuery.isObject(attr)) {var $this = this;// 遍历取出所有属性节点的名称和对应的值$.each(attr, function (key, value) {// 遍历取出所有的元素$this.each(function (k, ele) {ele[key] = value;});});}return this;
},

css

<!--* @Author: 码小余* @Date: 2020-06-26 11:22:58* @LastEditTime: 2020-06-26 11:23:55* @FilePath: \代码\jQuery原理\17-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>17-jQuery属性操作相关方法</title><!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.3.0.js"></script><style>* {margin: 0;padding: 0;}.box1 {width: 100px;height: 100px;background: red;margin-bottom: 10px;}.box2 {width: 200px;height: 200px;background: blue;margin-bottom: 10px;}</style><script>$(function () {/*3.css(): 设置获取样式*/// 传递一个参数, 返回第一个元素指定的样式// console.log($("div").css("height"));// 传递两个参数, 代表设置所有元素样式// 并且返回值就是方法调用者// console.log($("div").css("height", "50px"));// 传递一个对象, 代表批量设置所有元素样式$("div").css({height: "50px",backgroundColor: "pink",});// 获取样式// var div = document.querySelector("div");// console.log(window.getComputedStyle(div)["height"]);// console.log(div.currentStyle["height"]);// 设置样式// div.style["height"] = "200px";});</script></head><body><div class="box1">div1</div><div class="box2">div2</div></body>
</html>

css实现原理

css: function (attr, value) {// 1. 判断是否是字符串if (njQuery.isString(attr)) {// 判断是一个字符串还是两个字符串if (arguments.length === 1) {return njQuery.getStyle(this[0], attr);} else {this.each(function (key, ele) {ele.style[attr] = value;});}}// 2. 判断是否是对象else if (njQuery.isObject(attr)) {var $this = this;// 遍历取出所有属性节点的名称和对应的值$.each(attr, function (key, value) {// 遍历取出所有的元素$this.each(function (k, ele) {ele.style[key] = value;});});}return this;
},

val

<!--* @Author: 码小余* @Date: 2020-06-26 11:36:18* @LastEditTime: 2020-06-26 11:36:19* @FilePath: \代码\jQuery原理\18-jQuery 属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>18-jQuery属性操作相关方法</title><!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.3.0.js"></script><script>$(function () {/*4.val(): 获取设置value的值*/// 不传递参数, 返回第一个元素指定的样式// console.log($('input').val());// 传递两个参数, 代表设置所有元素样式// 并且返回值就是方法调用者console.log($("input").val("新设置的"));/*var input = document.querySelector("input");// input.setAttribute("value", "123456");var btn = document.querySelector("button");btn.onclick = function (ev) {// console.log(input.getAttribute("value"));// console.log($('input').val());console.log(input.value);}*/});</script></head><body><button>获取</button><input type="text" value="默认值1" /><input type="text" value="默认值2" /></body>
</html>

val实现原理

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

hasClass

<!--* @Author: 码小余* @Date: 2020-06-26 12:06:00* @LastEditTime: 2020-06-26 12:08:32* @FilePath: \代码\jQuery原理\19-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>19-jQuery属性操作相关方法</title><!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>--><script src="js/njQuery-1.3.0.js"></script><script>$(function () {/*5.hasClass(): 判断元素中是否包含指定类*/// 传递参数, 只要调用者其中一个包含指定类就返回true,否则返回false// console.log($("div").hasClass("cc"));// console.log($("div").hasClass("abc"));// console.log($("div").hasClass("bb"));// 没有传递参数, 返回falseconsole.log($("div").hasClass());/*var div = document.querySelector("div");// console.log(div.getAttribute("class"));// console.log(div.className);// 1.获取元素中class保存的值var className = " "+div.className+" ";// 2.通过indexOf判断是否包含指定的字符串// console.log(className.indexOf("abc") != -1);// console.log(className.indexOf("bb"));// console.log(className.indexOf(" "+"bb"+" "));console.log(className.indexOf(" "+"dd"+" "));*/});</script></head><body><div class="aabb cc dd"></div><div class="aabb bb"></div></body>
</html>

hasClass实现原理

hasClass: function (name) {var flag = false;if (arguments.length === 0) {return flag;} else {this.each(function (key, ele) {// 1.获取元素中class保存的值var className = " " + ele.className + " ";// 2.给指定字符串的前后也加上空格name = " " + name + " ";// 3.通过indexOf判断是否包含指定的字符串if (className.indexOf(name) != -1) {flag = true;return false;}});return flag;}
},

jQuery原理第四天相关推荐

JavaScript——JQuery原理介绍及模拟
翻了半天终于看到一个讲jQuery原理比较不错的了,具体详细内容可以看阮一峰的,写的也不错== ==================================================== ...
jQuery 原理的模拟代码 -4 重要的扩展函数 extend
在上两篇文章中,我们看到每次要通过 jQuery 的原型增加共享方法的时候,都需要通过 jQuery.fn 一个个进行扩展,非常麻烦,jQuery.fn.extend 提供了一个扩展机制,可以方便我们 ...
微型计算机原理答案第四章,微机原理第四章习题答案.doc
微机原理第四章习题答案 1．8086语言指令的寻址方式有哪几类?用哪一种寻址方式的指令执行速度最快? 答:数据操作数的寻址方式有七种,分别为:立即寻址,寄存器寻址,直接寻址,寄存器间接寻址,寄存器相对 ...
化工原理第四版课后习题答案
化工原理第四版课后习题答案
计算机网络云南大学实验四,云南大学软件学计算机网络原理实验四.doc
云南大学软件学计算机网络原理实验四实验四.web服务器套接字编程实验指导 1．实验目的: 编写一个WEB服务器程序,可以接受来自浏览器的访问,并传输页面(包含多个对象)到浏览器.掌握Socket编程 ...
jQuery原理第五天
addClass <!--* @Author: 码小余* @Date: 2020-06-27 08:23:36* @LastEditTime: 2020-06-27 08:26:43* @Fil ...
jQuery原理第三天
jQuery DOM操作 empty/remove <!--* @Author: 码小余* @Date: 2020-06-24 16:07:12* @LastEditTime: 2020-06- ...
jQuery原理第一天
jQuery原理 jQuery的基本结构 jQuery的本质是一个闭包 jQuery为什么要使用闭包来实现? 为了避免多个框架的冲突 jQuery如何让外界访问内部定义的局部变量 window ...
jQuery——入门（四）JQuery 事件
jQuery--入门(四)JQuery 事件一.事件初探加载文档完成触发: window.onload = function(){} //js $(window).load(function( ...

jQuery原理第四天

insertAfter

replaceAll

attr

css

val

hasClass

jQuery原理第四天相关推荐

最新文章

热门文章