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

前一阵子在学习jQuery库，就自己封转一下jQuery库中的一些常用方法。

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

(function (window){   //在自执行函数中window一变量形式传入可以剪短变量的作用域访问
      //这是通过id名，类名，以及标签名获取元素的封装函数，其中context是表示上下文对象
   var select=(function (){
       function getId(idName){
           return document.getElementById(idName);
       };
    
        function getClasses(className,context){
            context = context || document;
            if(document.getElementsByClassName){
                 return context.getElementsByClassName(className);
            }else{
                 vsr result = [];
                 var allTags = context.getElementsByTagName("*");
                 for(var i=0;i<allTags.length;i++){
                      var tag = allTags[i];
                      var tagClassName = tag.className；
                      var tagClassNameChange = " " +tagClassName +" ";
                      var classNameChange = " " +className + " ";
                      if(tagClassNameChange.indexOf(classNameChange)>=0){
                        result.push(tag); 
                     }
                 }

                 return result;
            }；

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

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

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

   //希望查找指定范围内的元素：DOM元素下面的；DOM数组下面；选择器下面的
    /**
     * 查找指定范围下面的指定元素
     * @param selector id选择器：#开头 类选择器：.开头，其他情况：标签选择器
     * @param context DOM元素、DOM数组、字符串（选择器）
     */
    function get(selector,context){
        var result=[];

        if(!context){//context没有值
            context=[document];
        }else if(context.nodeType){//context的值是一个dom元素
            context=[context];
        }else if(typeof context ==="string"){
            context=get(context);
        }

        //context参数已经被处理过了，处理之后context就变成了一个DOM数组或者是DOM伪数组
        for (var i = 0; i < context.length; i++) {
            //singlecontext表示每一个DOM元素
            var singlecontext = context[i];

            var reg=/^(?:#(\w+)|[.](\w+)|(\w+))$/;
            var regResult=reg.exec(selector);
            var tempResult;
            if(tempResult=regResult[1]){
                var idResult=getId(tempResult);
                if(idResult){
                    result.push(idResult);
                }
            }else if(tempResult=regResult[2]){
                result.push.apply(result,getClasses(tempResult,singlecontext));
            }else if(tempResult=regResult[3]){
                result.push.apply(result,getTags(tempResult,singlecontext));
            }
        }



        return result;
    }

    /**
     * 分组选择器
     * @param selector "div,p,input" "#content,p,.header"
     * @param context查询指定范围内的元素
     */
    function group(selector,context){
        var result=[];
        //1、分割selector将它变成字符串数组
        var groups=selector.split(",");
        //2、遍历字符串数组，将每一个元素传到get函数中获取结果
        for (var i = 0; i < groups.length; i++) {
            var singleGroup = groups[i];//singleGroup就是单个选择器
            var singleResult=get(singleGroup,context);
            //3、将多个结果合并返回给用户——>将每一次的结果添加到result中
            result.push.apply(result,singleResult);

            //也可以使用：result=result.concat(singleResult);
        }
        return result;
    }


    /**
     * 后代选择器 get("input","div")——>level("div input")
     * @param selector "div input","#content span"
     * @param context 查询条件：查询指定范围内的元素
     */
    function level(selector,context){
        //1、将字符串分割成字符串数组
        var levels=selector.replace(/\s+/g," ").split(" ");
        //2、遍历字符串数组，将每一个元素传入get函数
        for (var i = 0; i < levels.length; i++) {
            var singleLevel = levels[i];//单个选择器
            context=get(singleLevel,context);
        }
        //3、将这一次的get函数的查询结果作为下一次执行get函数的查询条件
        //      a、第一次get函数——>get("div")——>获取到页面中所有的div标签
        //      b、第二个get函数——>get("input",get("div"))——>获取div下面的input标签
        return context;
    }

    /**
     * 分组和后代选择器（大而全）
     * @context selector "div span,p input"
     */
    function groupAndLevel(selector,context){
        //错误的理解：先后代再分组——>["div","span,p","input"]
        //正确的理解：先分组再后代——>["div span","p input"]
        var result=[];
        //判断selector是否是一个字符串，如果不是，直接返回结果
        if(typeof selector !=="string") return result;

        //1、将字符串按照逗号分隔成多组
        var groups=selector.split(",");
        //2、对每一组元素调用level获取到每一组的结果
        for (var i = 0; i < groups.length; i++) {
            var singleGroup = groups[i];//singleGroup就是一个后代选择器
            var singleResult=level(singleGroup,context);
            result=result.concat(singleResult);
        }
        //3、将每一组的元素进行合并返回
        return result;
    }

    //通过给自执行函数添加返回值，暴露一个大而全的方法
    return groupAndLevel;