資訊專欄INFORMATION COLUMN
摘要：這個(gè)版本新增這個(gè)選擇元素的方法還是比較常用的首先我們需要一個(gè)來過濾我們需要的上面那段比較簡單就是普通的過濾下元素看下方法的源碼就知道我傳入數(shù)組對(duì)象的個(gè)對(duì)象然后取它的下一個(gè)同輩元素直接返回方法同理這段是取到第一個(gè)父元素由于返回的不是原生的對(duì)
Lesson-2
這個(gè)版本新增 next(),prev(),parent(),parents()
這4個(gè)選擇元素的方法還是比較常用的
首先我們需要一個(gè)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數(shù)組對(duì)象的0個(gè)dom對(duì)象,然后取它的下一個(gè)同輩元素,直接返回,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;
},
這段是取到第一個(gè)父元素,由于parent()返回的不是原生的DOM對(duì)象,是封裝過的數(shù)組對(duì)象(Kodo),那我們就想辦法構(gòu)造一個(gè)新的Kodo對(duì)象即可
所以我在里面var了一個(gè) Kodo,然后設(shè)置這個(gè)Kodo數(shù)組對(duì)象的selector等配置,然后直接返回這個(gè)新的Kodo對(duì)象
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對(duì)象.我們依舊用上面的辦法,構(gòu)造一個(gè)新對(duì)象并且返回就好了!
中間一層while循環(huán),依次過濾出我們需要的dom元素,然后把他們都賦值到我們新var的對(duì)象里,最后別忘了設(shè)置一下新對(duì)象的length屬性,返回我們的新對(duì)象即可!
看了上面幾個(gè)方法是不是覺得!其實(shí)很多時(shí)候我們完全可以自己新創(chuàng)建一個(gè)對(duì)象,然后配置好它直接返回這個(gè)新對(duì)象.比如find方法我們也可以用這樣的辦法:)
github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-2
可想造一個(gè)屬于你自己的jQuery庫?(一)：http://segmentfault.com/a/1190000003997282
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86212.html
摘要：修改里的判斷新增我們知道在中還有一種選擇器寫法在加載完畢后馬上就執(zhí)行這樣的方法會(huì)比更快所以對(duì)于我們來說一定是必不可少的我們在方法中要新增以下判斷首先可能為的情況比如傳入的是原生對(duì)象數(shù)組對(duì)象另外要記得轉(zhuǎn)為數(shù)組因?yàn)橛锌赡苁且粋€(gè)元素比如是等否則 Lesson-3 修改f(selector) 里的判斷,新增domReady 我們知道在jQuery中還有一種選擇器寫法 $(function()...
摘要：事件機(jī)制在講事件機(jī)制之前呢我們有一個(gè)很重要的東西要先講那就是如何實(shí)現(xiàn)事件委托代理只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委托我們才能更好的去實(shí)現(xiàn)和在我看來和里最難實(shí)現(xiàn)的就是他的事件委托以上是我對(duì)整個(gè)委托的實(shí)現(xiàn)當(dāng)然在這只做了非常簡單的實(shí)現(xiàn)沒有對(duì)很多 Lesson-8 事件機(jī)制 在講事件機(jī)制之前呢,我們有一個(gè)很重要的東西要先講,那就是如何實(shí)現(xiàn)事件委托(代理). 只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委...
摘要：事件機(jī)制在講事件機(jī)制之前呢我們有一個(gè)很重要的東西要先講那就是如何實(shí)現(xiàn)事件委托代理只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委托我們才能更好的去實(shí)現(xiàn)和在我看來和里最難實(shí)現(xiàn)的就是他的事件委托以上是我對(duì)整個(gè)委托的實(shí)現(xiàn)當(dāng)然在這只做了非常簡單的實(shí)現(xiàn)沒有對(duì)很多 Lesson-8 事件機(jī)制 在講事件機(jī)制之前呢,我們有一個(gè)很重要的東西要先講,那就是如何實(shí)現(xiàn)事件委托(代理). 只有必須先明白了如何實(shí)現(xiàn)一個(gè)事件委...
閱讀 3291·2021-11-08 13:21
閱讀 1274·2021-08-12 13:28
閱讀 1494·2019-08-30 14:23
閱讀 1993·2019-08-30 11:09
閱讀 903·2019-08-29 13:22
閱讀 2750·2019-08-29 13:12
閱讀 2623·2019-08-26 17:04
閱讀 2391·2019-08-26 13:22
