亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

可想自己造一個jQuery庫?(二)

標簽:
JQuery
前言

1.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。
2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery
3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery,也想自己实现一个jQuery的。
4.本系列就是以一些不同的方法手段,简单的代码,实现了一套与jQuery一样的API
5.最后在每篇文章的最后会留下github源码地址,希望能得到大家star的认可与支持,谢谢。

Lesson-1 初步体验

这个版本呢,先来加四个很简单的方法感受感受下!

首先3个class不用说了

hasClass : function(cls) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    for (var i = 0; i < this.length; i++) {
        if (this[i].className.match(reg)) return true;
            return false;
    }
    return this;
},
addClass : function(cls) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    for (var i = 0; i < this.length; i++) {
        if(!this[i].className.match(reg))
            this[i].className += ' ' + cls;
    }
    return this;
},
removeClass : function(cls) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    for (var i = 0; i < this.length; i++) {
        if (this[i].className.match(reg))
            this[i].className = this[i].className.replace(' ' + cls,'');
    }
    return this;
}

然后新增一个

css : function(attr,val) {//链式测试
    console.log(this.length);
    for(var i = 0;i < this.length; i++) {
        if(arguments.length == 1) {
            return getComputedStyle(this[i],null)[attr];
        }
        this[i].style[attr] = val;
    }
    return this;
}

这些其实都很简单,我们都要记住,我们封装的DOM对象是一个数组,所以一定都需要用循环来进行各种个样的处理.

然后css这我是用arguments的个数来进行判断是取值还是设值.

最后千万别忘了每个方法的最后都要return this以便链式调用.

大家可以自行拿这几个方法 log出来看看是否是与jQuery的一样就知道是否成功了.

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-1
可想自己造一个jQuery库?(一):http://www.xianlaiwan.cn/article/1926

點擊查看更多內容
6人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
165
獲贊與收藏
1382

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消