一个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 面向对象 继承
May 13 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
JavaScript函数详解
Nov 17 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
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+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
javascript脚本调试方法小结
2008/11/24 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
内勤主管岗位职责
2014/04/03 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
五五普法心得体会
2014/09/04 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
六年级语文教学反思
2016/03/03 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL