jQuery源码学习---简单dom封装（一）

封装简易的dom操作。

一、解决命名空间和变量污染

1.作用域

2.立即执行函数

3.闭包

jQuery是一个类数组对象，里面有各种方法，当然jQuery的dom选择器是sizzle很牛叉，据了解还有更快的dom选择器，实力上去再探索。jQuery使用无new构造函数，可以直接使用$().xx 

(function(window){
	var wdjs=function(selector){
		return new wdjs.fn.init(selector);//返回wdjs原型链init属性的实例
	}
	wdjs.fn=wdjs.prototype={
		init:function(selector){
			return this;//返回指针作用域
		}
	}
	wdjs.fn.init.prototype=wdjs.fn;//将wdjs.prototype原型绑定到init.prototype原型,实现init实例就是wdjs实例


	window.wdjs=window.$=wdjs;//注册全局变量$
})(window)

具体的个人说不清楚，直接搞搞简单的dom选择器，完成个人目标。

二、dom选择器

1.id

2.类（class）

3.属性名（input:['']）

4.标签（a div p）

由于dom选择器有些庞大，个人还未学会正则表达式，所以并未使用querySeletor和querySeletorAll来获取节点，简单搞搞。

(function(window){
	var wdjs=function(selector){
		return new wdjs.fn.init(selector);//返回wdjs原型链init属性的实例
	}
	wdjs.fn=wdjs.prototype={
		init:function(selector){
			var doc=document;
			//消除字符串头尾空白字符
			String.prototype.trim=function(){
				//用replace消除空白字符
				return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');//直接使用trim()不兼容IE
			}
			//IE9-不支持数组的indexOf
			if(!Array.prototype.indexOf){
				//添加数组原型indexOf属性
				Array.prototype.indexOf=function(value){
					for(var i=0,len=this.length;i<len;i++){
						if(this[i]==value){
							return i;
						}
					}
					return -1;
				}
			}
			if(selector.trim().split(' ').length>1){
				//字符串拼接,用空格分割成数组
				//复合选择器
				
			}else{
				//单项选择器,调用javascript内部原生dom选择
				var type=selector.trim().charAt(0);//返回第一个字符
				switch(type){
					case '.':
						//类选择器,IE不兼容getElementsByClassName方法
						var classes=[];
						if(doc.getElementsByClassName){
							return doc.getElementsByClassName(selector.slice(1,selector.length));
						}else{
							var node=doc.getElementsByTagName('*');
							for(var i=0;i<node.length;i++){
								var cla=node[i].className.split(/\s+/);//类名
								if(cla.indexOf(selector.slice(1))!=-1){//如果存在节点
									classes.push(node[i]);
								}
							}
							return classes;
						}
						
					break;
					case '#':
						//id选择器
						return doc.getElementById(selector.slice(1,selector.length));
					break;
					case '[':
						//属性选择器
						
					break;
					default ://tag标签选择器
						return doc.getElementsByTagName(selector);

				}
			}
				return this;//返回指针作用域
			}
	}
	wdjs.fn.init.prototype=wdjs.fn;//将wdjs.prototype原型绑定到init.prototype原型,实现init实例就是wdjs实例


	window.wdjs=window.$=wdjs;//注册全局变量$
})(window)

实现id，类，标签，属性名没有，也没有实现多级查找，如$('#id .class')等等。里面代码优化什么的都没有，后期学习中再考虑。

单项获取节点，类选择返回数组，标签返回类数组。

接下来学习内容，正则表达式，ajax封装等等js基础。