莘县网站制作,电子商务网站,福州短视频seo获客,可以做公众号的网站每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom
赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子,
可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子,
不同阶段对…每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom
赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子,
可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子,
不同阶段对前端有不同的理解,作为一名程序员,本就是没有尽头,静下心来,和别人比一比,多借鉴前人的发展,取其精
华去其糟粕,不要闭门造车,做一名不断学习的前端开发者
回头看来jq已经逐渐在不断的学习中揭开了他神秘的面纱,让我想看看美丽的$是怎么出生的
jQuery只有一个全局变量$ 那一定是挂载在window上面的
(function (window){var jQuery function (selects) {}window.$ jQuery;}
)(window)
可爱的$就指向JQuery的实例了当我们$(#id)就相当于 jQuery(#id)
那么现在就要处理获取到的dom元素 (function (window) {function jQuery(selects) {return new jQuery.fn.init(selects)}jQuery.fn {} //创建挂载函数jQuery.fn.init function (selects) {var dom [].slice.call(document.querySelectorAll(selects))var i 0;var len dom ? dom.length : 0for (i 0; i len; i ) {this[i] dom[i]}this.length lenthis.selects selects || ;}window.$ jQuery; //注意这里jQuery指向window
})(window)
现在我们就已经将$()里面的dom捕捉到了,请转化成为数组,利于后面的操作
下一步就是在原型链上面创建jquery的方法了
(function (window){var jQuery function (selector){return new jQuery.fn.init(selector) //这里必须构造函数要不放怎么去获取节点信息}jQuery.fn {val(){return this[0].innerHTML}//.......等等方法}var int jQuery.fn.init function (selector) {var dom [].slice.call(document.querySelectorAll(selector)) var i,len dom?dom.length:0for (i 0; i len; i ) {this[i] dom[i]}console.log(len,selector);this.length len;this.selector selector || }int.prototype jQuery.fnwindow.$ jQuery;
})(window)
我们实现了类似jq的val()方法了
试验一下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitletitle/title
/headbodypjquery test 1/pscript src./MYjquery.js/scriptscript//插件拓展$.fn.getNodeName function () {return this[0].tagName;}/scriptscriptvar p $(p);console.log(p的标签名为${p.getNodeName()}); //获取节点名称console.log(p.val());/script
/body/html 最关键的一点使用
jQuery.fn的方式利于拓展,上面代码体现了这一点,假如我们现在jq上面创建自己的方法,就把方法挂在jQuery.fn上面相当于在原型上面加方法这里可以看到jquery一切都是基于原型,所以呀,讲原型,我用jquery来说明,感受到原型的强大
本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?idh22k11jtitle原型 - 实现自己的jQuery
