模拟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的使用&lt;重点&gt;,以及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. 乐乎环球WiFi

    乐乎环球WiFi招商加盟 随身WiFi设备 乐乎环球Wifi是由北京蔚蓝创智科技有限公司研发的产品,是一款可以在全球100多个国家和地区实现免漫游4G高速上网的随身WiFi设备.和普通MiFi设备相比 ...

  2. TP5验证规则

    系统内置的验证规则如下: 格式验证类 require 验证某个字段必须,例如:'name'=>'require' number 或者 integer 验证某个字段的值是否为数字(采用filter ...

  3. nodejs在同一台服务器上部署并同时运行两个或以上服务端时,一个服务用户登录后会挤掉另一个用户的问题

    问题描述:一台服务器,部署了两个或以上不同的Web服务,服务A的用户在登陆后,服务B的用户也登陆,此时服务A的用户在点击页面时,会返回登陆页面. 问题根源:浏览器保存的session相同,即cooki ...

  4. java 截取url的参数

    /** * 去掉url中的路径,留下请求参数部分 * @param strURL url地址 * @return url请求参数部分 * @author lzf */ private static S ...

  5. 人人都是 DBA(XIV)存储过程信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  6. 使用adb shell卸载程序

    个人感觉在命令行中卸载程序要比在手机界面卸载程序要方便许多,配合命令行下的报名查看包名的命令就更加方便了. 1.查看应用准确包名 adb shell pm list package -f |grep ...

  7. redis在windows上的安装

    1.下载地址:https://github.com/MSOpenTech/redis 主要支持win64的,有个msi文件可以直接安装,安装后redis会变成一个服务,对于windows来说这种最方便 ...

  8. 在C语言中,double、long、unsigned、int、char类型数据所占字节数

    和机器字长及编译器有关系: 所以,int,long int,short int的宽度都可能随编译器而异.但有几条铁定的原则(ANSI/ISO制订的): 1 sizeof(short int)<= ...

  9. 配置youcompleteme碰到的问题

    Q1: 进入vim里面后,可以使用ycm的相关命令来看到底出现啦什么问题? :Ycm YcmCompleter YcmForceCompileAndDiagnostics YcmToggleLogs ...

  10. JavaScript中的memorizing技术

    今天看<JavaScript>设计模式第七章--工厂模式的时候接触到memorizing技术,简单的说就是对于某个方法,调用它的实例只在第一次调用它的时候才会进行方法中的计算,之后该实例再 ...