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: 检查对象集合中是否有元素含 ...
随机推荐
- EF框架step by step(4)—DBcontext应用于已存在数据库
EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first,前面都已经简单介绍过了.下面简单小结一下:1.Database First ...
- 利用ngxtop实时监控nginx的访问情况
关于对nginx web server的实时访问的实时监控问题,我很久之前就想实现的,现在虽有nginx自带的status扩展,但那是全局的,无法细分到vhost,并且提供的metric也很少,加之目 ...
- require.js 入门学习 (share)
以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...
- 【Oracle】多次提交造成性能慢及处理方法
[问题背景] 2013-08-02 为某地市做了1个脚本用于帮客户账户添加一个新的账本.犯了一个很二的错,存储过程如下(SQL记录用户以后查询),一晚上只执行了190W数据 脚本如下 数据库中总共有5 ...
- linux命令之 top, free,ps
linux终端查看cpu和内存使用情况 t一.op进入全屏实时系统资源使用信息查看 PID:进程的ID USER:进程所有者 PR:进程的优先级别,越小越优先被执行 NInice:值 VIRT:进程占 ...
- 整理iOS9适配
整理iOS9适配 本文主要是说一些iOS9适配中出现的坑,如果只是要单纯的了解iOS9新特性可以看瞄神的开发者所需要知道的 iOS 9 SDK 新特性.9月17日凌晨,苹果给用户推送了iOS9正式版, ...
- 在docker 中搭建gitlab环境
docker run --name gitlab -it -p : -p : -p : \ --env 'GITLAB_SECRETS_DB_KEY_BASE=Rpwq35wjLJ5N6CrkvdXs ...
- GO语言练习:多返回值函数
1.代码 2.运行 1.代码 package main import ( "fmt" "strconv" ) func getValue(n int) (flo ...
- Oracle数据库合并行记录,WMSYS.WM_CONCAT 函數的用法
Sql代码 select t.rank, t.Name from t_menu_item t; 10 CLARK 10 KING 10 MILLER 20 ADAMS 20 F ...
- Compound Words
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=91209#problem/C 题意: 有一堆按照字典序排好的字符串,问你有多 ...