$(function(){}) 在页面加载完成后运行的方法 等于window.onload; $("#id"),$(this) 都和jquery一样, tap方法不能阻止事件冒泡,因为zepto是把touch事件和手势事件注册到了document上面.…

1.Zepto对象不能自定义事件 例如执行:$({}).bind('cust',function(){}); 结果:TypeError:Object#hasnomethod'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如:$('').bind('cust',function(){}); 2.Zepto的选择器表达式:[name=value]中value必须用双引号"or单引号‘括起来 例如执行:$('[data-userid=123123123]')…

$.contains: 判断节点是否存在的很好方式[另一个提供类似功能的函数是has] $.grep: 过滤数组 $.type: 获取变量类型 $.closest: 返回最先匹配到的祖先元素 $.map:循环遍历数组,并返回函数处理过后的新数组 $.proxy: 功能类似apply,call toggle(settings): 显示或隐藏匹配元素.如果 setting为true,相当于show 法.如果setting为false.相当于 hide方法. clone: 主要用于复制节点元素,用于显…

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

最近在研究Zepto的源码,这是第一篇分析,欢迎大家继续关注,第一次写源码笔记,希望大家多指点指点,第一篇文章由于首次分析原因不会有太多干货,希望后面的文章能成为各位大大心目中的干货. Zepto是一个匿名函数的运行结果,而zepto是该匿名函数中定义的一个对象,注意区分 zepto.matches match = ~zepto.qsa(parent, selector).indexOf(element) zepto.qsa:zepto优化过的选择器 zepto.qsa(parent, sele…

正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神的文章后对我确实有很大的帮助,当然,我的某些观点可能不是很准确甚至有错误,欢迎讨论,白天基本在线. zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑 源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我…

前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 zepto事件处理部分篇幅不大,不到400行,前面篇幅也很小,所以真的很适合移动开发 变量定义 var $$ = $.zepto.qsa, handlers = {}, _zid = 1, specialEvents = {}, hover = { mouseenter: 'mouseover', mo…

前言 上次我们看了zepto的选择器方面的东西,其实zepto简单很大程度是因为他用了最新的检索器querySelectorAll,今天我们来学习下zepto的一些零碎点的地方吧,主要根据zepto官方文档顺序来 contains (parent, node) 该方法用于检测父节点是否包含给定的dom节点,如果两者相同则返回falsecontains 为javascript的基本语法,首先在ie中,最后其它浏览器也扩展了,如果a包含b则返回true p = document.getElement…

前言 昨天学习了核心$(),有几个遗留问题,我们今天来看看吧 $.each 遍历数组/对象,将每条数据作为callback的上下文,并传入数据以及数据的索引进行处理,如果其中一条数据的处理结果明确返回false,则停止遍历,并返回elements $.each = function (elements, callback) { var i, key if (likeArray(elements)) { for (i = 0; i < elements.length; i++) { if (cal…

前言 我们移动端基本使用zepto了,而我也从一个小白变成稍微靠谱一点的前端了,最近居然经常要改到zepto源码但是,我对zepto不太熟悉,其实前端水准还是不够,所以便私下偷偷学习下吧,别被发现了 核心方法$() 我们使用这个方法一般有几个用途(我这里只说我自己用到过的),这里根据使用度排个序: ① 选择器/$(selector) 将返回一个包装过的dom集合对象(有很多选择器) ② html字符串/$(domStr) 仍然返回一个包装过的dom对象,他会将字符串初始化为我们的dom结构PS:…

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

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

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

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

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

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

与生成width和height使用的方法类似,通过`after`, `prepend`, `before`, `append`,这四者之间的共性,生成对应的函数.并根据这四个函数,生成 `insertAfter`, `insertBefore`, `appendTo`,  `prependTo`. 将具有共性的四者存储在一个数组中,以便于循环遍历. adjacencyOperators.forEach(function(operator, operatorIndex) {}) 使用forEach…

width和height函数,实际上通过css方法也完全可以取到这两个函数的结果.获取width,$elem.css('width');设置width的话,$elem.css('width', 100),这与我们将要介绍的width()函数完全一致,height函数也一样可以实现.但是在我们日常编程过程中,这两个函数使用频率确实比较高,所以不管是jquery,还是zepto都对他们进行了额外的封装. 由于这两者实现过程完全一致,唯一的区别是一个是宽度,一个是高度,在代码实现过程中,并没有什么区别…

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

zepto内部选择器qsa方法的实现. 简述实现原理: 通过判断传入的参数类型: 如果是'#id',则使用getElementById(id)来获取元素,并且将结果包装成数组形式: 如果是'.class',则使用getElementsByClassName(class)获取元素: 如果是'tagName',使用getElementsByTagName(tagName)获取元素: 如果参数是复杂的css选择器,则使用element.querySelectorAll(css选择器)来获取元素. 方法…

先展示init函数,由于笔记本屏幕太小,删掉了部分源码注释,才能在一屏内截图. 当我们调用$()的时候,便会直接调用zepto.init()生成zepto对象,跟jquery生成jquery对象类似.可以在插件中进行覆盖. 定义变量dom 分为5种情况,逐个进行判断. 1.未传入选择器,即没有传入任何参数的情况,直接返回一个空的zepto对象. 2.如果传入字符串类型的选择器,即传入的是css选择器 清除selector参数的前后空格,selector = selector.trim() 然后区…

几个需要经常用到的类型判断: 自定义一个类似于typeof的函数,提供更多的类型判断. class2type[toString.call(obj)] 是对class2type的取值 在后面通过循环对class2type赋予相应的键值对, 最终在class2type保存的是 所以当调用type传入的参数为array对象时,调用toString.call(array)返回[object Array],所以对应class2type['[object Array]']即为array. 如果传入的参数为n…

zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, closest等. 进行初始化的判断,如果不存在DOM元素或者css selector,或者非元素节点的话,直接返回,不再进行后续操作. 获取统一接口,监听所有浏览器(IE6-8不支持),需要注意到的是顺序问题,element.matches就是封装之后的函数,可以忽略, 然后优先使用element.webk…

主要了解一下zepto定义的初始变量. 逐一以自己的理解解析,待到后面完全透彻理解之后,争取再写一遍zepto源码学习的文章. 其中的undefined确实不明白为什么定义这么个变量在这里. document = window.document根据个人理解应该是要兼容一些特殊情况下获取document的问题,但是也不知道在什么样的情况下,需要使用window.docment才能获取到document对象. key: 后面会多次用到初始化变量key,在for in循环中,需要确定键的名称,基本上只…

为了深入学习javascript,根据别人推荐的方法之一:研究源码. 相对而言,之前的项目中仅仅使用过zepto和jquery,当前阶段,看到好几千行的jquery源码,心生敬畏,望而却步,所以选择相对精简一点的zepto. 首先,最重要的是理清楚zepto的结构. zepto采用的立即执行函数来实现避免对全局变量污染. javascript立即执行函数有两张写法: 1. (function(形参){...})(实际传入参数); 2. (function(形参){...}(实际传入参数)); z…

一.介绍js移动端框架:zepto.js与jquery mobile 对比:zepto特点 1.与jquery相似度95%,会jquery基本会zepto: 2.API少,轻量级框架 3.移动端无缝接入 4.高性能 jquery mobile特点 1.高度组件化 2.加载多内容,性能降低 二.zepto入门 1.自带模块:核心模块,事件,ajax,IE兼容性: 2.$认识:构造函数,与jquery区别在: i,$()相当于$(document).ready(function(){}); ii,$…

ps:本文中"组装成成数组"指的是若元素个数大于1则返回数组,若元素只有1个则返回元素本身 以下函数是$.fn该对象的方法 ready(callback) 通过readyRE正则表达式检测document.readyState是否符合,若符合则调用回调函数: 否则添加DOMContentLoaded事件处理函数以调用回调函数 each(callback) 因为Z元素集合本身就是类数组,不需要像$.each(elements,callback)一样先判断elements是否类数组,所以使…

uniq(array) 返回不存在重复值的数组 function classRE(name) 判断classCache中是否已存在name,若存在则取出classCache[name];否则存入该类名的正则表达式至classCache[name]中 function maybeAddPx(name,value) 若name在cssNumber中则返回value:否则返回value+"px" function defaultDisplay(nodeName) 从elementDispla…

一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果. 使用 @media 查询,你可以针对不同的媒体类型(媒体.媒介)定义不同的样式.@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 基本语法: @media 约束词  媒体类型…

先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.config { // ... module: { loaders: [{ test: require.resolve('zepto'), loader: 'exports-loader?window.Zepto!script-loader' }] } } 这样我们在页面入口文件中就可以这么写: JavaSc…