一个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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
js实现移动端轮播图
Dec 21 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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调用三种数据库的方法(3)
2006/10/09 PHP
php 远程图片保存到本地的函数类
2008/12/08 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript 常用方法总结
2009/06/03 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
详解python3中socket套接字的编码问题解决
2017/07/01 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
基于Python解密仿射密码
2019/10/21 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
个人求职信范文分享
2014/01/06 职场文书
先进班集体事迹材料
2014/12/25 职场文书
万能检讨书
2015/01/27 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
婚庆答谢词大全
2015/09/29 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技