一个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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
面试常见的js算法题
Mar 23 Javascript
Django使用多数据库的方法
Sep 06 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
浅析Vue 生命周期
Jun 21 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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加密解密函数(动态加密)
2013/06/19 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
写的htc的数据表格
2007/01/20 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
深入理解Python中装饰器的用法
2016/06/28 Python
详解Python的Lambda函数与排序
2016/10/25 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python os.access()用法实例
2019/02/18 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
给校长的建议书
2014/03/12 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
代理协议书
2014/04/22 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
慰问信格式规范
2015/03/23 职场文书
2015年宣传工作总结
2015/04/08 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电