• zepto源码--核心方法8(管理包装集)--学习笔记


    继续包装集过滤的相关函数的介绍,今天介绍与父元素相关的函数,parent, parents, closest, offsetParent

    parent

    获取对象集合中每个元素的直接父元素。

    与上篇文章介绍的next和prev的原理类似,也是获取当前元素的属性,来确定其父元素,即获取parentNode属性。

    parents

    获取对象集合每个元素所有的祖先元素。如果css选择器参数给出,过滤出符合条件的元素。

    定义数组var ancestors = []用于存储获取到的父元素,将选取的对象包装集赋值给nodes,如果当前对象存在,则进行循环遍历,利用$.map的方法对整个包装集循环,并处理每一个节点,如果当前的节点存在父元素,并且当前父节点不是document,而且存储的数组ancestors中,不存在当前的父节点,则将当前的父节点存入数组。返回父节点给nodes,再对父节点进行遍历,不断重复,直到当前的父节点选取到document对象为止。

    最后一步是对所保存的ancestors进行按照选择器selector过滤,调用filtered函数,并返回过滤后的结果。

    转换成直白的语言就是:

      对选取的对象的所有父节点遍历,并存储,然后对当前对象的父节点再来一次遍历存储所有父节点,一层层网上,直到元素节点为document为止。

    cosest

    从元素本身开始,逐级向上级元素匹配,并返回最先匹配selector的元素。如果给定context节点参数,那么只匹配该节点的后代元素。

    与parents非常类似,但是他并不是返回所有祖先元素,而是返回祖先元素当中最先匹配选择器的祖先元素。

    offsetParent:

    找到第一个定位过的祖先元素。

    定义变量parent = this.offsetParent || document.body

    如果parent存在,并且不是根元素,而且parent的position属性为static的话,继续向上寻找父元素,直到选取到祖先元素的position属性不是static的为止。

    用直白点的语言讲述parent, parents, closest, offsetParent的用法

    parent: 获取选择的包装集复合选择器的直接父元素;

    parents:获取选择的包装集的所有符合选择器的祖先元素;

    closest:获取选择的包装集的最先匹配选择器的祖先元素;

    offsetParent: 选取祖先元素当中最接近包装集本身的定位过的元素。









  • 相关阅读:
    面试题3(百思教育面试软件开发岗位笔试题)
    python开发工具安装
    涉及 委托事件 程序运行越来越慢
    整理收藏
    数据库作业创建
    剑指offer-面试题37:序列化二叉树及二叉树的基本操作和测试
    剑指offer-面试题41:数据流中的中位数
    快速排序及其优化
    冒泡排序算法及相应的优化
    leetcode问题:缺失数字
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6084321.html
Copyright © 2020-2023  润新知