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: 检查对象集合中是否有元素含 ...
随机推荐
- Codeforces 580D Kefa and Dishes(状压DP)
题目大概说要吃掉n个食物里m个,吃掉各个食物都会得到一定的满意度,有些食物如果在某些食物之后吃还会增加满意度,问怎么吃满意度最高. dp[S][i]表示已经吃掉的食物集合是S且刚吃的是第i个食物的最大 ...
- Windows RC版、RTM版、OEM版、RTL版、VOL版的区别
Windows 版本号标识区别一览表: 版本缩写 版本全称 版本意义 Alpha版 Alpha 内部测试版,一般不会向外部发布,会有很多Bug,只供测试人员使用,如果您看到Alpha版本了,一般来讲对 ...
- 使用GDB 修改MySQL参数不重启
link:http://blog.chinaunix.net/uid-20785090-id-4016315.html mysql很多参数都需要重启才能生效,有时候条件不允许,可以使用gdb作为最后的 ...
- Let’s encrypt 计划为网站提供免费的基本 SSL 证书,以加速互联网从 HTTP 向 HTTPS 过渡。
Let’s encrypt 计划为网站提供免费的基本 SSL 证书,以加速互联网从 HTTP 向 HTTPS 过渡. 该项目由Mozilla.Cisco.Akamai.IdenTrust.EFF 和密 ...
- HDU3068最长回文 题解
题目大意: 求字符串的最长回文子串的长度. 思路: Manacher板题,Hash可能会T.要学习Manacher,可参考https://www.felix021.com/blog/read.php? ...
- Infragistics公司的UltraWebGrid控件在显示的时候报“theForm” 未定义错误的解决。
在项目中使用了Infragistics公司的UltraWebGrid控件,浏览器中报错,“theForm” 未定义,并且造成客户端js,滚动条,失效.最后查官网论坛找到问题.需要把web.config ...
- nodejs高大上的部署方式-PM2
1.最常用的属nohup了,其实就是在后台执行进程,末尾加个& [zhoujie@ops-dev ~]$ nohup node /home/zhoujie/ops/app.js & ...
- UWP ComboBox下拉选项滚动循环问题
在UWP开发中遇到个小问题,ComboBox的Item太多的话,列表会重复,并且无限循环,Google了一下后发现这貌似是Metro应用的老问题了,由于ComboBox的Items使用的是Carous ...
- JS手机访问PC端网站自动跳转到手机端网站
<script type="text/javascript"> //移动端url跳转,自定义部分开始 function mobile_device_detect(url ...
- Apache Jmeter发送post请求
下面用Jmeter发送一个post请求, 对应的js代码如下: $("#register_a").click(function() { var name = $("#un ...