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

后面应该会有几篇连续介绍关于zepto包装集的文章。涉及的函数较多,就分别介绍,今天介绍几个使用关系获取包装集的方法。prev, next, first, last, siblings, eq

prev

看代码,只有一行,涉及到一个pluck函数,一直以为前面介绍过了,但是我看了下似乎没有介绍,补充一下:

API中只有一句话:获取对象集合中每一个元素的属性值。

看前文介绍的有关$.map函数之后,相对比较容易理解的,这里就是对包装集进行遍历,返回一个新的数组,这个新的数组是由含有所传入的参数这一属性的新的包装集。这里主要理解的是el[property]。

再回头看prev函数,先对包装集调用pluck函数,取得具有‘previousElementSibling‘这一属性的元素,并将其包装成包装集,再调用filter进行过滤,是否传递了参数selector,否则参数设为通配符*。

next

实现过程与prev完全一致,只是在获取对象的时候,换成获取具有‘nextElementSibling‘属性的元素。仅此一点差别而已。

siblings

获取对象集合中所有元素的兄弟节点。如果给定CSS选择器参数,过滤出符合选择器的元素。

看源码,因为需要依据传入的selector参数进行过滤,所以调用filtered(nodes, selector)函数过滤,对选中的包装集遍历,获取遍历元素的父元素的所有子元素,排除遍历的这一元素,即为所有的兄弟级元素。理解了其执行过程,对照源码,就能很容易理解源码了。

eq

从当前对象集合中获取给定索引值(以0为基数)的元素。

使用slice函数调用,该函数是模拟数组原生方法slice的,传递的参数正负值均可,负值参数即从后往前取,使用slice唯一需要注意的是,-1,即取最后一个元素,直接使用this.slice(-1)。‘+ idx+1‘ 前面增加一个加号, 是为了防止用户以字符串形式传入数字,隐式转换字符串为数字。

first

取包装集中的第一个元素,其实没啥可介绍的,在前面介绍过eq函数的情况下,可以通过eq来实现

last

取包装集中的最后一个,也可以通过eq实现。

时间: 2024-08-23 22:50:19

zepto源码--核心方法7(管理包装集)--学习笔记的相关文章

zepto源码--核心方法5(文本操作)--学习笔记

涉及到文本内容的主要有三个函数:html, text, val. 我们已经见过多次,一个函数多种用途的情况,今天这三个函数也不例外,既可以获取内容,也可以设置内容.判断条件就是有没有传入参数,如果没有传入参数,则表示获取内容,否则表示设置内容.判断条件也基本类似: 0 in arguments,后面不再对该条件判断解析.分两步介绍函数,1为设置内容,2为获取内容. html 获取或设置对象集合中元素的HTML内容. 1.利用javascript原生属性innerHTML获取元素的文本内容(包含h

zepto源码--核心方法5(显示隐藏)--学习笔记

在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插件模块 show 相比较于jQuery的show函数,这里真的很简单了,没有传入任何参数,如果在标签上以内联样式的形式存在style="display:none",直接将该内联样式的none改为空,如果不是内联样式,则通过获取计算后的样式,getComputedStyle(this, ''

zepto源码--filtered, contains,funcArg,setAttribute,className,deserializeVale--学习笔记

几个方法 1.filtered 目标是对节点按照一定的选择器进行过滤. 如果传入了过滤选择器,则在nodes节点下,选择符合选择器的节点: 如果没有传入选择器,则返回节点本身,转化为zepto节点. 2.$.contains,是一个对外暴露的方法. 检查父节点是否包含给定的dom节点,如果两者是相同的节点,则返回 false. 两种情况: a).如果浏览器支持document.documentElement.contains方法,在两者节点不同的情况下,调用parent.contains(nod

Scala并发编程实战初体验及其在Spark源码中的应用解析之Scala学习笔记-56

package com.leegh.actor import scala.actors.Actor /** * @author Guohui Li */object First_Actor extends Actor { def act() { for (i <- 1 to 10) { println("Step : " + i) println(Thread.currentThread().getName) Thread.sleep(2000) } }} object Seco

4月12日学习笔记——jQuery管理包装集

创建新的元素 (1)使用 HTML DOM 创建元素 1 //使用 Dom 标准创建元素 2 var select = document.createElement("select"); 3 select.options[0] = new Option("加载项 1", "value1"); 4 select.options[1] = new Option("加载项 2", "value2"); 5 sel

读 Zepto 源码之内部方法

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)

读 Zepto 源码之内部方法[转载]

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)

读Zepto源码之内部方法

数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slice zepto 一开始就定义了一个空数组 emptyArray,定义这个空数组是为了取得数组的 concat.filter.slice 方法 compact function compact(array) { return filter.call(array, function(item)

Linux内核源码分析方法

  一.内核源码之我见 Linux内核代码的庞大令不少人“望而生畏”,也正因为如此,使得人们对Linux的了解仅处于泛泛的层次.如果想透析Linux,深入操作系统的本质,阅读内核源码是最有效的途径.我们都知道,想成为优秀的程序员,需要大量的实践和代码的编写.编程固然重要,但是往往只编程的人很容易把自己局限在自己的知识领域内.如果要扩展自己知识的广度,我们需要多接触其他人编写的代码,尤其是水平比我们更高的人编写的代码.通过这种途径,我们可以跳出自己知识圈的束缚,进入他人的知识圈,了解更多甚至我们一