一个经过整合之后的$函数

听老歌

转：langzs

一个经过整合之后的$函数

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

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

复制代码

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

1. <ul id="test">
   
2.     <p class="t">Hello,world!</p>
   
3.     <p>Hello,world!</p>
   
4.     <li class="t">afasdfsa</li>
   
5.     <li>sfk</li>
   
6.     <li class="t">sdklfajsfjk</li>
   
7.     <li>end</li>
   
8.     <li class="t">of</li></ul><ol>
   
9.     <li class="t">附加的第一项</li>
   
10.     <li class="t">附加的第二项</li>
    
11.     <li class="t">附加的第三项</li></ol>

复制代码

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

返回到$函数，它具有如下一些功能：

1、$() ： 返回null；

2、$("id") ：返回单个对象，如下：

1. alert ( $("test") );  // object HTMLUListElement

复制代码

3、$(".t") ：返回所有className为t的元素组成的数组，如下：

1. alert ( $(".t").length );  //7，共有7个元素的className为t，有木有？

复制代码

4、$(".t", 'li') ：返回className为t的li标签对象，如下：

1. alert ( $(".t", 'li').length );  // 6，有一个<p>的类样式也是t，但是被排除了

复制代码

5、$(".t", "li", $("test"))：返回ID为test的元素下的<li>且类样式为t的对象，如下：

1. alert ( $(".t", 'li', $("test")).length );   // 3，范围在test之内

复制代码

6、$($("test").childNodes) ： 将test的子元素组合成一个数组，并过滤掉文本节点，如下：

1. alert ( $($("test").childNodes).length );  //共7个

复制代码

7、$($("test").childNodes, 'p') ： 获取test的子元素中为<p>的那些元素，如下：

1. alert ( $($("test").childNodes, 'p').length );  // 2，刚好两个<p>

复制代码

8、还可以传递一个数组，如下：

1. var arr = [1,2,3,document, document.body];alert ( $(arr).length );  //2 。1，2，3被忽略

复制代码

另外，$与$结合使用的话，就会更加的方便了。以上只是我个人在使用的一个函数，不过今天也拿出来丢个人、现个眼！！！！