这是我根据之前遇到的一个面试题,题目:用原生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的链式编程。的更多相关文章

  1. jQuery支持链式编程,一句话实现左侧table页+常用筛选器总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. jQuery的链式编程风格

    jQuery的链式编程风格 首先本人通过一个案例来展示jQuery的链式编程风格.先写一个页面,展示一个列表,代码如下: <body> <div> <ul class=& ...

  3. JQuery的链式编程与隐式迭代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 模拟jquery底层链式编程

    //特点1:快级作用域,程序启动自动执行 //内部的成员变量,外部无法访问(除了var) //简单的函数链式调用 function Dog(){ this.run=function(){ alert( ...

  5. JQuery的链式编程,隐式迭代是啥意思?

    链式编程 1.好处 "一句话,链式编程可以省去很多重复的代码." 这话什么意思呢?举个例子. /*设置obj对象的两个属性*/ //普通做法是这样的 obj.name = '小明' ...

  6. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  7. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  8. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

  9. 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. [ios]新手笔记-。-UIPickerView 关于伪造循环效果和延时滚动效果

    查找了网上资料,循环效果绝大部分都是增加行数来制造循环的错觉,延时滚动就是利用NSTimer间隔出发滚动事件来制造滚动效果. 代码: #import <UIKit/UIKit.h>#imp ...

  2. 【转】Polya定理

    转自:http://endlesscount.blog.163.com/blog/static/82119787201221324524202/ Polya定理 首先记Sn为有前n个正整数组成的集合, ...

  3. 华为oj 刷题记录之合唱团

    华为OJ-合唱队 描述 计算最少出列多少位同学,使得剩下的同学排成合唱队形 说明: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队 ...

  4. 带额外toggle()功能的jquery库

    <html><head><meta http-equiv="Content-Type" content="text/html;charset ...

  5. 新书到手 TRANSACTION PROCESSING:CONCEPTS AND TECHNIQUES

    新书到手 TRANSACTION PROCESSING:CONCEPTS AND TECHNIQUES Jim Gray大神的著作 本文版权归作者所有,未经作者同意不得转载.

  6. .NET面试题系列[15] - LINQ:性能

    .NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...

  7. ABP理论学习之功能管理

    返回总目录 本篇目录 介绍 功能类型 定义功能 检查功能 功能管理者 版本说明 介绍 大多数的Saas(多租户)应用都有不同 功能的 版本(包).因此,他们可以给租户(客户)提供不同的 价格和功能选项 ...

  8. Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上)

    Python黑帽编程 4.1 Sniffer(嗅探器)之数据捕获(上) 网络嗅探,是监听流经本机网卡数据包的一种技术,嗅探器就是利用这种技术进行数据捕获和分析的软件. 编写嗅探器,捕获数据是前置功能, ...

  9. 《HiWind企业快速开发框架实战》(2)使用HiWind创建自己的项目

    <HiWind企业快速开发框架实战>(2)使用HiWind创建自己的项目 关于HiWind HiWind企业快速开发框架,是基于.NET+EasyUi(支持各种前端扩展,后面将扩展Boot ...

  10. 关于Unicode,字符集,字符编码,每个程序员都应该知道的事

    关于Unicode,字符集,字符编码,每个程序员都应该知道的事 作者:Jack47 李笑来的文章如何判断一个人是否聪明?中提到: 必要.清晰.且准确的概念,是一切思考的基石.所谓思考,很大程度上,就是 ...