一个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源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
微信小程序实现页面左右滑动
Nov 16 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
中国收音机工业发展史
2021/03/02 无线电
PHP的面向对象编程
2006/10/09 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python实现udp传输图片功能
2020/03/20 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
大整数数相乘的问题
2012/07/22 面试题
大学生实习证明范本
2014/01/15 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
高中班主任心得体会
2016/01/07 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL