一个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拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
JavaScript文档加载模式以及元素获取
Jul 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下MAIL的另一解决方案
2006/10/09 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Python高效编程技巧
2013/01/07 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
酒店仓管员岗位职责
2014/04/28 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
员工手册编写范本
2015/05/14 职场文书
党员理论学习心得体会
2016/01/21 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL