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

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

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

標簽:
JQuery
前言

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

Lesson-2

这个版本新增 next(),prev(),parent(),parents()

这4个选择元素的方法还是比较常用的

首先我们需要一个func来过滤我们需要的dom

function sibling(cur, dir) {
    while ((cur = cur[dir]) && cur.nodeType !== 1) {}
    return cur;
}

上面那段比较简单,就是普通的过滤下元素

next : function() {
    return sibling(this[0], "nextSibling");
},
prev : function() {
    return sibling(this[0], "previousSibling");
},

看下next方法的源码就知道,我传入Kodo数组对象的0个dom对象,然后取它的下一个同辈元素,直接返回,prev方法同理

parent : function() {
    var parent = this[0].parentNode;
    parent && parent.nodeType !== 11 ? parent : null;
    var a = Kodo();
        a[0] = parent;
        a.selector = parent.tagName.toLocaleLowerCase();
        a.length = 1;
    return a;
},

这段是取到第一个父元素,由于parent()返回的不是原生的DOM对象,是封装过的数组对象(Kodo),那我们就想办法构造一个新的Kodo对象即可

所以我在里面var了一个 Kodo,然后设置这个Kodo数组对象的selector等配置,然后直接返回这个新的Kodo对象

parents : function() {
    var a = Kodo(),
        i = 0;
    while ( (this[0] = this[0][ 'parentNode' ]) && this[0].nodeType !== 9 ) {
      if ( this[0].nodeType === 1 ) {
        a[i] = this[0];
        i++;
      }
    }
    a.length = i;
    return a;
}

同理,在jQuery的parents方法中,返回的依旧是jQuery对象.我们依旧用上面的办法,构造一个新对象并且返回就好了!

中间一层while循环,依次过滤出我们需要的dom元素,然后把他们都赋值到我们新var的对象里,最后别忘了设置一下新对象的length属性,返回我们的新对象即可!

看了上面几个方法是不是觉得!其实很多时候我们完全可以自己新创建一个对象,然后配置好它直接返回这个新对象.比如find方法我们也可以用这样的办法:)

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

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

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

評論

作者其他優質文章

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

關注作者,訂閱最新文章

閱讀免費教程

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

100積分直接送

付費專欄免費學

大額優惠券免費領

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

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

幫助反饋 APP下載

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

公眾號

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

舉報

0/150
提交
取消