热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

原创的一个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 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 element = allTagsDom[i];
if (regex.test(element.className)) { //根据正则来检测类名
matchElements.push(element);
}
}
return matchElements;
}
}
//调用方法:cssQuery.select(selectorString); selectorString 像这种:"#p #b .em",
//可以接收HTML标签和ID、class的组合,返回指定的selectorString的引用

推荐阅读
  • 项目风险管理策略与实践
    本文探讨了项目风险管理的关键环节,包括风险管理规划、风险识别、风险分析(定性和定量)、风险应对策略规划及风险控制。旨在通过系统的方法提升项目成功率,减少不确定因素对项目的影响。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 探索AI智能机器人自动盈利系统的构建
    用户可通过支付198元押金及30元设备维护费租赁AI智能机器人,推荐他人加入可获得相应佣金。随着推荐人数的增加,用户将逐步解锁更高版本,享受更多收益。 ... [详细]
  • 本文将从基础概念入手,详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发,以及其背后的源码实现细节。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 嵌套列表的扁平化处理
    本文介绍了一种方法,用于遍历嵌套列表中的每个元素。如果元素是整数,则将其添加到结果数组中;如果元素是一个列表,则递归地遍历这个列表。此方法特别适用于处理复杂数据结构中的嵌套列表。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • HTML前端开发:UINavigationController与页面间数据传递详解
    本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ... [详细]
  • 本文详细探讨了BCTF竞赛中窃密木马题目的解题策略,重点分析了该题目在漏洞挖掘与利用方面的技巧。 ... [详细]
  • 1#include2#defineM1000103#defineRGregister4#defineinf0x3f3f3f3f5usingnamespacestd;6boolrev ... [详细]
  • SQL Server 存储过程实践任务(第二部分)
    本文档详细介绍了三个SQL Server存储过程的创建与使用方法,包括统计特定类型客房的入住人数、根据房间号查询客房详情以及删除特定类型的客房记录。 ... [详细]
  • 在编程实践中,正确管理和释放资源是非常重要的。本文将探讨 Python 中的 'with' 关键字及其背后的上下文管理器机制,以及它们如何帮助我们更安全、高效地管理资源。 ... [详细]
  • 材料光学属性集
    材料光学属性集概述了材料在不同光谱下的光学行为,包括可见光透射率、太阳光透射率等关键参数。 ... [详细]
  • Web前端开发的职业前景与就业指南
    随着互联网行业的蓬勃发展,Web前端技术因其在用户界面和交互设计中的关键作用而备受企业重视。本文探讨了前端开发的职业前景,以及应届毕业生如何提高自己的竞争力。 ... [详细]
  • 在 Django 模型中,ForeignKey 的 on_delete 参数定义了当关联对象被删除时,当前模型实例的行为。本文详细解释了 on_delete 的各个选项及其具体作用。 ... [详细]
author-avatar
我家的表妹
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有