学习jQuery库，尝试封装jQuery的部分功能函数

前一阵子在学习jQuery库，就本身封转一下jQuery库中的一些经常使用方法。

首先，是先开始封装选择器模块的，也就是经过传入选择器，能够获取到对应的dom元素。

 1 (function (window){   //在自执行函数中window一变量形式传入能够剪短变量的做用域访问
      //这是经过id名，类名，以及标签名获取元素的封装函数，其中context是表示上下文对象
 2    var select=(function (){
 3        function getId(idName){
 4            return document.getElementById(idName);
 5        };
 6     
 7         function getClasses(className,context){
 8             context = context || document;
 9             if(document.getElementsByClassName){
10                  return context.getElementsByClassName(className);
11             }else{
12                  vsr result = [];
13                  var allTags = context.getElementsByTagName("*");
14                  for(var i=0;i<allTags.length;i++){
15                       var tag = allTags[i];
16                       var tagClassName = tag.className；
17                       var tagClassNameChange = " " +tagClassName +" ";
18                       var classNameChange = " " +className + " ";
19                       if(tagClassNameChange.indexOf(classNameChange)>=0){
20                         result.push(tag); 
21                      }
22                  }

23                  return result;
24             }；

              function getTags(tagName,context){ context =context || document; return context.getElementsByTagName(tagName); };

25  } 26  })() 27 })(window)

 继续往模块中添加选择器方法。这部分的方法也应该是在以上模块中的：

  1    //但愿查找指定范围内的元素：DOM元素下面的；DOM数组下面；选择器下面的
  2     /**
  3      * 查找指定范围下面的指定元素
  4      * @param selector id选择器：#开头 类选择器：.开头，其余状况：标签选择器
  5      * @param context DOM元素、DOM数组、字符串（选择器）
  6      */
  7     function get(selector,context){
  8         var result=[];
  9 
 10         if(!context){//context没有值
 11             context=[document];
 12         }else if(context.nodeType){//context的值是一个dom元素
 13             context=[context];
 14         }else if(typeof context ==="string"){
 15             context=get(context);
 16         }
 17 
 18         //context参数已经被处理过了，处理以后context就变成了一个DOM数组或者是DOM伪数组
 19         for (var i = 0; i < context.length; i++) {
 20             //singlecontext表示每个DOM元素
 21             var singlecontext = context[i];
 22 
 23             var reg=/^(?:#(\w+)|[.](\w+)|(\w+))$/;
 24             var regResult=reg.exec(selector);
 25             var tempResult;
 26             if(tempResult=regResult[1]){
 27                 var idResult=getId(tempResult);
 28                 if(idResult){
 29                     result.push(idResult);
 30                 }
 31             }else if(tempResult=regResult[2]){
 32                 result.push.apply(result,getClasses(tempResult,singlecontext));
 33             }else if(tempResult=regResult[3]){
 34                 result.push.apply(result,getTags(tempResult,singlecontext));
 35             }
 36         }
 37 
 38 
 39 
 40         return result;
 41     }
 42 
 43     /**
 44      * 分组选择器
 45      * @param selector "div,p,input" "#content,p,.header"
 46      * @param context查询指定范围内的元素
 47      */
 48     function group(selector,context){
 49         var result=[];
 50         //一、分割selector将它变成字符串数组
 51         var groups=selector.split(",");
 52         //二、遍历字符串数组，将每个元素传到get函数中获取结果
 53         for (var i = 0; i < groups.length; i++) {
 54             var singleGroup = groups[i];//singleGroup就是单个选择器
 55             var singleResult=get(singleGroup,context);
 56             //三、将多个结果合并返回给用户——>将每一次的结果添加到result中
 57             result.push.apply(result,singleResult);
 58 
 59             //也可使用：result=result.concat(singleResult);
 60         }
 61         return result;
 62     }
 63 
 64 
 65     /**
 66      * 后代选择器 get("input","div")——>level("div input")
 67      * @param selector "div input","#content span"
 68      * @param context 查询条件：查询指定范围内的元素
 69      */
 70     function level(selector,context){
 71         //一、将字符串分割成字符串数组
 72         var levels=selector.replace(/\s+/g," ").split(" ");
 73         //二、遍历字符串数组，将每个元素传入get函数
 74         for (var i = 0; i < levels.length; i++) {
 75             var singleLevel = levels[i];//单个选择器
 76             context=get(singleLevel,context);
 77         }
 78         //三、将这一次的get函数的查询结果做为下一次执行get函数的查询条件
 79         //      a、第一次get函数——>get("div")——>获取到页面中全部的div标签
 80         //      b、第二个get函数——>get("input",get("div"))——>获取div下面的input标签
 81         return context;
 82     }
 83 
 84     /**
 85      * 分组和后代选择器（大而全）
 86      * @context selector "div span,p input"
 87      */
 88     function groupAndLevel(selector,context){
 89         //错误的理解：前后代再分组——>["div","span,p","input"]
 90         //正确的理解：先分组再后代——>["div span","p input"]
 91         var result=[];
 92         //判断selector是不是一个字符串，若是不是，直接返回结果
 93         if(typeof selector !=="string") return result;
 94 
 95         //一、将字符串按照逗号分隔成多组
 96         var groups=selector.split(",");
 97         //二、对每一组元素调用level获取到每一组的结果
 98         for (var i = 0; i < groups.length; i++) {
 99             var singleGroup = groups[i];//singleGroup就是一个后代选择器
100             var singleResult=level(singleGroup,context);
101             result=result.concat(singleResult);
102         }
103         //三、将每一组的元素进行合并返回
104         return result;
105     }
106 
107     //经过给自执行函数添加返回值，暴露一个大而全的方法
108     return groupAndLevel;