首页 > 代码库 > 做一个类似JQuery获取DOM对象的$()

做一个类似JQuery获取DOM对象的$()

在dom操作时,有时根据id获取单个对象、有时根据className获取多个对象。平常可能我们用两个函数来实现这两个功能。不过我将它们整合了一下,目前使用情况良好,函数如下:

view source
 
print?
01// 根据selector获取单个或多个元素,
02// 获取多个元素时,可以指定元素的tag类型和父元素
03function $(selector, tag, parent) {
04    var ret = [];
05   
06    //没有传递selector,返回空
07    if (!selector) { return null; }
08    //selector为一个dom元素,返回它
09    //若为文本元素,返回空
10    if (selector.nodeType) {
11        return selector.nodeType == 3 ? null : selector;
12    }
13   
14    //如果为一个元素组成的数组或nodeList对象
15    //如:[dom1,dom2,dom3]或 node.childNodes等情况时
16    if (selector.length && selector.constructor != String) {
17        ret = Array.prototype.slice.call(selector, 0, selector.length);
18        //过滤掉非元素、文本节点、tagName不为tag的结点
19        for(var i=0; i < ret.length; i++) {
20            if (!ret[i].nodeType || ret[i].nodeType == 3) { ret.splice(i,1); i--; }
21            else if (tag && ret[i].tagName.toLowerCase() != tag.toLowerCase()) {
22                ret.splice(i,1);
23                i--;
24            }
25        }
26        return ret;
27    }
28   
29    //如果selector为一个字符串
30    if (selector.constructor == String) {
31        // 若字符串以.开头,表示按className获取元素
32        if (/^\.\w+/.test(selector)) {
33            parent = parent || document;
34            tag = tag || "*";
35            nodes = parent.getElementsByTagName(tag);
36            var className = selector.replace(".", "");
37            var reg = new RegExp("(^|\\b)" + className + "(\\b|$)");
38            for(var i=0; i < nodes.length; i++) {
39                if(reg.test(nodes[i].className)) { ret.push(nodes[i]); }
40            }
41            return ret;
42        }
43        //否则按ID方式获取对象
44        return document.getElementById(selector);
45    }
46   
47    // 传入的selector有错误
48    return null;
49}

下面它的使用方法,为了配合演示,请先准备如下HTML结合代码:

view source
 
print?
01<ul id="test">
02    <p class="t">Hello,world!</p>
03    <p>Hello,world!</p>
04    <li class="t">afasdfsa</li>
05    <li>sfk</li>
06    <li class="t">sdklfajsfjk</li>
07    <li>end</li>
08    <li class="t">of</li>
09</ul>
10<ol>
11    <li class="t">附加的第一项</li>
12    <li class="t">附加的第二项</li>
13    <li class="t">附加的第三项</li>
14</ol>

上面的代码结构只是为测试而写的,所以比较的另类……勿怪!!!

返回到$函数,它具有如下一些功能:

    1. $() : 返回null;天台县羿壮冶金
    2. $("id") :返回单个对象,如下:alert ( $("test") );  // object HTMLUListElement
    3. $(".t") :返回所有className为t的元素组成的数组,如下:alert ( $(".t").length );  //7,共有7个元素的className为t,有木有?
    4. $(".t", ‘li‘) :返回className为t的li标签对象,如下:alert ( $(".t", ‘li‘).length );  // 6,有一个<p>的类样式也是t,但是被排除了
    5. $(".t", "li", $("test")):返回ID为test的元素下的<li>且类样式为t的对象,如下:alert ( $(".t", ‘li‘, $("test")).length );   // 3,范围在test之内
    6. $($("test").childNodes) : 将test的子元素组合成一个数组,并过滤掉文本节点,如下:alert ( $($("test").childNodes).length );  //共7个
    7. $($("test").childNodes, ‘p‘) : 获取test的子元素中为<p>的那些元素,如下:alert ( $($("test").childNodes, ‘p‘).length );  // 2,刚好两个<p>
    8. 还可以传递一个数组,如下:
view source
 
print?
1var arr = [1,2,3,document, document.body];
2alert ( $(arr).length );  //2 。1,2,3被忽略

另外,$与$结合使用的话,就会更加的方便了。以上只是我个人在使用的一个函数,仅供参考。

做一个类似JQuery获取DOM对象的$()