jQuery 1.2.6 源码阅读解读

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权威指南