學習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;