zoukankan      html  css  js  c++  java
  • zepto源码--核心方法9(管理包装集)--学习笔记

    今天介绍的是与子元素相关的函数,children, find, contents

    children

    从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤。

    仔细看来,最终实现children依赖的是内部定义的children函数。

    在支持直接获取元素children属性的浏览器当中,直接通过elment.children获取子元素,通过调用slice函数,返回数组对象,如果不支持element.children,则对element.childNodes进行遍历,返回节点为1,即返回元素节点的子元素。

    从children函数来看,实现的是获取的是每个匹配元素集合元素的直接子元素,对外暴露的children方法,增加了选择器参数,如果给定选择器参数,则返回的是符合选择器的直接子元素。

    find

    find函数相对复杂一点,主要在于需要区分传入的参数。

    先定义变量result,用于存放匹配结果,将this赋值给$this。

    最后返回result。

    中间部分就是实现获取匹配结果,并存入result。

    if (!selector) result = $()   如果没有传递参数,则直接将$()作为结果赋值给result。

    如果传入的参数为对象类型,如$('#form1').find($('input')),调用filter函数,对$('input')进行过滤,选择是$('#form1')的子元素的$('input')返回。

    这里有两个this 的情况,需要分清楚,node = this,表示当前的每一个input元素,通过调用some函数,some函数绑定的上下文是$this,是选择的包装集,这里指的是$('#form1')。some函数通过$.contains(parent, node)判断当前的选择是否是包装集的子元素。多说一句some函数,遍历整个数组,只要毁掉函数中有一个返回真值就返回真。这里就是说,只要当前的input元素是包装集中的任何一个的子元素,就表示当前的元素是包装集的子元素。

    如果包装集中只有一个对象,则直接调用zepto选择器,并将结果包装成zepto对象,再赋值给result。

    如果包装集对象是多个,则对多个对象逐一遍历,调用zepto选择器,获取匹配的元素,赋值给result,这里没有用$包装,是因为this.map会进行一次包装。

    如此就实现了,选择所有子元素。

    contents

    该函数与children类似,但是contents获取的是包括文本节点的子元素,常常用来获取<iframe>元素的内容,contentDocument 属性以 HTML 对象返回框架容纳的文档。

  • 相关阅读:
    洛谷 P4071 [SDOI2016]排列计数
    问题 G: 【一本通提高同余问题】计算器
    问题 A: 【一本通提高组合数学】Bullcow 牡牛和牝牛
    浅谈卢卡斯定理(非扩展)
    2019西安联训B层 Day 6练习题 问题 C: 扩展欧几里得
    react使用lazy()和Suspense实现根据路由进行代码分割
    react-loadable 使用高阶组件动态import组件,实现代码分割(code-splitting)
    react angular vue流行度对比
    react 服务端渲染(ssr) 框架 Next.js
    超级字符串内class正则匹配替换 可以用于css modules
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6087878.html
Copyright © 2011-2022 走看看