一个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 相关文章推荐
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
消防安全标语
2014/06/07 职场文书
质量月口号
2014/06/20 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
清洁工个人工作总结
2015/03/05 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
社会实践单位意见
2015/06/05 职场文书
高三数学教学反思
2016/02/18 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL