一个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.Jcrop的头像编辑器
Mar 01 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
解决Layui 表格自适应高度的问题
Nov 15 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
FCKeditor的安装(PHP)
2007/01/13 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
ThinkPHP路由详解
2015/07/27 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python 爬取疫情数据的源码
2020/02/09 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
如何使用python切换hosts文件
2020/04/29 Python
Python Json数据文件操作原理解析
2020/05/09 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
运动会通讯稿200字
2014/02/16 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
人资专员岗位职责
2014/04/04 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
大班下学期个人总结
2015/02/13 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
virtualenv隔离Python环境的问题解析
2022/06/21 Python