脚本宝典收集整理的这篇文章主要介绍了可想实现一个自己的简单jQuery库?(三),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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], @H_360_60@"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
以上是脚本宝典为你收集整理的可想实现一个自己的简单jQuery库?(三)全部内容,希望文章能够帮你解决可想实现一个自己的简单jQuery库?(三)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。