原生JS实现jquery的链式编程。
这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id")。
然后看了篇jquery源码分析(http://www.cnblogs.com/aaronjs/p/3279314.html),自己写出来的一个实现,选择器用的querySelector,关于链式编程也只是返回this而已,这也算是自己看jquery源码解决的第一个问题吧,继续加油。
现在想来当年面试官确实没说错,我jquery基础确实差,慢慢学吧,要学的还在很多。
先上代码吧。
var jq = function(selector){
return new jq.prototype.init(selector);
};
jq.prototype = {
init:function(selector){
this.el = document.querySelector(selector);
return this;
},
on:function(event,fn){
if(window.addEventListener){
this.el.addEventListener(event,fn,false);
}else if(window.attachEvent){
this.el.attachEvent(on+event,fn);
}
return this;
},
attr:function(event,val){
if(!val){
return this.el.getAttribute(event);
}else{
this.el.setAttribute(event,val);
return this;
}
}
}
jq.prototype.init.prototype = jq.prototype; console.log(jq("#ct").on("click",function(){alert("您点击了我。")}).attr("title","我的图片"));
原生JS实现jquery的链式编程。的更多相关文章
- jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery的链式编程风格
jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...
- JQuery的链式编程与隐式迭代
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 模拟jquery底层链式编程
//特点1:快级作用域,程序启动自动执行 //内部的成员变量,外部无法访问(除了var) //简单的函数链式调用 function Dog(){ this.run=function(){ alert( ...
- JQuery的链式编程,隐式迭代是啥意思?
链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
- 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- PAT Judge
原题连接:https://pta.patest.cn/pta/test/16/exam/4/question/677 题目如下: The ranklist of PAT is generated fr ...
- 疯狂C#~伴随着我的库存管理¥
每次的等待都是期待下一次的勃发!但激进的我非常想和大家学习一些东西,所以特地的分享了一个库存管理, 生活中容易运用的很多,但现在的学业希望能够得到各界人士的帮助!!! 首先:会有几个类来让它们协调 ( ...
- MYSQL删除重复数据
delete from co_jobinformation cwhere c.name in (select cc.name from co_jobinformation cc group by ...
- iOS单例详解
单例:整个程序只创建一次,全局共用. 单例的创建 // SharedPerson.h 文件中 + (instancetype)share; // SharedPerson.m 文件中 static S ...
- C#3.0扩展方法学习篇
什么是类的扩展方法 扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. MSDN Extension methods enable you to &q ...
- div+css中clear用法
一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该 ...
- for循环后面跟分号 - for (i = 0; i <= 3; i++);这不是错误语句
#include<iostream> int main() { using namespace std; ; ; i <= ; i++); t = t + i; cout <& ...
- SQL Server复制出错文章集锦
SQL Server复制出错文章集锦 为了方便大家对数据库复制过程中出错的时候更好地解决问题 本人收集了SQL Server相关复制出错解决的文章 The process could not ex ...
- Union-Find 检测无向图有无环路算法
不相交集合数据结构(Disjoint-set data structure)是一种用于跟踪集合被分割成多个不相交的子集合的数据结构,每个集合通过一个代表来标识,代表即集合中的某个成员. Union-F ...
- JavaScript实现TwoQueues缓存模型
本文所指TwoQueues缓存模型,是说数据在内存中的缓存模型. 无论何种语言,都可能需要把一部分数据放在内存中,避免重复运算.读取.最常见的场景就是JQuery选择器,有些Dom元素的选取是非常耗时 ...