原生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 ...
随机推荐
- 利用js查找页面中的内链,外链
起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a ...
- javascript 执行上下文的理解
首先,为什么某些函数以及变量在没有被声明以前就可以被使用,javascript引擎内部在执行代码以前到底做了些什么?这里,想信大家都会想到,变量声明提前这个概念: 但是,以下我要讲的是,声明提前的这个 ...
- DSY1531*Bank notes
Description Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我 ...
- 学习Nodejs之mysql
学习Nodejs连接mysql数据库: 1.先安装mysql数据库 npm install mysql 2.测试连接数据库: var sql = require("mysql"); ...
- MySQL5.6 GTID新特性实践
MySQL5.6 GTID新特性实践 GTID简介 搭建 实验一:如果slave所需要事务对应的GTID在master上已经被purge了 实验二:忽略purged的部分,强行同步 本文将简单介绍基于 ...
- js面向对象基础总结
js中如何定义一个类? 定义的function就是一个构造方法也就是说是定义了一个类:用这个方法可以new新对象出来. function Person(name, age){ this.name = ...
- PHP文件相关的操作函数——目录操作
1.有关文件类型的函数 PHP是以UNIX的文件系统为模型的,因此在Windows系统中我们只能获得“file”.“dir”或者“unknown”三种文件类型.而在UNIX系统中,我们可以获得“blo ...
- for 循环中 continue
- HTTP method POST is not supported by this URL
修改提交页面的提交方式,修改method为get(在index页面中html标签 method="get") 示例代码修改后的代码: <form action="s ...
- 搭建 SVN 服务器
安装.启动 SVN 服务器 在 Windows 下,可以使用以下命令将 SVN 服务注册到 windows 服务中去: sc create svnserver binPath= "drive ...