## 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權威指南
~~~
- 代碼片段
- 1.格式化銀行卡
- 2.將HTML內容保存為圖片
- 3.mui代碼片段
- 1.粘貼內容
- 2.禁止tab左右滑動
- 3.判斷網絡狀態
- 4.將圖片壓縮轉換為base64
- 5.雙擊退出應用
- 6.二維碼掃描
- 7.支持豎屏
- 4.時間戳格式化
- 5.字符串操作
- 1.去除字符串中的空格
- 2.計算字符串的長度
- 3.字符串轉化
- 4. 復制字符串
- 5.替換字符串
- 6.字符串替換為 *
- 7.字符串檢測
- 8 .生成字符串
- 9.檢測一個字符在字符串中出現的次數
- 6.檢測密碼的等級強度
- 7.數組操作
- 1.數組去重函數
- 2.打亂數組的順序
- 3.求數組的最大值和最小值
- 4.求一個數組的和 基于數字數組
- 5.求一個數組的平均數 基于數字數組
- 6. 隨機獲取數組中的一個元素
- 7.獲取一個字符在一個字符串中出現的次數
- 8.截取數組長度
- 9.刪除值為'val'的數組元素
- 8.cookie操作
- 9.格式化對象 清除對象中的空和null
- 10. 將數組的人民幣轉換為大寫
- 11.URL操作
- 12.返回兩個數之間的隨機數
- 13.隨機產生顏色值
- 14.獲取到截止時間的時間
- 15.文件類型檢測
- 16.判斷是否是安卓或蘋果
- 17.給文字加下劃線
- 源碼分析
- jQuery 1.2.6 源碼閱讀解讀
- webpack插件總結
- css雜記
- css樣式初始化
- JavaScript深入
- 1.JavaScript深入之從原型到原型鏈
- 2.JavaScript深入之詞法作用域和動態作用域
- 3.JavaScript深入之執行上下文棧