原生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 = ...
随机推荐
- Xcode9 新功能
翻译: https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/WhatsNewXcod ...
- 修改程序版本工具(ResHacker)使用说明20140902
有时候我们需要自己修改dll版本号,那么ResHacker工具可以帮我们在不需要开发帮助下可以自己修改版本号: 工具:直接复制出来即可 1.双击打开工具 2.将dll文件或者exe文件拖拽进来,或者[ ...
- del语句的总结
删除属性 del 语句 可以删除对象(实例)的属性 语法: del 对象.实例变量名 del 语句 del 变量名 删除变量 del name del 列表[整数表达式] 删除列表中的元素 del L ...
- 安装伪分布式hbase 0.99.0
查看是否启动成功,输入jps,看到有HMaster和HQuorumPeer,浏览器输入http://localhost:16030/master-status,能打开说明成功 hbase(main): ...
- UDP示例
android学习笔记18--------------UDP示例 分类: android2011-11-10 10:07 848人阅读 评论(0) 收藏 举报 androidbufferexcepti ...
- Java并发--lock锁详解
在上一篇文章中我们讲到了如何使用关键字synchronized来实现同步访问.本文我们继续来探讨这个问题,从Java 5之后,在java.util.concurrent.locks包下提供了另外一种方 ...
- BZOJ3887 [Usaco2015 Jan] Grass Cownoisseur 【tarjan】【DP】*
BZOJ3887 [Usaco2015 Jan] Grass Cownoisseur Description In an effort to better manage the grazing pat ...
- System.IO.Pipelines来对消息进行Buffer合并
System.IO.Pipelines来对消息进行Buffer合并 https://www.cnblogs.com/smark/p/9927455.html .net core使用Pipelines进 ...
- git 第一次提交至仓库
可以打开Idea 的 terminal直接进行命令操作 1.git init 2.git add src(这个src意思是添加src目录下的所有文件,有些会说add .. 那就是提交工程下的所有 ...
- REST服务开发实战【转】
原文:http://kb.cnblogs.com/page/91827/ REST介绍 如果要说什么是REST的话,那最好先从Web(万维网)说起. 什么是Web呢?读者可以查看维基百科的词条(htt ...