可想实现一个自己的简单jQuery库？(三)

xiaoxiaozi 发布于2019-08-21 10:48 / 2440人阅读

摘要：这个版本新增这个选择元素的方法还是比较常用的首先我们需要一个来过滤我们需要的上面那段比较简单就是普通的过滤下元素看下方法的源码就知道我传入数组对象的个对象然后取它的下一个同辈元素直接返回方法同理这段是取到第一个父元素由于返回的不是原生的对

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://segmentfault.com/a/1190000003997282

GPU云服务器云服务器 js实现的简单特效怎么搭建一个自己的视频网站如何搭建一个自己的服务器用c实现简单的shell

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86212.html

可想实现一个自己的简单jQuery库？(四)

摘要：修改里的判断新增我们知道在中还有一种选择器写法在加载完毕后马上就执行这样的方法会比更快所以对于我们来说一定是必不可少的我们在方法中要新增以下判断首先可能为的情况比如传入的是原生对象数组对象另外要记得转为数组因为有可能是一个元素比如是等否则 Lesson-3 修改f(selector) 里的判断,新增domReady 我们知道在jQuery中还有一种选择器写法 $(function()...

wangbjun 2019-08-21 10:48 评论0 收藏0
可想实现一个自己的简单jQuery库？(九)

摘要：事件机制在讲事件机制之前呢我们有一个很重要的东西要先讲那就是如何实现事件委托代理只有必须先明白了如何实现一个事件委托我们才能更好的去实现和在我看来和里最难实现的就是他的事件委托以上是我对整个委托的实现当然在这只做了非常简单的实现没有对很多 Lesson-8 事件机制在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理). 只有必须先明白了如何实现一个事件委...

gnehc 2019-08-21 10:49 评论0 收藏0
可想实现一个自己的简单jQuery库？(九)

摘要：事件机制在讲事件机制之前呢我们有一个很重要的东西要先讲那就是如何实现事件委托代理只有必须先明白了如何实现一个事件委托我们才能更好的去实现和在我看来和里最难实现的就是他的事件委托以上是我对整个委托的实现当然在这只做了非常简单的实现没有对很多 Lesson-8 事件机制在讲事件机制之前呢,我们有一个很重要的东西要先讲,那就是如何实现事件委托(代理). 只有必须先明白了如何实现一个事件委...

archieyang 2019-08-01 14:54 评论0 收藏0