模拟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. 【机器学习PAI实践十】深度学习Caffe框架实现图像分类的模型训练

    背景 我们在之前的文章中介绍过如何通过PAI内置的TensorFlow框架实验基于Cifar10的图像分类,文章链接:https://yq.aliyun.com/articles/72841.使用Te ...

  2. ubuntu安装 tensorflow GPU

    安装支持GPU的tensorflow前提是正确安装好了 CUDA 和 cuDNN. CUDA 和 cuDNN的安装见 Nvidia 官网和各种安装教程,应该很容易,重点是要选准了支持自己GPU的 CU ...

  3. Android Studio真机测试失败-----''No target device found" (转)

    参考文章: https://blog.csdn.net/chang_sir/article/details/51755572 今天想用真机测试一个程序,却报出这样一个Error"No tar ...

  4. .pyc和.pyo文件有何用

    百度知道:http://zhidao.baidu.com/link?url=_tFP1xglFnoEBObWtIArI3b3Ft0PQowx5m5ruIaX3mFIAFVr7vX45Lfb0geCjA ...

  5. Underscore template

    /********************************************************************* * Underscore template * 说明: * ...

  6. python发送邮件的实例代码(支持html、图片、附件)

    转自http://www.jb51.net/article/34498.htm 第一段代码 #!/usr/bin/python# -*- coding: utf-8 -*- import emaili ...

  7. 基于 task 为 VSCode 添加自定义的外部命令

    我们有很多全局的工具能在各处使用命令行调用,针对某个仓库特定的命令可以放到仓库中.不过,如果能够直接为顺手的文本编辑器添加自定义的外部命令,那么执行命令只需要简单的快捷键即可,不需要再手工敲了.   ...

  8. 什么是Docker—无服务器计算服务

    什么是Docker https://mp.weixin.qq.com/s?__biz=MzU0Mzk1OTU2Mg==&mid=2247483881&idx=1&sn=aa27 ...

  9. XML专题:使用NSXMLParser解析xml文件

    使用NSXMLParser解析xml文件 1. 设置委托对象,开始解析     NSXMLParser *parser = [[NSXMLParser alloc] initWithData:data ...

  10. python嵌入c++

    1.去主页下载源代码项目 2.编译下载下来的项目 3.新建项目填入下面代码 // pythonIncludeTest.cpp : 定义控制台应用程序的入口点. // #include "st ...