Javascript 简单选择器实现

当我们在使用jQuery的选择器的时候,是不是很感慨他的强大。

当我们只用原生js的时候,是不是觉得遍历一个class的节点都是那么的艰辛。

在此写一个js的选择题给大家分享下,实际上现在我就需要用到。。。

演示demo:http://www.travisup.com/demo/plugins/tquery/demo.html

JS代码如下:

var tQuery = {
    g: function(str) {
        var result = [],
            names = str.split(","),
            current,
            name,
            temp;
        for(var i = 0; i < names.length; i++) {
            current = names[i];
            current = current.replace(/\s*/, '');
            temp = [];
            if(current.indexOf('#') >= 0) {
                name = current.split("#");
                temp.push(this.getId(name[1]));
                if(temp) {
                    result = result.concat(temp);
                }
            } else if(current.indexOf('.') >= 0) {
                name = current.split(".");
                temp = this.getClass(name[1], name[0]);
                if(temp) {
                    for(var j = 0; j < temp.length; j++) {
                        result = result.concat(temp[j]);
                    }
                }
            }
        }
        return result;
    },
    getId: function(id) {
        return document.getElementById(id);
    },
    getClass: function(searchClass, tag, node) {
        node = node || document;
        tag = tag || "*";
        if(document.getElementsByClassName) {
            var elements = node.getElementsByClassName(searchClass),
                result = [],
                current;
            if(tag === "*") {
                result = elements;
                return result;
            }
            for(var i = 0 ; i < elements.length; i++) {
                current = elements[i];
                if(tag !== "*" && current.tagName === tag.toUpperCase()) {
                    result.push(current);
                }
            }
            return result;
        } else {
            // for IE
            var elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
                result = [],
                current,
                match = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
            for(var i = 0 ; i < elements.length; i++) {
                current = elements[i];
                if(match.test(current.className)) {
                    result.push(current);
                } 
            }
            return result;
        }
    }
};

主要写了一个对象,实现了一个类似jquery选择器的功能,但是没有那么强大,返回的是一个数组对象。

调用代码是这样滴:

tQuery.g('#id, div.class');

传入的是一个字符串,支持同时遍历多个,用逗号分开。跟jQuery一样,#加id名代码要遍历的id节点,.加class名代表要遍历的带有class名的节点,可以指定标签名。

PS:返回的结果木有排重的。

    发表评论

    *
    *