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实现。
zepto源码--核心方法7(管理包装集)--学习笔记的更多相关文章
- zepto源码--核心方法4(包装)--学习笔记
主要介绍一下wrap, wrapAll, wrapInner, unwrap方法. wrapAll 在所有匹配元素外面包一个单独的结构.结构可以是单个元素或 几个嵌套的元素,并且可以是html字符串或 ...
- zepto源码--核心方法10(位置)--学习笔记
今天基本上就是zepto学习笔记的最后一篇了,介绍一下有关位置的函数,position, offset, scrollLeft, scrollTop scrollLeft 如果所选取的包装集不存在,则 ...
- zepto源码--核心方法8(管理包装集)--学习笔记
继续包装集过滤的相关函数的介绍,今天介绍与父元素相关的函数,parent, parents, closest, offsetParent parent 获取对象集合中每个元素的直接父元素. 与上篇文章 ...
- zepto源码--核心方法(类数组相关)--学习笔记
从这篇起,在没有介绍到各类插件之前,后面将陆续介绍zepto对外暴露的核心方法.即$.fn={}里面的所有方法的介绍.会配合zepto的API进行介绍. 其实前面已经介绍了几个,如width,heig ...
- zepto源码--核心方法9(管理包装集)--学习笔记
今天介绍的是与子元素相关的函数,children, find, contents children 从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤. 仔细 ...
- zepto源码--核心方法5(文本操作)--学习笔记
涉及到文本内容的主要有三个函数:html, text, val. 我们已经见过多次,一个函数多种用途的情况,今天这三个函数也不例外,既可以获取内容,也可以设置内容.判断条件就是有没有传入参数,如果没有 ...
- zepto源码--核心方法3(属性相关)--学习笔记
继续$.fn方法 今天主要介绍几个跟属性操作相关的方法attr, removeAttr, prop, data attr 读取或设置dom的属性.如果没有给定value参数,则读取对象集合中第一个元素 ...
- zepto源码--核心方法6(显示隐藏)--学习笔记
在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插 ...
- zepto源码--核心方法2(class相关)--学习笔记
继续上篇,本片主要介绍的是$.fn中与class相关的函数,包括hasClass, addClass, removeClass, toggleClass hasClass: 检查对象集合中是否有元素含 ...
随机推荐
- [转]JavaScript跨域总结与解决办法
转载自http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html仅用作个人读书笔记. 什么是跨域 1.document.domain+ ...
- Codeforces 677E Vanya and Balloons(DP + 一些技巧)
题目大概说给一张地图,地图每个格子都有0到9中的某一个数字.现在要在一个格子放炸弹,炸弹爆炸后水柱有两种扩展方式,一种是上.下.左.右,另一种是左上.右下.右上.左下,且四个方向的长度都一样.问放哪个 ...
- 每天一个linux命令--locate
linux下,不知道自己安装的程序放在哪里了,可以使用locate命令进行查找. [hongye@dev107 ~]$ locate activemq.xml /home/hongye/hongyeC ...
- ural 1252. Sorting the Tombstones
1252. Sorting the Tombstones Time limit: 1.0 secondMemory limit: 64 MB There is time to throw stones ...
- ural 1251. Cemetery Manager
1251. Cemetery Manager Time limit: 1.0 secondMemory limit: 64 MB There is a tradition at the USU cha ...
- ACM 笨小熊
笨小熊 时间限制:2000 ms | 内存限制:65535 KB 难度:2 描述 笨小熊的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项 ...
- jquery实现隐藏,简化和更多
HTML代码: <div class="box"> <div class="header"> <h3>图书分类</h3 ...
- Linux安装卸载查看vsftpd
Linux & vsftpd 相关的命令: 查看---rpm -qa | grep vsftpd 卸载---rpm -e vsftpd 安装---rpm -ivh /media/(在此tab ...
- Redis常用命令(一)
Redis::__construct描述:创建一个Redis客户端范例:$redis = new Redis(); connect, open描述:实例连接到一个Redis.参数:host: stri ...
- Maven3路程(一)用Maven创建第一个web项目(2)
工具/原料 Windows 系统 JDK 1.5 及以上版本 Maven 3.0 及以上版本 方法/步骤 1 首先检查Eclipse是否已经添加的Maven插件,打开Eclipse, 依次选择 &qu ...