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基础。