## 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深入之执行上下文栈