目前实现的功能有以下几点:

  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选择器的更多相关文章

  1. 使用原生js模拟jQuery选择器,实现new方法,兼容ie5

    // 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...

  2. 模拟jquery封装选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  4. js框架封装,模拟jQuery封装

    模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...

  5. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  6. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  7. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  8. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  9. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

随机推荐

  1. HTML入门的简单学习

    1:HTML简介    1.1:HTML(Haper Text Markup language):超文本标记语言    超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素     1.2 ...

  2. 为什么调用 FragmentPagerAdapter.notifyDataSetChanged() 并不能更新其 Fragment

    http://stackoverflow.com/questions/10849552/update-viewpager-dynamically if you want to switch out t ...

  3. VS2015 C#6.0 中的那些新特性

    本人个人博客原文链接地址为http://aehyok.com/Blog/Detail/66.html. 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok ...

  4. 谈一谈PHP的代码重构

    随着 PHP 从一种简单的脚本语言转变为一种成熟的编程语言,一个典型的 PHP 应用程序的代码库的复杂性也随之增大.为了控制对这些应用程序的支持和维护,我们可以使用各种测试工具来自动化该流程.其中一种 ...

  5. mysql 创建用户并赋予权限

    mysql> create user 'zhangsan'@'localhost' identified by '123456'; Query OK, 0 rows affected (0.00 ...

  6. Linux2.6 内核的 Initrd 机制解析(转)

    from: https://www.ibm.com/developerworks/cn/linux/l-k26initrd/ 简介: Linux 的 initrd 技术是一个非常普遍使用的机制,lin ...

  7. 解决eclipse使用Search弹出错误问题

    在eclipse中搜索时,搜索完之后有时候会弹出错误对话框,虽然错误内容有时候不同,但是解决办法都一样. 这个问题是由于eclipse中文件不同步引起的.在eclipse中,工程文件是由eclipse ...

  8. Entity Framework 在Vs2012下Update Model From DataBase 失败的问题

    http://stackoverflow.com/questions/13054212/vs-2012-ef-5-0-update-model-from-database-not-picking-up ...

  9. fast db 学习

    见 http://code.google.com/p/mmdbsolution/source/browse/trunk/+mmdbsolution+--username+SiliangDu1987%4 ...

  10. glide 加载圆角图片

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABEIAAAD3CAIAAACW6Gb7AAAgAElEQVR4nOy9e1QbZf74//zO4XvOYz