设为首页 加入收藏

TOP

读 Zepto 源码之集合元素查找(三)
2017-10-13 10:50:25 】 浏览:1787
Tags:Zepto 源码 集合 元素 查找
elector).size() }) },

判断集合中是否有包含指定条件的子元素,将符合条件的元素返回。

有两种调用方式

has(selector)   ? collection
has(node)   ? collection

参数可以为选择器或者节点。

has 其实调用的是 filter 方法,这个方法上面已经解读过了。filter 的回调函数中根据参数的不同情况,调用了不同的方法。

isObject(selector) 用来判断 selector 是否为 node 节点,如果为 node 节点,则调用 $.contains 方法,该方法已经在《读Zepto源码之工具函数》说过了。

如果为选择器,则调用 find 方法,然后再调用 size 方法,size 方法返回的是集合中元素的个数。这个在《读Zepto源码之集合操作》有讲过,如果集合个数大于零,则表示满足条件。

.eq()

eq: function(idx) {
  return idx === -1 ? this.slice(idx) : this.slice(idx, +idx + 1)
},

获取集合中指定的元素。

这里调用了 slice 方法,这个方法在上一篇《读Zepto源码之集合操作》已经说过了。如果 idx-1 时,直接调用 this.slice(idx) ,即取出最后一个元素,否则取 idxidx + 1 之间的元素,也就是每次只取一个元素。+idx+1 前面的 + 号其实是类型转换,确保 idx 在做加法的时候为 Number 类型。

.first()

first: function() {
  var el = this[0]
  return el && !isObject(el) ? el : $(el)
},

first 是取集合中第一个元素,这个方法很简单,用索引 0 就可以取出来了,也就是 this[0]

el && !isObject(el) 用来判断是否为 zepto 对象,如果不是,用 $(el) 包裹,确保返回的是 zepto 对象。

.last()

last: function() {
  var el = this[this.length - 1]
  return el && !isObject(el) ? el : $(el)
},

last 是取集合中最后一个元素,这个的原理跟 first 一样,只不过变成了取索引值为 this.length - 1 ,也就是最后的元素。

.closest()

closest: function(selector, context) {
  var nodes = [],
      collection = typeof selector == 'object' && $(selector)
  this.each(function(_, node) {
    while (node && !(collection ? collection.indexOf(node) >= 0 : zepto.matches(node, selector)))
      node = node !== context && !isDocument(node) && node.parentNode
      if (node && nodes.indexOf(node) < 0) nodes.push(node)
        })
  return $(nodes)
},

从元素本身向上查找,返回最先符合条件的元素。

这个方法也有三种调用方式

closest(selector, [context])   ? collection
closest(collection)   ? collection 
closest(element)   ? collection 

如果指定了 zepto 集合或者 element ,则只返回匹配给定集合或 element 的元素。

collection = typeof selector == 'object' && $(selector)

这段是判断 selector 是否为 collectionelement ,如果是,则统一转化为 zepto 集合。

然后对集合遍历,在 each 遍历里针对集合中每个 node 节点,都用 while 语句,向上查找符合条件的元素。

node && !(collection ? collection.indexOf(node) >= 0 : zepto.matches(node, selector))

这段是 while 语句的终止条件。 node 节点必须存在,如果 selectorzepto 集合或者 element ,也即 collection 存在, 则要找到存在于 collection 中的节点(collection.indexOf(node) >= 0), 否则,节点要匹配指定的选择器(zepto.matches(node, selector)

while 循环中,是向上逐级查找节点的过程:

node = node !== context && !isDocument(node) && node.parentNode

当前 node 不为指定的上下文 context 并且不为 document 节点时,向上查找(node.parentNode

if (node && nodes.indexOf(node) < 0) nodes.push(node)

while 循环完毕后,如果 node 节点存在,并且 nodes 中还不存在 node ,则将 node push 进 nodes 中。

最后返回 zepto 集合。

.pluck()

pluck: function(property) {
  return $.map(this, function(el) { return el[property] })
},

返回集合中所有元素指定的属性值。

这个方法很简单,就是对当前集合遍历,然后取元素指定的 property 值。

.parents()

parents: function(selector) {
  var ancestors = [],
      nodes = this
  while (nodes.length > 0)
    nodes = $.map(nodes, function(node) {
      if ((node = node.parentNode) && !isDocument(node) && ancestors.indexOf(node) < 0) {
        ancestors.push(node)
        return node
      }
    })
    return filtered(ancestors, selector)
},

返回集合中所有元素的所有祖先元素。

nodes 的初始值为当前集合,while 循环的条件为集合不为空。

使用 map 遍历 nodes ,将 node 重新赋值为自身的父级元素,如果父级元素存在,并且不是 document 元素,而且还不存在于 ancestors 中时,将 node 存入保存祖先元素的 ancestors 中,并且 map 回调的返回值是 node ,组成新的集合赋值给 nodes ,直到所有的祖先元素遍历完毕,就可以退出 while 循环。

最后,调用上面说到的 filtered 方法,找到符合 selector 的祖先元素。

.parent()

parent: function(selector) {
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇html开发基础 下一篇Javascript继承机制的实现

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目