原生JS模拟jQuery $
模拟jQuery的$选择器
在获取元素的时候使用ID选择器,返回的是一个对象;使用类选择器或者标签选择器返回可能是一组元素;将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject
- 什么是TQObject对象?简单来说就是一个自定义的JS对象,其主要目的是为了保存通过各个选择获取的一个或一组DOM对象
function TQObject(){
this.data= [] ;
}
- 模拟$,用于根据指定的选择器获取页面上的元素,并将获取的元素封装到TQObject中返回
var $ = function(selector){
tqObject = new TQObject();//根据不同的selector获取不同的DOM元素
return tqObject;
}
- 通过$("指定选择器")来获取页面元素,例如$("#id")可以根据id获取元素
- 首先来处理ID选择器 对外语法$("#id")
首先判断其第一位是不是#。如果是则为ID选择器
function $(selector) {
var c = selector.substring(0,1);
if(c == '#'){
return document.getElementById(selector.substring(1,selector.length))
}
}
- 处理类选择器 对外语法$('.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;
}
}
- 根据标签名
function $(element) {
return document.getElementsByTagName(element)
}
- 最后整合在一起
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 $的更多相关文章
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
- JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- 原生js和jquery
$(document).ready(function() {//jquery的写法 }); (function () { //原生js的写法 })();
- 用原生js模仿jquery
阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- 使用原生js模拟jQuery选择器,实现new方法,兼容ie5
// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...
- 原生 js 模拟 alert 弹窗
复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...
- javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...
- 原生js模拟jquery中的addClass和removeClass方法
js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...
随机推荐
- CF 382C
http://codeforces.com/problemset/problem/382/C 读完题立刻知道怎么做,然后分类讨论到吐血,写挂了,巨蠢 #include <iostream> ...
- Qt 使用#define+qDebug()输出调试信息
/******************************************************************************************* * Qt 使用 ...
- Python3 字符串操作
截掉指定字符串 # 截掉指定字符串 string.strip("what you want to delete") #截掉字符串左边的空格 string.lstrip() #截掉字 ...
- MpVue开发之组件引入的问题
再一次开发订餐系统中,遇到订餐页面引入头部商品列表,底部组件时,报错,模块编译失败,未进入缓存区. 我以为是新添加的模块没有重新启动导致的,然后重新与运行npm run dev后还是失败, 最后经过反 ...
- phpcms 缓存模板文件
caches\caches_template\default\content 对应模板文件的编译
- selenium-java,启动谷歌浏览器和火狐浏览器
selenium3.4.0-java,启动谷歌浏览器和火狐浏览器-------------------------------------------------------------------- ...
- BZOJ - 3295 动态逆序对 (树状数组套treap)
题目链接 思路和bzoj2141差不多,不过这道题的数据更强一些,线段树套treapT了,树状数组套treap卡过~~ #include<bits/stdc++.h> using name ...
- BootStrap FileInput 插件实现多文件上传前端功能
<!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...
- bzoj 4595 激光发生器
bzoj 4595 激光发生器 光线为射线,每次找到与当前光线相交且距离最近的镜子,然后旋转光线. 直线,射线利用线上一点+方向向量的方式表示.旋转时,旋转中心作为线上一点不变,方向向量左乘旋转矩阵. ...
- 搭建jetbrains 注册服务器
wget http://home.ustc.edu.cn/~mmmwhy/jetbrain.sh && sh ./jetbrain.sh 输入默认的端口号跟用户名,然后记住服务器地址. ...