![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery源码
bzcoder
这个作者很懒,什么都没留下…
展开
-
手撸jQuery源码:事件相关方法(on off)
dQuery.prototype.extend({ //on方法需要注意 如果只用数组存储起来而不区分事件类型,那么数组中存储的就全是第一个事件的类型了 //例如click mouseover ... 后续事件类型都会变成click,因此需要分类 on:function(name,callBack){ //1.遍历取出所有元素 this.each(function(key,ele){原创 2020-11-09 13:58:49 · 153 阅读 · 0 评论 -
手撸jQuery源码:dom操作相关方法
dQuery.prototype.extend({ empty:function(){ //遍历找到所有元素 this.each(function(key,value){ value.innerHTML = ""; }); return this; //jQuery链式调用的关键 }, remove:function(s原创 2020-11-09 13:56:51 · 112 阅读 · 0 评论 -
手撸jQuery源码:属性操作相关方法
//属性操作相关方法: dQuery.prototype.extend({ attr:function(attr,value){ //1.判断是否是字符串 if(dQuery.isString(attr)){ //判断是一个字符还是两个字符 if(arguments.length === 1){ return this[0].getA原创 2020-11-09 13:54:38 · 149 阅读 · 0 评论 -
手撸 jQuery源码:原型上的方法(完整版)
dQuery.extend({ //判断方法 isFunction : function(sel){ return typeof sel === "function"; }, //封装判断字符串和代码片段的方法 isString : function(str){ return typeof str === "string"; }, isHtml : function(str){ retur原创 2020-11-09 13:51:57 · 188 阅读 · 0 评论 -
手撸jQuery源码:原型上的方法(map)
map:function(obj,fn){ var res = []; //map中的返回值res //是否是数组 if(dQuery.isArray(obj)){ for(var i=0;i < obj.length;i++){ var temp = fn(obj[i],i); //执行回调函数,结果赋值给temp if(temp){原创 2020-11-02 13:37:11 · 99 阅读 · 0 评论 -
手撸jQuery源码:each()方法完善
官方jQuery的each方法还有一些细节首先,官方jQuery的each方法可在回调函数中传布尔值决定是否跳出循环其次,官方的this是直接指向value的。因此最终的代码实现: $.each(arr,function(key,value){ if(key === 2){ return false; } console.log(key,value); console.log(this) })each原创 2020-11-01 15:36:16 · 138 阅读 · 0 评论 -
手撸jQuery源码:jQuery属性上的方法(续)
jQuery原型上有个each()方法,但其中有个陷阱。我们都知道jQuery中each的用法是$.each(),那原型上的方法又必须要new一个实例对象才能调用,这样的话根据我们在入口函数篇的写法来看,顶多采用().each()才能成功调用,很明显不对劲。仔细一看,jQuery源码中原型上的each好像只是调用了一个each工具方法,再往下划,在extend中找到了each方法的实现。而这个extend就是我们之前∗∗面向对象思想优化代码∗∗篇中实现过的工具方法类嘛。我们只需要将each方法的实现放到e原创 2020-11-01 14:16:08 · 126 阅读 · 0 评论 -
手撸jQuery源码:原型上的属性和方法(get eq first last)
<body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div></body><script src="dquery.js"></script><script> var res = $("div"); console.log(re原创 2020-10-31 13:25:33 · 105 阅读 · 0 评论 -
手撸jQuery源码:函数处理
ready : function(fn){ //判断DOM是否加载完毕 if(document.readyState == "complete"){ fn(); } else if(document.addEventListener){ //高级浏览器 document.addEventListener("DOMContentLoaded",function(){原创 2020-10-30 15:35:25 · 73 阅读 · 0 评论 -
手撸jQuery源码:面向对象思想优化代码
jQuery如此庞大的js库,要系统的管理肯定是要用到面向对象的,不然代码的可阅读性太差,后期维护升级会很不友好。在jQuery中,是将所有的工具方法以对象的形式写在jQuery.extend({…})中调用,我们可以仿照:dQuery.extend({ //判断方法 isFunction : function(sel){ return typeof sel === "function"; }, //封装判断字符串和代码片段的方法原创 2020-10-30 15:32:11 · 120 阅读 · 0 评论 -
手撸jQuery源码:入口函数
html部分代码:<body> <p>1</p> <p>2</p> <p>3</p></body><script src="dquery.js"></script><!-- <script src="jquery1.12.4.js"></script> --><script> //1.传入 空 nul原创 2020-10-29 13:08:49 · 223 阅读 · 0 评论 -
手撸jQuery源码:真伪数组转换
1.真数组转换为伪数组:var arr = [0,1,2,3,4,5];var obj = {};[].push.apply(obj,arr);console.log();其中原理就是,将数组push方法内部的this通过apply指向一个空对象,再加上apply方法本身第二个参数就是数组,更加适用。而后该空数组【】调用push,push将数组arr中的值逐一取出,由于this指向了obj,当然添加到了obj中。 ( push内部实现原理就是用到的this )2.伪数组转换为真数组:我们原创 2020-10-27 15:40:25 · 155 阅读 · 0 评论