一个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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
Javascript组合继承方法代码实例解析
Apr 02 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
我的论坛源代码(四)
2006/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php 学习资料零碎东西
2010/12/04 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
smarty内置函数section的用法
2015/01/22 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
jquery 选择器部分整理
2009/10/28 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
详解react-redux插件入门
2018/04/19 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
js实现每日签到功能
2018/11/29 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
javascript this指向相关问题及改变方法
2020/11/19 Javascript
python获取依赖包和安装依赖包教程
2020/02/13 Python
python实现飞机大战项目
2020/03/11 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
python中time tzset()函数实例用法
2021/02/18 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
Collection和Collections的区别
2016/05/02 面试题
应届毕业生通用的自荐书范文
2014/02/07 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
2015最新民情日记范文
2015/06/26 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
总结会主持词
2015/07/02 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android