一个cssQuery对象 javascript脚本实现代码


Posted in Javascript onJuly 21, 2009
/** 
* @author Supersha 
* @QQ:770104121 
*/ 
var cssQuery = { 
//parent:用于存储当前节点的父节点的引用 
parent: document, 
select: function(selectorStr){ 
var selectors=selectorStr.split(" "); //分隔字符串 
for (var i = 0, len = selectors.length; i < len; i++) { 
var el = this.parent || document; //用于存储指定class属性的节点引用 
var val=this.replaceStr(selectors[i]); //代替掉"#"和"."点号,用于获取指定的ID的节点引用 
if (selectors.length == 1) { //如果只有一个参数 
if (!(/[#.]/g).test(selectors[i])) { //如果是HTML标签 
return document.getElementsByTagName(selectors[i]); 
} 
else { //如果是ID或者指定的class值 
//判断是ID还是class属性 
return (this.IDLabel(selectors[i])) ? this.$(val) : this.getElementsByClassName(document, "*", val); 
} 
} 
//如果达到selectorStr字符号中最后的那个ID或者class或者HTML标签 
else if(i == selectors.length-1){ 
if (!(/[#.]/g).test(selectors[i])) { //如果是HTML标签 
return el.getElementsByTagName(selectors[i]); 
} 
else { //如果是ID或者class属性 
return (this.IDLabel(selectors[i])) ? this.$(val) : this.getElementsByClassName(el,"*",val); 
} 
} 
else{ //如果存在两级以上的selectorStr,则存储当前节点的引用到parent属性中 
if (!(/[#.]/g).test(selectors[i])) { //如果是HTML标签 
this.parent = el.getElementsByTagName(selectors[i])[0]; 
} 
else { //如果是ID或者class属性 
this.parent = ((/#/gi).test(selectors[i])) ? this.$(val) : el; 
} 
} 
} 
}, 
$: function(id){ //用于得到指定ID的引用 
return document.getElementById(id); 
}, 
IDLabel: function(selector){ //判断是否是ID属性 
return ((/#/gi).test(selector)) ? true : false; 
}, 
classLabel: function(selector){ //判断是否是class属性 
return ((/\./gi).test(selector)) ? true : false; 
}, 
replaceStr:function(a){ //替换掉"#"和"."点号,用于获取指定的ID的节点引用 
return a.replace("#","").replace(".",""); 
}, 
getElementsByClassName: function(el, tag, classname){ //通过class属性值获取含有class属性值的元素的引用 
var elem = el || document; 
if (!classname) 
return; 
tag = tag || "*"; 
var allTagsDom = ((tag == "*") && (elem.all)) ? elem.all : elem.getElementsByTagName(tag); 
classname = classname.replace(/\-/g, "\\-"); 
var regex = new RegExp("(^|\\s*)" + classname + "(\\s*|$)"); 
var matchElements = new Array(); 
var element; 
for (var i = 0; i < allTagsDom.length; i++) { 
element = allTagsDom[i]; 
if (regex.test(element.className)) { //根据正则来检测类名 
matchElements.push(element); 
} 
} 
return matchElements; 
} 
} 
//调用方法:cssQuery.select(selectorString); selectorString 像这种:"#p #b .em", 
//可以接收HTML标签和ID、class的组合,返回指定的selectorString的引用
Javascript 相关文章推荐
基于JS实现的倒计时程序实例
Jul 24 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
js计算页面刷新的次数
Jul 20 #Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 #Javascript
Prototype Hash对象 学习
Jul 19 #Javascript
Prototype Array对象 学习
Jul 19 #Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 #Javascript
Prototype String对象 学习
Jul 19 #Javascript
Prototype Template对象 学习
Jul 19 #Javascript
You might like
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
JS实现轮播图效果
2020/01/11 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Windows环境下python环境安装使用图文教程
2018/03/13 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
django输出html内容的实例
2018/05/27 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
中职生自我鉴定范文
2013/10/03 职场文书
医院总经理岗位职责
2014/02/04 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
行政监察建议书
2014/05/19 职场文书
惊天动地观后感
2015/06/10 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android