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 对象返回框架容纳的文档。