您现在的位置:首页 --> JavaScript --> 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快!
自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快!
浏览:2836次 出处信息
最近做前端,需要选择元素,虽说有jquery和各大js库已经帮我造好了轮子,但我想试试自己实现一个,正好项目也不忙,正好加入自己的js文件中,下面是实现代码。用$g(“#content .op”)这种格式就可以调用,和jquery $()的参数一样:
function $findChilds(parentNode, text) { //如果不传入父节点的话,默认为body if(parentNode == undefined) parentNode = document.body; var childNodes = parentNode.childNodes; var results = []; //子节点大于零才循环 if(childNodes.length > 0) { var length = childNodes.length; //循环查找符合text的节点 for(var i=0;i<length;++i) { //三种情况,className,id, tagName switch(text.substr(0, 1)) { case '.': //这两种:parentNode.getElementsByClassName,parentNode.all都是后来加上的,如果浏览器这两种方法都不支持,那就只能暴力递归了 if(parentNode.getElementsByClassName) return parentNode.getElementsByClassName(text.substr(1)); else if(parentNode.all) { var finded = []; var jlength = parentNode.all.length; for(var j=0;j<jlength;++j) if(parentNode.all[j].className == text.substr(1)) finded.push(parentNode.all[j]); return finded; } //以上两种方法都不支持,直接判断 if(childNodes[i].className == text.substr(1)) results.push(childNodes[i]); break; case '#': return [document.getElementById(text.substr(1))]; default: return parentNode.getElementsByTagName(text); } //判断完后,把当前子元素的子元素传入$findChilds进行递归查找,返回的结果直接和现在的结果合并 results = results.concat($findChilds(childNodes[i], text)); } } return results; } String.prototype.vtrim = function() { return this.replace(/^\s+|\s+$/g, ''); } function $g(text) { //按照空格分割参数 var values = text.vtrim().split(" "); var length = values.length; //如果只有一个选择参数的话,就直接调用dom方法返回结果。 if(length == 1) switch(values[0].substr(0, 1)) { case "#": return document.getElementById(values[0].substr(1)); case ".": if(document.getElementsByClassName) return document.getElementsByClassName(values[0].substr(1)); default: return document.getElementsByTagName(values[0]); } //每次迭代都会产生许多符合参数的结果节点,这里结果节点的名称为parentNodes,第一次循环默认为body var parentNodes = [document.body]; //外层循环为迭代每个传入的参数 for(var i = 0; i < length; ++i) { var jlength = parentNodes.length; var results = []; //这里如果values的长度为零的话, //就说明是多出来的空格, //例如:$g(" .content");这种情况不执行代码直接跳入下一循环 var tmpValue = values[i].vtrim(); if(tmpValue.length <= 0) continue; //内层循环为迭代每个结果节点, //在结果节点中查找符合选择条件的结果。当然第一次为body for(var j=0;j<jlength;++j) { //$findChilds就是上边的那个函数,就是选择某个节点的子节点的 var result = $findChilds(parentNodes[j], values[i].vtrim()); var rlength = result.length; //因为返回的有时候是html容器,无法直接和数组concat所以倒入数组,这里有优化空间,但暂不考虑性能先这么做 for (var k = 0; k < rlength; ++k) results.push(result[k]); } //没有结果,立即返回undefined if(results == undefined || results.length <= 0) return undefined; //最后一次循环就直接返回结果数组,但是如果最后一个选择条件是选择id的话,那就不返回数组直接返回dom对象了 if (i == length - 1) { if (values[i].substr(0, 1) == "#") return results[0]; return results; } parentNodes = results; } }经过在ff ie6下的测试 单纯的选择id比jquery要快很多,
其他的部分选择模式我测试的少数比jquery要快。
当然测试不可能全面,还可能会有bug,而且不支持类似于.content:first-child这样的伪类选择。
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46515)
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9681)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7750)
- jQuery的data()方法 (阅读:7572)
- jQuery性能优化指南 (阅读:7302)
- jQuery Color Animations颜色动画插件 (阅读:7068)
- 精于图片处理的10款jQuery插件 (阅读:6203)
- jQuery中getJSON跨域原理详解 (阅读:5612)
- 配合jquery实现异步加载页面元素 (阅读:5367)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
后一篇:使用Apparat框架优化你的Flash >>
文章信息
- 作者:satanultra 来源: WEB前端开发
- 标签: html jquery 选择器
- 发布时间:2010-11-11 19:35:43
建议继续学习
近3天十大热文
- [68] 如何拿下简短的域名
- [68] Go Reflect 性能
- [64] Oracle MTS模式下 进程地址与会话信
- [61] 图书馆的世界纪录
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成