jQuery的源码思路1——后代选择器

这里探讨一下jQuery中后代选择器的封装原理，并自己写一下

getEle('#div1 ul li .box');接受的参数就是个后代选择器，类似于这样：

• #div1 ul li .box
• id/tagname/class
• div#div1
• div.box
• input[type=button]
• li:eq(3)/lt(3)/gt(3)
• li:first/last/odd/even

function getEle(str){

    var arr = str.match(/\S+/g); //先把传进的字符串用正则匹配一下，把多余的空格去掉再放进数组，知识点：match返回的是一个数组，这里也可以用split，split也可以放正则，但是要用小写's+'

    var aParent = [document]; //一开始以document为父级，但是也要放在数组中

    var aChild = [];

    for(var i=0 ;i<arr.length; i++){//切好后的数组，循环，每次把抓到的数据放到aChild中，再把它赋给下一次循环的父级

        aChild = getByStr(aParent,arr[i]); //需要一个函数，传入父级以及要抓该父级下字符串为第二个参数的元素，抓到的元素赋给数组aChild

        aParent = aChild;//然后将该数组作为下一个循环的父级

    }

    return aChild;

}

function getByStr(aParent,str){

    var aChild = [];

    for (var i=0; i<aParent.length; i++){

        switch (str.charAt(0)){ //判断字符串是否含有#.或者没有，分别代表id，class和标签

            case '#':

                var obj = aParent[i].getElementById(str.substring(1));

                obj && aChild.push(obj);

                break;

            case '.':

                var aEle = getByClass(aParent[i],str.substring(1));

                for(var j=0; j<aEle.length; j++){

                    aChild.push(aEle[j]);

                }

                break;

            default:

                    //div#div1

                if(/\w+#\w+/.test(str)){

                    var arr = str.split('#');

                    var aEle = aParent[i].getElementsByTagName(arr[0]);

                    for(var j=0; j<aEle.length; j++){

                        if(aEle[j].id == arr[1]){

                            aChild.push(aEle[j]);

                            break; //只抓一个

                        }

                    }

                }else if(/\w+\.\w+/.test(str)){

                    var arr = str.split('.');

                    var aEle = aParent[i].getElementsByTagName(arr[0]);

                    var re = new RegExp('\\b' + arr[1] + '\\b'); //用边界的正则是为了避免出现class中出现多个空格，所以只要找到即可

                    for(var j=0; j<aEle.length; j++){

                        if(re.test(aEle[j].className)){

                            aChild.push(aEle[j]);

                        }

                    }

                }else if(/\w+\[\w+\=\w+]/.test(str)){ //input[type=button]

                    var arr = str.split(/\[|\=|\]/); // ['input','type','button',]

                    var aEle = aParent[i].getElementsByTagName(arr[0]);

                    for(var j=0; j<aEle.length; j++){

                        if(aEle[j].getAttribute(arr[1]) == arr[2]){

                            aChild.push(aEle[j]);

                        }

                    }

                }else if(/\w+\:\w+(\(.\))?/.test(str)){

                    var arr = str.split(/\:|\(|\)/);//[tag,eq,3][tag,first]

                    var aEle = aParent[i].getElementsByTagName(arr[0]);

                    switch (arr[1]){

                        case 'first':

                            aChild.push(aEle[0]);

                            break;

                        case 'last':

                            aChild.push((aEle[aEle.length-1]));

                            break;

                        case 'odd':

                            for(var j=0; j<aEle.length; j++){

                                if(j%2==1){

                                    aChild.push((aEle[j]));

                                }

                            }

                            break;

                        case 'even':

                            for(var j=0; j<aEle.length; j++){

                                if(j%2==0){

                                    aChild.push((aEle[j]));

                                }

                            }

                            break;

                        case 'eq':

                            aEle[arr[2]] && aChild.push(aEle[arr[2]]);

                            break;

                        case 'lt':

                            for(var j=0; j<arr[2]; j++){

                                aChild.push(aEle[j]);

                            }

                            break;

                        case 'gt':

                            for(var j=Number(arr[2])+1;j<aEle.length; j++){

                                aChild.push(aEle[j]);

                            }

                            break;

                    }

                }else{

                    var aEle = aParent[i].getElementsByTagName(str);

                    for(var j=0; j<aEle.length; j++)

                    aChild.push(aEle[j]);

                }

        }

    }

    return aChild;

}

function getByClass(oParent,sClass){

    if(oParent.getElementsByClassName){

        return oParent.getElementsByClassName(sClass);

    }

    var result = [];

    var re = new RegExp('\\b' + sClass + '\\b');

    var aEle = oParent.getElementsByTagName('*');

    for(var i=0; i<aEle.length; i++){

        if(re.test(aEle[i].className)){

            result.push(aEle[i]);

        }

    }

    return result;

}