模拟Jquery选择器
目前实现的功能有以下几点:
1.$("#adom"); // 返回id为adom的DOM对象
2.$("a"); // 返回一个a标签的数组
3.$(".classa"); // 返回一个class的数组
4.$("[data-log]"); // 返回一个包含属性data-log的数组
5.$("[data-time=2015]"); // 返回一个属性为data-time且值为2015的数组
其他选择器有时间在弄吧。
function $() {
var a = arguments,len,str,sub,dataReg;
// class兼容IE
function classN(n){
var tag = document.getElementsByTagName("*");
for(var i=0,arr=[];i<tag.length;i++){
if(tag[i].className.indexOf(n)!==-1){
arr.push(tag[i]);
}
}
return arr;
}
// 自定义data选择器
function data(d){
var tag = document.getElementsByTagName("*");
var reg = /\-([\d\w]+)\]/;
for(var i=0,arr=[];i<tag.length;i++){
if(tag[i].dataset[reg.exec(d)[1]]){
arr.push(tag[i]);
}
}
return arr;
}
// 自定义data选择器严格版
function dataT(d){
var tag = document.getElementsByTagName("*");
var reg = /\[data\-([\w\d]+)\=([\w\d]+)/;
for(var i=0,arr=[];i<tag.length;i++){
if(tag[i].dataset[reg.exec(d)[1]]===reg.exec(d)[2]){
arr.push(tag[i]);
}
}
return arr;
}
// 如果是函数,将函数添加到load事件中
if((typeof a[0])==="function"){
window.addEventListener('load',a[0]);
}else{
len = a.length;
str = a[0].charAt(0);
sub = a[0].substring(1);
dataReg = /\=/.test(a[0]);
switch(str){
case "#":
return document.getElementById(sub);
break;
case ".":
return classN(sub);
break;
case "[":
switch(dataReg){
case false:
return data(a[0]);
break;
case true:
return dataT(a[0]);
break;
}
break;
default:
return document.getElementsByTagName(a[0]);
break;
}
}
}
模拟Jquery选择器的更多相关文章
- 使用原生js模拟jQuery选择器,实现new方法,兼容ie5
// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...
- 模拟jquery封装选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- js框架封装,模拟jQuery封装
模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
随机推荐
- Maven之问题解决汇总
Maven使用中,遇到的问题及解决办法记录下来 pom.xml顶部报错问题解决方法:http://stackoverflow.com/questions/5074063/maven-error-fai ...
- android: SQLite查询数据
掌握了查询数据的方法之后,你也就将数据库的 CRUD 操 作全部学完了.不过千万不要因此而放松,因为查询数据也是在 CRUD 中最复杂的一种 操作. 我们都知道 SQL 的全称是 Structured ...
- 关于《精通移动App测试实战:技术、工具和案例》图书勘误信息
首先,对由于我们工作的疏忽向<精通移动App测试实战:技术.工具和案例>读者朋友们表示歉意,同时已将这些问题反馈给了出版社编辑同志,再版时将会统一修正: 其次,勘误信息请参看附件pdf文档 ...
- LPC43xx SGPIO DMA and Interrupts
The SGPIO output pins SGPIO14 and SGPIO15 can trigger a GPDMA request SGPIO pins SGPIO14 and SGPIO15 ...
- Android SDK 国内镜像
东软信息学院的 Android SDK 镜像,比配置代理下载快多了. 配置地址, http://mirrors.neusoft.edu.cn/configurations.we#android 启动 ...
- 为什么Android的图片质量会比iPhone的差?
经常看到有人问:“安卓版微信发出去的图片怎么那么渣!比iPhone的差远了!”.不只是微信,很多应用安卓版的图片质量就是要比iPhone版逊色很多,这到底是怎么回事? 我们团队最初也纠结 ...
- C#创建唯一的订单号, 考虑时间因素
主要是想把日期和其它因素考虑进来. 使用RNGCryptoServiceProvider类创建唯一的最多8位数字符串. private static string GetUniqueKey() { ; ...
- 如何实现在H5里调起高德地图APP?(上)
这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前往方式. 场景一.在高德地图上展示Marker点或者POI标记 在一些基于位置分享的应用开发 ...
- XMPP系列1:简介
通俗解释其实XMPP 是一种很类似于http协议的一种数据传输协议,它的过程就如同“解包装--〉包装”的过程,用户只需要明白它接收的类型,并理解它返回的类型,就可以很好的利用xmpp来进行数据通讯.系 ...
- 利用EEPROM实现arduino的断电存储
转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 一.EEPROM简介 EEPROM (Electrically Erasable Progr ...