jQuery 1.2.6 源码阅读解读
1.初始化方法
| (function(){ |
| |
| var jQuery=window.jQuery=window.$=function(){ |
| return new jQuery.fn.init(); |
| }; |
| |
| jQuery.fn=jQuery.prototype={ |
| init:function(){ |
| return this; |
| }, |
| jQuery:'1.0.0', |
| length:0, |
| size:function(){ |
| return this.length; |
| } |
| }; |
| jQuery.fn.init.prototype=jQuery.fn; |
| |
| jQuery.extend=function.fn.extend=function(){}; |
| |
| jQuery.extend({}); |
| |
| jQuery.fn.extend({}); |
| |
| }); |
2.实现选择器
| (function(){ |
| |
| var jQuery=window.jQuery=window.$=function(selector){ |
| return new jQuery.fn.init(selector); |
| }; |
| |
| jQuery.fn=jQuery.prototype={ |
| init:function(selector){ |
| var elements=document.getElementsByTagName(selector); |
| Array.prototype.push.apply(this.elements); |
| return this; |
| }, |
| jQuery:'1.0.0', |
| length:0, |
| size:function(){ |
| return this.length; |
| } |
| }; |
| jQuery.fn.init.prototype=jQuery.fn; |
| |
| jQuery.extend=function.fn.extend=function(){}; |
| |
| jQuery.extend({}); |
| |
| jQuery.fn.extend({}); |
| |
| }); |
3.继承
| (function(){ |
| |
| var jQuery=window.jQuery=window.$=function(selector){ |
| return new jQuery.fn.init(selector); |
| }; |
| |
| jQuery.fn=jQuery.prototype={ |
| init:function(selector){ |
| var elements=document.getElementsByTagName(selector); |
| Array.prototype.push.apply(this.elements); |
| return this; |
| }, |
| jQuery:'1.0.0', |
| length:0, |
| size:function(){ |
| return this.length; |
| } |
| }; |
| jQuery.fn.init.prototype=jQuery.fn; |
| |
| jQuery.extend=function.fn.extend=function(){ |
| var o=arguments[0]; |
| for (var p in o) { |
| this[p]=o[p]; |
| } |
| }; |
| |
| jQuery.extend({}); |
| |
| jQuery.fn.extend({}); |
| |
| }); |
4.添加静态方法
| (function(){ |
| |
| var _$=window.$; |
| var _jQuery=window.jQuery; |
| |
| var jQuery=window.jQuery=window.$=function(selector){ |
| return new jQuery.fn.init(selector); |
| }; |
| |
| jQuery.fn=jQuery.prototype={ |
| init:function(selector){ |
| var elements=document.getElementsByTagName(selector); |
| Array.prototype.push.apply(this.elements); |
| return this; |
| }, |
| jQuery:'1.0.0', |
| length:0, |
| size:function(){ |
| return this.length; |
| } |
| }; |
| jQuery.fn.init.prototype=jQuery.fn; |
| |
| jQuery.extend=function.fn.extend=function(){ |
| var o=arguments[0]; |
| for (var p in o) { |
| this[p]=o[p]; |
| } |
| }; |
| |
| jQuery.extend({ |
| trim:function(text){ |
| return (text || '').replace(/^\s+|\s+$/g,''); |
| }, |
| noConflict:function(){ |
| window.$=_$; |
| window.jQuery=_jQuery; |
| return jQuery; |
| } |
| }); |
| |
| jQuery.fn.extend({}); |
| |
| }); |
5.添加实例方法
| (function(){ |
| |
| var _$=window.$; |
| var _jQuery=window.jQuery; |
| |
| var jQuery=window.jQuery=window.$=function(selector){ |
| return new jQuery.fn.init(selector); |
| }; |
| |
| jQuery.fn=jQuery.prototype={ |
| init:function(selector){ |
| var elements=document.getElementsByTagName(selector); |
| Array.prototype.push.apply(this.elements); |
| return this; |
| }, |
| jQuery:'1.0.0', |
| length:0, |
| size:function(){ |
| return this.length; |
| } |
| }; |
| jQuery.fn.init.prototype=jQuery.fn; |
| |
| jQuery.extend=function.fn.extend=function(){ |
| var o=arguments[0]; |
| for (var p in o) { |
| this[p]=o[p]; |
| } |
| }; |
| |
| jQuery.extend({ |
| trim:function(text){ |
| return (text || '').replace(/^\s+|\s+$/g,''); |
| }, |
| noConflict:function(){ |
| window.$=_$; |
| window.jQuery=_jQuery; |
| return jQuery; |
| } |
| }); |
| |
| jQuery.fn.extend({ |
| get:function(num){ |
| return this[num]; |
| }, |
| each:function(fn){ |
| for (var i=0;i<this.length;i++) { |
| fn(i,this[i]); |
| } |
| }, |
| css:function(){ |
| var l=arguments.length; |
| if(l==1){ |
| return this[0].style[arguments[0]]; |
| }else{ |
| var name=arguments[0]; |
| var value=arguments[1]; |
| this.each(function(index,ele){ |
| ele.style[name]=value; |
| }) |
| } |
| } |
| }); |
| |
| }); |
6.链式操作
| (function(){ |
| |
| var _$=window.$; |
| var _jQuery=window.jQuery; |
| |
| var jQuery=window.jQuery=window.$=function(selector){ |
| return new jQuery.fn.init(selector); |
| }; |
| |
| jQuery.fn=jQuery.prototype={ |
| init:function(selector){ |
| var elements=document.getElementsByTagName(selector); |
| Array.prototype.push.apply(this.elements); |
| return this; |
| }, |
| jQuery:'1.0.0', |
| length:0, |
| size:function(){ |
| return this.length; |
| } |
| }; |
| jQuery.fn.init.prototype=jQuery.fn; |
| |
| jQuery.extend=function.fn.extend=function(){ |
| var o=arguments[0]; |
| for (var p in o) { |
| this[p]=o[p]; |
| } |
| }; |
| |
| jQuery.extend({ |
| trim:function(text){ |
| return (text || '').replace(/^\s+|\s+$/g,''); |
| }, |
| noConflict:function(){ |
| window.$=_$; |
| window.jQuery=_jQuery; |
| return jQuery; |
| } |
| }); |
| |
| jQuery.fn.extend({ |
| get:function(num){ |
| return this[num]; |
| }, |
| each:function(fn){ |
| for (var i=0;i<this.length;i++) { |
| fn(i,this[i]); |
| } |
| return this; |
| }, |
| css:function(){ |
| var l=arguments.length; |
| if(l==1){ |
| return this[0].style[arguments[0]]; |
| }else{ |
| var name=arguments[0]; |
| var value=arguments[1]; |
| this.each(function(index,ele){ |
| ele.style[name]=value; |
| }) |
| } |
| return this; |
| } |
| }); |
| |
| }); |
7.后续学习
| * 1.面向对象JavaScript |
| * 2.jQuery1.2.6源码 |
| * 3.常用的JavaScript的设计模式 |
| * 4.高性能JavaScript |
| * 5.js权威指南 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步