模拟jquery封装简单的Select搜索

标签：

var Select=(function () {
    //自定义 select 方法的思路：
    //1> 定义一个 support 对象. 将需要使用的方法进行处理, 得到方法的能力
    //2> 需要使用的可能有兼容性的方法, 定义一个可以完成该方法的函数来替代. 在函数内部进行兼容处理
    //3> 定义 select 函数. 首先看是否支持 qsa, 如果支持直接使用. 如果不支持自己再来实现

    //native code判断是否是内置方法
    var rnative=/\[native code\]/
    var support={}
    //是否支持querySelectorAll
    support.qsa=rnative.test(document.querySelectorAll) ;
    //是否支持
    support.getElementsByClassName=rnative.test(document.getElementsByClassName)
    //因为document和node的继承关系不一样，所以要做二次判断
    var div=document.createElement(‘div‘)
    support.getElementsByClassName2=rnative.test(div.getElementsByClassName)
    support.indexOf=rnative.test(Array.prototype.indexOf);
    support.trim=rnative.test(String.prototype.trim)
    // 在开始将需要的方法定义好
    var push=[].push;
    //解决push的展开伪数组问题兼容性问题，
    //因为无法检测浏览器是否有push，所以只能先尝试判断
    //先尝试是否可行，不行的话就使用自定义方式
    try{
        push.apply([],document.getElementsByTagName(‘*‘));
    }catch(e){
        push={
            apply: function (a,b) {
                for(var i=0;i< b.length;i++){
                    a[a.length++]=b[i];
                }
                return a.length;
            },
            call: function (a) {
                for(var i=1;i<arguments.length;i++){
                    a[a.length++]=arguments[i];
                }

                //var args=[].slice.call(arguments,1)
                //this.push.apply(a,args)
            }
        }
    }

    //解决indexOf浏览器的兼容的问题
    function indexOf(array,search,starindex){
        starindex=starindex||0;
        if(support.indexOf){
            return array.indexOf(search,starindex)
        }else{
            for(var i=starindex;i<array.length;i++){
               if(array[i]==search){
                   return i;
               }
            }
            return -1;
        }
    }


    //解决byclassname的浏览器兼容问题
    function byClassName(classname,node){
        if(node==document&&support.getElementsByClassName||
            node.nodeType==1&&support.getElementsByClassName2){
            return node.getElementsByClassName(classname);
        }else{
            var list=node.getElementsByTagName(‘*‘)
            var arr=[];
            for(var i=0;i<list.length;i++){
                // 先判断对象是否有class，如果有的话，则进行下一步
                var cc=list[i].getAttribute(‘class‘)
                if(cc){
                    //因为可以有多个类名，所以要进行判断
                   if(indexOf(cc.split(‘ ‘),classname)!=-1){
                       arr.push(list[i])
                   }
                }
            }
                return arr;
        }
    }

    var Select= function (selector,results) {
        results=results||[];
        if(support.qsa){
            push.apply(results,document.querySelectorAll(selector))
            return unique(results)
        }else{
            return Select2(selector,results)
        }
    }

    //兼容trim的兼容问题
    function trim(str){
        if(support.trim){
            return str.trim()
        }else{
            return str.replace(/^\s|\s$/g,‘‘)
        }
    }
    //数组去重的方法
    function unique(arr){
        var newarr=[];
        for(var i=0;i<arr.length;i++){
            if(indexOf(newarr,arr[i])==-1){
                newarr.push(arr[i])
            }
        }
        return newarr;
    }
    // 常用的获取元素的方法
    function t(tagname,results){
        results=results||[];
        push.apply(results,document.getElementsByTagName(tagname));
        return  results;
    };
    function c(classname,results){
        results=results||[];
        push.apply(results,byClassName(classname,document));
        return results;
    }
    function id(idname,results){
        results=results||[];
        //判断是否存在id
        var rid=document.getElementById(idname)
            if(rid){
                push.call(results,rid);
            }
        return results;
    }
    //如果是组合选择器
    function Select2(selector,results){
        results=results||[];
        //先将组合分割成数组
        var list=selector.split(‘,‘);
        for(var i=0;i<list.length;i++){
            //去除首位的空格
            Select3(trim(list[i]),results);
        }
        return unique(results)
    }

    function Select3(selector,results){
        results=results||[];
        //实现四种选择器
        var aa=selector.charAt(0)
        //基本选择器中不能有空格
        if(selector.split(‘ ‘).length==1){
            if(selector==‘*‘){
                return t(selector,results)
            }else if(aa==‘#‘){
                return id(selector.slice(1),results)
            }else if(aa==‘.‘){
                return c(selector.slice(1),results)
            }else{
                return t(selector,results)
            }
        }else{
            throw new  Error(‘不支持该选择器‘)
        }
    }



















return Select
})()

模拟jquery封装简单的Select搜索

标签：

原文地址：http://www.cnblogs.com/huqinhan/p/5785600.html