一个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 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
vue 中使用print.js导出pdf操作
Nov 13 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python 性能优化技巧总结
2016/11/01 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python探索之自定义实现线程池
2017/10/27 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
八一建军节感言
2014/02/28 职场文书
土地转让协议书范本
2014/04/15 职场文书
初三学习计划书范文
2014/04/30 职场文书
市场营销策划方案
2014/06/11 职场文书
早读课迟到检讨书
2014/09/25 职场文书
信访稳定工作汇报
2014/10/27 职场文书
开除通知书范本
2015/04/25 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技