jquery-选择器框架探索

选择框架包含id，tag，class，多组，层次，多组+层次，
表单元素，过滤（基本，属性，内容，子元素，表单元素，隐藏显示，伪类）

1、选择id

  function $id(id) {
        return document.getElementById(id); 
  }

2、选择tag

    function $tag(tag) {
        return document.getElementsByTagName(tag);
    }

2.1、缩小搜索范围

在已找到的dom中，再去寻找节省时间

        function $tag(tag,id){
            var dom = document.getElementById(id);
            return dom.getElementsByTagName(tag);
        }

3、选择class

        function $class(className) {
            return document.getElementsByClassName(className);
        }

3.1、考虑兼容性

        function $class(className) {
            if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }else{
                // 首先大海捞针 ---放在集合里面
                //遍历集合--依次比较 判断是否等于class
                var arr=[];
                var dom = document.getElementsByTagName('*');
                for(var i,len=dom.length;i<len;i++) {
                    //indexof
                    if(dom[i].className && dom[i].className ==className ) {
                        // array放在一个集合里面
                        arr.push(dom[i]);
                    }
                }
                return arr;
            }

        }

4、选择多组

    function $(content) {
      //总体思路： 个个击破 
      //找到个个 ---放在数组里面 ---遍历--个个击破
        //三种情况
        var arr=[],result=[];
        arr = content.split(',');

        for(var i,len=arr.length;i<len;i++) {
            var first= arr[i].charAt(0)
            if(first ==='.') {
                    //各个击破-- class
                }else if(first ==='#') {
                    //各个击破 -- id
                }else{
                     //各个击破 -- 标签
                    }
        }
        return result;
    }

4.1、击破class

                    doms=[];
                    var index = arr[i].indexOf('.')
                    //从数组中得到class后，用方法去寻找得到dom节点
                    doms=$.$class(arr[i].slice(index+1))
//                  其中获取的dom节点是数组，因为不一定是一个，所以还是要循环取出
                    for(var j= 0, domlen = doms.length; j < domlen; j++){
                        result.push(doms[j])
                    }

4.2、击破id

                    index = arr[i].indexOf('#')
                    doms=[$.$id(arr[i].slice(index+1))]
                    //封装重复的代码成函数
                    pushArray(doms,result)

                     //封装重复的代码
                    function pushArray(doms,result){
                        for(var j= 0, domlen = doms.length; j < domlen; j++){
                            result.push(doms[j])
                        }
                    }

4.3、击破tag

                        doms = $$.$tag(arr[i])
                        pushArray(doms,result)

4.4、最后完整版

        $group:function(content) {
        var result=[],doms=[];
        var arr = $.trim(content).split(',');
        //alert(arr.length);
        for(var i=0,len=arr.length;i<len;i++) {
            var item = $$.trim(arr[i])
            var first= item.charAt(0)
            var index = item.indexOf(first)
            if(first === '.') {
                doms=$.$class(item.slice(index+1))
                //每次循环将doms保存在reult中
                //result.push(doms);//错误来源

                //陷阱1解决 封装重复的代码成函数
                pushArray(doms,result)

            }else if(first ==='#'){
                doms=[$.$id(item.slice(index+1))]
                //封装重复的代码成函数
                pushArray(doms,result)
            }else{
                doms = $$.$tag(item)
                pushArray(doms,result)
            }
        }
        return result;

        //封装重复的代码
        function pushArray(doms,result){
            for(var j= 0, domlen = doms.length; j < domlen; j++){
                result.push(doms[j])
            }
        }
    }

    //trim方法：

    trim:function(str){
        return str.replace(/(^\s*)|(\s*$)/g, '');
    }

5、层次选择器

使用：

var doms = $cengci(‘#container div p’);

    function $cengci(select){
            //个个击破法则 -- 寻找击破点
            var sel = select.split(' ');
            for(var i = 0, len = sel.length; i < len; i++){
                var item = sel[i];
                var first = sel[i].charAt(0)

                if(first ==='#'){
                    //如果是#，找到该元素，

                }else if(first ==='.'){
                    //如果是.
                }else{
                    //如果是标签
                }
            }
        }

寻找class

     getElementsByClass(context,name)
                    context = result;


    function getElementsByClass(parents,name){
             if(parents.length){
                 for(var j = 0, contextLen = parents.length; j < contextLen; j++){
                     pushArray($$.$class(name, context[j]));
                 }
             }else{
                 pushArray($$.$class(name));
             }
        }
    //封装重复的代码
    function pushArray(doms){
        for(var j= 0, domlen = doms.length; j < domlen; j++){
            result.push(doms[j])
        }
    }

寻找元素

     getElementsByID(name)
                    context = result;



     function getElementsByID(name){
                 pushArray([$$.$id(name)]);
            }
            //封装重复的代码
            function pushArray(doms,result){
                for(var j= 0, domlen = doms.length; j < domlen; j++){
                    result.push(doms[j])
                }
            }

寻找tag

       getElementsByTag(context)
       context = result;

        function getElementsByTag(parents) {
            //如果是标签
            //遍历父亲，找到父亲中的元素==父亲都存在context中
            if(parents.length){
                for(var j = 0, contextLen = parents.length; j < contextLen; j++){
                    pushArray($$.$tag(item, context[j]));
                }
            }else{
                pushArray($$.$tag(item));
            }
        }
        //封装重复的代码
        function pushArray(doms){
            for(var j= 0, domlen = doms.length; j < domlen; j++){
                result.push(doms[j])
            }
        }

最后的版本

$cengci:function (select){
        //个个击破法则 -- 寻找击破点
        var sel = $.trim(select).split(' ');
        var result=[];
        var context=[];
        for(var i = 0, len = sel.length; i < len; i++){
            result=[];
            var item = $.trim(sel[i]);
            var first = sel[i].charAt(0)
            var index = item.indexOf(first)
            if(first ==='#'){
                //如果是#，找到该元素，
                pushArray([$$.$id(item.slice(index + 1))]);
                context = result;
            }else if(first ==='.'){
                //如果是.
                //如果是.
                //找到context中所有的class为【s-1】的元素 --context是个集合
                if(context.length){
                    for(var j = 0, contextLen = context.length; j < contextLen; j++){
                        pushArray($.$class(item.slice(index + 1), context[j]));
                    }
                }else{
                    pushArray($.$class(item.slice(index + 1)));
                }
                context = result;
            }else{
                //如果是标签
                //遍历父亲，找到父亲中的元素==父亲都存在context中
                if(context.length){
                    for(var j = 0, contextLen = context.length; j < contextLen; j++){
                        pushArray($.$tag(item, context[j]));
                    }
                }else{
                    pushArray($.$tag(item));
                }
                context = result;
            }
        }

        return context;

        //封装重复的代码
        function pushArray(doms){
            for(var j= 0, domlen = doms.length; j < domlen; j++){
                result.push(doms[j])
            }
        }
    },

常用就先这些，其他的，一次类推也能写出来，偷个懒
最后的封装代码地址：

代码地址