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

01 // 根据selector获取单个或多个元素,
02 // 获取多个元素时,可以指定元素的tag类型和父元素
03 function $(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结合代码:

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. 还可以传递一个数组,如下:
1 var arr = [1,2,3,document, document.body];
2 alert ( $(arr).length );  //2 。1,2,3被忽略

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

做一个类似JQuery获取DOM对象的$()的更多相关文章

  1. dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象

    dom变成jquery对象   先获取dom对象 然后通过$()转换成jquery对象

  2. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  3. Jquery与Dom对象相互转化

    Jquery与Dom对象相互转化   jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...

  4. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  5. Jquery与DOM对象

    在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM ...

  6. jQuery和DOM对象之间的转换

    jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是 ...

  7. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

  8. js点滴知识(1) -- 获取DOM对象和编码

    在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别 先前总以为,二者是一样的,最近才知道 ...

  9. jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

    this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(“”):获取元素   标 ...

随机推荐

  1. Struts2基础入门

    Struts2基础入门 创建一个web工程 0)导包并且创建一个核心配置文件 <?xml version="1.0" encoding="UTF-8"?& ...

  2. Servlet学习笔记07——什么是cookie,session?

    7)cookie的路径问题 a.什么是cookie路径问题? 浏览器在向服务器上的某个地址发送请求时, 会查看cookie的路径是否与该地址匹配,只有 匹配的cookie才会被发送. b.cookie ...

  3. mysql 1055 的错误

    1.Err1055,出现这个问题往往是在执行sql语句时候,在最后一行会出现这个问题. [Err] 1055 - Expression #1 of ORDER BY clause is not in ...

  4. jquery动态改变元素内容

    ● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)

  5. 标签种类及CSS引入方法

    标签种类及CSS引入方法 标签种类: 一:块级标签(block) ——> 独占一行,默认宽度与内容无关,宽高可设   (hr 块级标签) 二:行内块标签(inline-block) ——> ...

  6. C指针——简单总结

    简介: 指针变量在使用前,必须指向具体的有效的内存单元 指针变量在使用前不但要定义还要初始化 四个方面:指针的类型,指针指向的类型,指针的值或者指针所指向的内存区,指针本身所占的内存区 int *pt ...

  7. random模块 time模块的用法 python

    1.random()模块的使用 import random x = random.random() y = random.random() print(x,y*10) #random.random() ...

  8. PHP.TP框架下商品项目的优化1-时间插件、鼠标所在行高亮、布局规划页面

    1.优化搜索表单中按时间搜索的功能 添加一个时间插件datetimepicker,在lst.html中,注意要导入jquery.min.js,此处从前文的在线编辑器中导入 <!-- 导入 --& ...

  9. centos使用--ssh登陆

    1 安装openssh-server yum install openssh-server 2 登录 在配置好ssh后就可以只使用SSH密钥登录而不允许通过密码登录了,方法如下: 修改ssh配置: v ...

  10. GCD那些事儿

    GCD GCD,全名Grand Central Dispatch,中文名郭草地,是基于C语言的一套多线程开发API,一听名字就是个狠角色,也是目前苹果官方推荐的多线程开发方式.可以说是使用方便,又不失 ...