类jquery选择器

用过jquery的人都会觉得jquery中的选择器$相当的方便吧，相比javascript自带的document.getElementById要灵活得多，但是并不是所有的项目都需要用到jquery这个库，但是我们又想要用到它的选择器，怎么办呢？最好的办法就是自己实现一个类似功能的函数。代码如下：

function $findChilds(parentNode, text){    //如果不传入父节点的话，默认为body    if(parentNode == undefined)        parentNode = document.body;    var childNodes = parentNode.childNodes;    var results = [];    //子节点大于零才循环    if(childNodes.length > 0)    {        var length = childNodes.length;        //循环查找符合text的节点        for(var i=0;i<length;++i)        {            //三种情况，className，id， tagName            switch(text.substr(0, 1))            {            case '.':                //这两种:parentNode.getElementsByClassName,parentNode.all//都是后来加上的，如果浏览器这两种方法都不支持，那就只能暴力递归了                if(parentNode.getElementsByClassName)                    return parentNode.getElementsByClassName(text.substr(1));                else if(parentNode.all)                {                    var finded = [];                    var jlength = parentNode.all.length;                    for(var j=0;j<jlength;++j)                        if(parentNode.all[j].className == text.substr(1))                            finded.push(parentNode.all[j]);                    return finded;                }                //以上两种方法都不支持，直接判断                if(childNodes[i].className == text.substr(1))                    results.push(childNodes[i]);                break;            case '#':                return [document.getElementById(text.substr(1))];            default:                return parentNode.getElementsByTagName(text);            }            //判断完后，把当前子元素的子元素传入$findChilds进行递归查找，返回的结果直接和现在的结果合并            results = results.concat($findChilds(childNodes[i], text));        }    }    return results;}  String.prototype.trim = function() {      return this.replace(/^\s+|\s+$/g, '');}  //这里定义选择器方法function $(text){    //按照空格分割参数    var values = text.trim().split(" ");    var length = values.length;//需要查询的参数的个数    //如果只有一个选择参数的话，就直接调用dom方法返回结果。    if(length == 1)        switch(values[0].substr(0, 1))        {        case "#":            return document.getElementById(values[0].substr(1));        case ".":            if(document.getElementsByClassName)                return document.getElementsByClassName(values[0].substr(1));        default:            return document.getElementsByTagName(values[0]);        }    //每次迭代都会产生许多符合参数的结果节点,这里结果节点的名称为parentNodes，第一次循环默认为body    var parentNodes = [document.body];    //外层循环为迭代每个传入的参数    for(var i = 0; i < length; ++i)    {        var jlength = parentNodes.length;        var results = [];        //这里如果values的长度为零的话，        //就说明是多出来的空格，        //例如:$("      .content");这种情况不执行代码直接跳入下一循环        var tmpValue = values[i].trim();        if(tmpValue.length <= 0)            continue;        //内层循环为迭代每个结果节点，        //在结果节点中查找符合选择条件的结果。当然第一次为body        for(var j=0;j<jlength;++j)        {            //$findChilds就是上边的那个函数，就是选择某个节点的子节点的            var result = $findChilds(parentNodes[j], values[i].trim());            var rlength = result.length;            //因为返回的有时候是html容器，无法直接和数组concat所以倒入数组，这里有优化空间，但暂不考虑性能先这么做            for (var k = 0; k < rlength; ++k)                results.push(result[k]);        }        //没有结果，立即返回undefined        if(results == undefined || results.length <= 0)            return undefined;        //最后一次循环就直接返回结果数组，但是如果最后一个选择条件是选择id的话，那就不返回数组直接返回dom对象了        if (i == length - 1)        {            if (values[i].substr(0, 1) == "#")                return results[0];            return results;        }        parentNodes = results;    }}

 

完整代码位置：http://runjs.cn/code/1a3c6pgp