码迷,mamicode.com
首页 > Web开发 > 详细

原生JS实现jquery的链式编程。

时间:2015-09-25 17:44:29      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/xiaohaoxuezhang/p/4838499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!