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

时间:2023-03-08 19:02:51
zepto源码--核心方法9(管理包装集)--学习笔记

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

children

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

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

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

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

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

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

find

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

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

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

最后返回result。

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

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

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

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

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

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

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

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

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

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

contents

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

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