可想完成一个本身的简朴jQuery库？(三)

这个版本新增 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://segmentfault.com/a/1190000003997282