jQuery实战教程 可想实现一个自己的简单jQuery库?(三)
阿萨 2018-03-23 来源 :网络 阅读 1002 评论 0

摘要:本系列jQuery实战教程将给大家系统的讲解一些库的知识点 ,看完这系列文章会让你对实现一个自己的简单jQuery库有更加清晰的理解和运用。

本系列jQuery实战教程将给大家系统的讲解一些库的知识点   ,看完这系列文章会让你对实现一个自己的简单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方法我们也可以用这样的办法:)


希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程