当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个cssQuery对象 javascript脚本实现代码

Javascript
js返回当前网页的url
简明json介绍
JavaScript在IE中“意外地调用了方法或属性访问”
JS获得鼠标位置(兼容多浏览器ie,firefox)修正版
JavaScript 基础问答 四
支持多浏览器(IE、Firefox、Opera)剪切板复制函数
js 解决“options为空或不是对象”
走出JavaScript初学困境—js初学
JavaScript入门教程(6) Window窗口对象
JavaScript 快捷键设置实现代码
Extjs Ajax 乱码问题解决方案
JavaScript 实现模态对话框 源代码大全
[原创]js 日期加红代码 适用于各种cms
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
[原创]javascript 改变字体大小方法集合
javascript 单行文字向上跑马灯滚动显示
一个简单的javascript类定义例子
javascript 类定义的4种方法
javascript类继承机制的原理分析
firefox(火狐)和ie浏览器禁止右键和禁止复制的代码

Javascript 中的 一个cssQuery对象 javascript脚本实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 415 ::
收藏到网摘: n/a

原创的一个cssQuery对象,类似于jQuery的$函数通过css选择器选择DOM元素,目前还不支持xPath语法
复制代码 代码如下:

/**
* @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的引用