## 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權威指南 ~~~