模拟jQuery的$选择器

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

  • 什么是TQObject对象?简单来说就是一个自定义的JS对象,其主要目的是为了保存通过各个选择获取的一个或一组DOM对象
function TQObject(){
this.data= [] ;
}
  1. 模拟$,用于根据指定的选择器获取页面上的元素,并将获取的元素封装到TQObject中返回
var $ = function(selector){
tqObject = new TQObject();//根据不同的selector获取不同的DOM元素
return tqObject;
}
  • 通过$("指定选择器")来获取页面元素,例如$("#id")可以根据id获取元素
  1. 首先来处理ID选择器 对外语法$("#id")

    首先判断其第一位是不是#。如果是则为ID选择器
function $(selector) {
var c = selector.substring(0,1);
if(c == '#'){
return document.getElementById(selector.substring(1,selector.length))
}
}
  1. 处理类选择器 对外语法$('.class')

    注意:getElementByClassName在ie低版本不兼容
    function $(selector) {
var className = selector.substring(1)
//判断是否支持getElementByClass
if(document.getElementsByClassName){
return document.getElementsByClassName(className)
}else {
//正则处理
var reg = new RegExp("(^|\\s)"+className+"($|\\s)");
var elems = getElementsByTagNmae('*')
var arr = [];
for(var i=0,len=elems.length;i<len;i++){
if(reg.test(elems[i].className)){
arr.push(elems[i])
}
}
return arr;
}
}
  1. 根据标签名
function $(element) {
return document.getElementsByTagName(element)
}
  1. 最后整合在一起
var TQObject = function() {
this.data = []
}
TQObject.prototype = {}; var $ = function(selector) {
this.tqObject = new TQObject();
if(selector.substring(0,1) == '#'){
var elem = document.getElementById(selector.substring1);
this.tqObject.data.push(elem)
}else if(selector.substring(0,1)=='.'){
var elems = document.getElementsByTagName('*')
var reg = new RegExp("(^|\\s)"+selector.substring(1)+"(^|\\s)");
for(var i=0,len=elems.length;i<len;i++){
if(reg.test(elems[i].className)){
this.tqObject.data.push(elems[i])
}
}
}else {
var elems = document.getElementsByTagName(selector);
this.tqObject.data.push(elems)
}
return this.tqObject;
}

原生JS模拟jQuery $的更多相关文章

  1. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  2. JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  3. 原生js和jquery

    $(document).ready(function() {//jquery的写法 }); (function () { //原生js的写法 })();

  4. 用原生js模仿jquery

    阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...

  5. 原生js模拟jquery写法

    function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...

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

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

  7. 原生 js 模拟 alert 弹窗

    复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...

  8. javascript项目实战之原生js模拟淘宝购物车

    通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...

  9. 原生js模拟jquery中的addClass和removeClass方法

    js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...

随机推荐

  1. CF 382C

    http://codeforces.com/problemset/problem/382/C 读完题立刻知道怎么做,然后分类讨论到吐血,写挂了,巨蠢 #include <iostream> ...

  2. Qt 使用#define+qDebug()输出调试信息

    /******************************************************************************************* * Qt 使用 ...

  3. Python3 字符串操作

    截掉指定字符串 # 截掉指定字符串 string.strip("what you want to delete") #截掉字符串左边的空格 string.lstrip() #截掉字 ...

  4. MpVue开发之组件引入的问题

    再一次开发订餐系统中,遇到订餐页面引入头部商品列表,底部组件时,报错,模块编译失败,未进入缓存区. 我以为是新添加的模块没有重新启动导致的,然后重新与运行npm run dev后还是失败, 最后经过反 ...

  5. phpcms 缓存模板文件

    caches\caches_template\default\content 对应模板文件的编译

  6. selenium-java,启动谷歌浏览器和火狐浏览器

    selenium3.4.0-java,启动谷歌浏览器和火狐浏览器-------------------------------------------------------------------- ...

  7. BZOJ - 3295 动态逆序对 (树状数组套treap)

    题目链接 思路和bzoj2141差不多,不过这道题的数据更强一些,线段树套treapT了,树状数组套treap卡过~~ #include<bits/stdc++.h> using name ...

  8. BootStrap FileInput 插件实现多文件上传前端功能

    <!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...

  9. bzoj 4595 激光发生器

    bzoj 4595 激光发生器 光线为射线,每次找到与当前光线相交且距离最近的镜子,然后旋转光线. 直线,射线利用线上一点+方向向量的方式表示.旋转时,旋转中心作为线上一点不变,方向向量左乘旋转矩阵. ...

  10. 搭建jetbrains 注册服务器

    wget http://home.ustc.edu.cn/~mmmwhy/jetbrain.sh && sh ./jetbrain.sh 输入默认的端口号跟用户名,然后记住服务器地址. ...