一个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.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JQuery球队选择实例
May 18 Javascript
原生js实现轮播图
Feb 27 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 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 数组的一个悲剧?
2011/05/11 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
如何理解Python中的变量
2020/06/01 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
英语专业学生的自我评价
2013/12/30 职场文书
项目经理任命书内容
2014/06/06 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
二婚主持词
2015/06/30 职场文书
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android