一个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返回上一页并刷新代码整理
Dec 21 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
vue离开当前页面触发的函数代码
Sep 01 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
jQuery 选择器理解
2010/03/16 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
django 外键model的互相读取方法
2018/12/15 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python 下载及安装详细步骤
2019/11/04 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
别名指示符是什么
2012/10/08 面试题
优秀教师主要事迹
2014/02/01 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫