原生的html元素选择器类似jquery选择器

 更新时间:2014年10月15日 17:12:58   投稿:whsnow  
做前端,需要选择元素,下面是实现代码,一个原生的html元素选择器类似jquery选择器,很棒,很实用

做前端,需要选择元素,虽说有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这样的伪类选择。

相关文章

  • TypeScript 中括号用法小结

    TypeScript 中括号用法小结

    本文主要介绍了TypeScript 中括号用法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 详解jQuery插件开发方式

    详解jQuery插件开发方式

    本文介绍了jQuery扩展、私有域、定义插件的基本步骤等知识,有需要的朋友可以看下
    2016-11-11
  • JavaScript原型链及常见的继承方法

    JavaScript原型链及常见的继承方法

    这篇文章主要介绍了JavaScript原型链及常见的继承方法,文章围绕主题展开详细的内容介绍,具有一定的的参考价值,需要的朋友可以参考一下
    2022-07-07
  • JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】

    JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】

    这篇文章主要介绍了JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法,结合实例形式详细分析了游戏算法中针对碰撞检测的包盒矩形情况下的相关算法原理与操作注意事项,需要的朋友可以参考下
    2018-12-12
  • 微信小程序 rich-text的使用方法

    微信小程序 rich-text的使用方法

    这篇文章主要介绍了 微信小程序 rich-text的使用方法的相关资料,这里提供属性及方法并实现实例,帮助大家学习理解,需要的朋友可以参考下
    2017-08-08
  • JS组件Bootstrap Table使用实例分享

    JS组件Bootstrap Table使用实例分享

    这篇文章主要为大家详细介绍了JS组件Bootstrap Table分页使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • ElementUI的Dialog弹窗实现拖拽移动功能示例代码

    ElementUI的Dialog弹窗实现拖拽移动功能示例代码

    这篇文章主要介绍了ElementUI的Dialog弹窗实现拖拽移动功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • 第五章之BootStrap 栅格系统

    第五章之BootStrap 栅格系统

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下
    2016-04-04
  • js弹出窗口简单实现代码

    js弹出窗口简单实现代码

    这篇文章主要为大家详细介绍了js弹出窗口的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS实现的冒泡排序,快速排序,插入排序算法示例

    JS实现的冒泡排序,快速排序,插入排序算法示例

    这篇文章主要介绍了JS实现的冒泡排序,快速排序,插入排序算法,结合实例形式分析了javascript冒泡排序,快速排序,插入排序算法的相关原理及实现方法,需要的朋友可以参考下
    2019-03-03

最新评论