【zepto源码--核心方法(类数组相关)--学习笔记】的更多相关文章

zepto源码--核心方法(类数组相关)--学习笔记

从这篇起,在没有介绍到各类插件之前,后面将陆续介绍zepto对外暴露的核心方法.即$.fn={}里面的所有方法的介绍.会配合zepto的API进行介绍. 其实前面已经介绍了几个,如width,height,prepend等等,今天开始的是zepto源码里面,明确的封装在$.fn对象里面的方法. 本篇介绍的是与类数组(NodeList)操作相关的各种方法: forEach,reduce,push,sort,splice,indexOf,concat,map,slice,toArray,each,f…

zepto源码--核心方法10（位置）--学习笔记

今天基本上就是zepto学习笔记的最后一篇了,介绍一下有关位置的函数,position, offset, scrollLeft, scrollTop scrollLeft 如果所选取的包装集不存在,则直接返回. 定义变量: var hasScrollLeft = 'scrollLeft' in this[0] 在zepto中用到了很多类似的特性检测的方法,判断浏览器是否支持mousedown一特性,如果支持,则直接使用该特性,如果不支持,则利用其他方法来实现. 这里是在判断浏览器是否支持scro…

zepto源码--核心方法9（管理包装集）--学习笔记

今天介绍的是与子元素相关的函数,children, find, contents children 从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤. 仔细看来,最终实现children依赖的是内部定义的children函数. 在支持直接获取元素children属性的浏览器当中,直接通过elment.children获取子元素,通过调用slice函数,返回数组对象,如果不支持element.children,则对element.childNodes进行…

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

后面应该会有几篇连续介绍关于zepto包装集的文章.涉及的函数较多,就分别介绍,今天介绍几个使用关系获取包装集的方法.prev, next, first, last, siblings, eq prev 看代码,只有一行,涉及到一个pluck函数,一直以为前面介绍过了,但是我看了下似乎没有介绍,补充一下: API中只有一句话:获取对象集合中每一个元素的属性值. 看前文介绍的有关$.map函数之后,相对比较容易理解的,这里就是对包装集进行遍历,返回一个新的数组,这个新的数组是由含有所传入的参数这一…

zepto源码--核心方法3（属性相关）--学习笔记

继续$.fn方法 今天主要介绍几个跟属性操作相关的方法attr, removeAttr, prop, data attr 读取或设置dom的属性.如果没有给定value参数,则读取对象集合中第一个元素的属性值.当给定了value参数.则设置对象集合中所有元素的该属性的值.当value参数为null,那么这个属性将被移除(类似removeAttr),多个属性可以通过对象键值对的方式进行设置. 首先对参数进行条件判断,如果传入的参数name是字符串,并且value参数没传,则表示用户期望的行为是获取…

zepto源码--核心方法2（class相关）--学习笔记

继续上篇,本片主要介绍的是$.fn中与class相关的函数,包括hasClass, addClass, removeClass, toggleClass hasClass: 检查对象集合中是否有元素含有指定的class. 参数name为传入的需要检查对象集合中是否有这个class.如果没有传参,则直接返回false,不进行任何操作. 传入参数name的情况下,调用javascript原生函数some,来返回需要的结果. classRE(name)返回正则表达式作为some回调函数的this传入,…

zepto源码--核心方法8（管理包装集）--学习笔记

继续包装集过滤的相关函数的介绍,今天介绍与父元素相关的函数,parent, parents, closest, offsetParent parent 获取对象集合中每个元素的直接父元素. 与上篇文章介绍的next和prev的原理类似,也是获取当前元素的属性,来确定其父元素,即获取parentNode属性. parents 获取对象集合每个元素所有的祖先元素.如果css选择器参数给出,过滤出符合条件的元素. 定义数组var ancestors = []用于存储获取到的父元素,将选取的对象包装集赋…

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

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

zepto源码--核心方法6（显示隐藏）--学习笔记

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

zepto源码--核心方法4（包装）--学习笔记

主要介绍一下wrap, wrapAll, wrapInner, unwrap方法. wrapAll 在所有匹配元素外面包一个单独的结构.结构可以是单个元素或 几个嵌套的元素,并且可以是html字符串或者dom元素. 用文字解释一下,就是先把传入的参数转换为dom结构,插入到所选择的包装集的前面,然后将包装集插入到所插入的dom元素的最深层次的第一个子集里面. 逐行解释: structure = $(structure)是将传入的参数转换为dom元素,再使用before方法插入到所选择的包装集的第…