在dom操作时,有时根据id获取单个对象、有时根据className获取多个对象。平常可能我们用两个函数来实现这两个功能。不过我将它们整合了一下,目前使用情况良好,函数如下:
01 |
// 根据selector获取单个或多个元素, |
02 |
// 获取多个元素时,可以指定元素的tag类型和父元素 |
03 |
function $(selector, tag, parent) { |
07 |
if (!selector) { return null ; } |
08 |
//selector为一个dom元素,返回它 |
10 |
if (selector.nodeType) { |
11 |
return selector.nodeType == 3 ? null : selector; |
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()) { |
30 |
if (selector.constructor == String) { |
31 |
// 若字符串以.开头,表示按className获取元素 |
32 |
if (/^\.\w+/.test(selector)) { |
33 |
parent = parent || document; |
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]); } |
44 |
return document.getElementById(selector); |
下面它的使用方法,为了配合演示,请先准备如下HTML结合代码:
02 |
< p class = "t" >Hello,world!</ p > |
04 |
< li class = "t" >afasdfsa</ li > |
06 |
< li class = "t" >sdklfajsfjk</ li > |
11 |
< li class = "t" >附加的第一项</ li > |
12 |
< li class = "t" >附加的第二项</ li > |
13 |
< li class = "t" >附加的第三项</ li > |
上面的代码结构只是为测试而写的,所以比较的另类……勿怪!!!
返回到$函数,它具有如下一些功能:
- $() : 返回null;
- $("id") :返回单个对象,如下:alert ( $("test") ); // object HTMLUListElement
- $(".t") :返回所有className为t的元素组成的数组,如下:alert ( $(".t").length ); //7,共有7个元素的className为t,有木有?
- $(".t", 'li') :返回className为t的li标签对象,如下:alert ( $(".t", 'li').length ); // 6,有一个<p>的类样式也是t,但是被排除了
- $(".t", "li", $("test")):返回ID为test的元素下的<li>且类样式为t的对象,如下:alert ( $(".t", 'li', $("test")).length ); // 3,范围在test之内
- $($("test").childNodes) : 将test的子元素组合成一个数组,并过滤掉文本节点,如下:alert ( $($("test").childNodes).length ); //共7个
- $($("test").childNodes, 'p') : 获取test的子元素中为<p>的那些元素,如下:alert ( $($("test").childNodes, 'p').length ); // 2,刚好两个<p>
- 还可以传递一个数组,如下:
1 |
var arr = [1,2,3,document, document.body]; |
2 |
alert ( $(arr).length ); //2 。1,2,3被忽略 |
另外,$与$结合使用的话,就会更加的方便了。以上只是我个人在使用的一个函数,仅供参考。
- dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象
dom变成jquery对象 先获取dom对象 然后通过$()转换成jquery对象
- 使用plupload做一个类似qq邮箱附件上传的效果
公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...
- Jquery与Dom对象相互转化
Jquery与Dom对象相互转化 jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- Jquery与DOM对象
在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM ...
- jQuery和DOM对象之间的转换
jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是 ...
- jQuery 获取DOM节点的两种方式
jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...
- js点滴知识(1) -- 获取DOM对象和编码
在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别 先前总以为,二者是一样的,最近才知道 ...
- jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、
this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload === $(document).ready(); $(“”):获取元素 标 ...
随机推荐
- js函数的默认参数
function f(flag, start, end, msg){ flag = flag == false ? flag : true; start = start || null; start ...
- python__高级 : Property 的使用
一个类中,假如一个私有属性,有两个方法,一个是getNum , 一个是setNum 它,那么可以用 Property 来使这两个方法结合一下,比如这样用 num = property(getNum, ...
- 【js】【跨域问题】前后端分离的跨域问题
最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cooki ...
- 准备篇(二)C语言
因为C语言部分打算单独维护,所以 目录: 1. C语言基础篇(零)gcc编译和预处理 2. C语言基础篇(一)关键字 3. C语言基础篇(二)运算符 4. C语言指针篇(一)指针与指针变量 5. C语 ...
- C++基础 inline 默认参数 函数占位参数 函数重载
1. inline内联函数 内联函数用于替换宏, 实例: 其中宏和 ++ 连用有副作用. #include "iostream" using namespace std; #def ...
- 内置函数--sorted,filter,map
sorted() 排序函数. 语法: sorted(Iterable, key=None, reverse=False) Iterable: 可迭代对象; key: 排序规则(排序函数); reve ...
- P1330 封锁阳光大学(染色问题)
P1330 封锁阳光大学 题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构 ...
- Android stadio 关联源码
有时候,你想在Android stadio 里看源码, 然后Android stadio 会提示你去下载. 但是下载完了之后,有时候stadio 还是不能看源码.后来,参考这位博客,搞完了. http ...
- 《Cracking the Coding Interview》——第4章:树和图——题目4
2014-03-19 03:40 题目:给定一棵二叉树,把每一层的节点串成一个链表,最终返回一个链表数组. 解法:前序遍历,遍历的同时向各个链表里添加节点.水平遍历好像还不如前序遍历来得方便. 代码: ...
- python利用PIL库使图片高斯模糊
一.安装PIL PIL是Python Imaging Library简称,用于处理图片.PIL中已经有图片高斯模糊处理类,但有个bug(目前最新的1.1.7bug还存在),就是模糊半径写死的是2,不能 ...