var Zepto = (function(){ var zepto = {},$; zepto.Z = function(dom, selector) { return...return zepto.Z(dom, selector) } $ = function(selector,context){ return zepto.init...zepto.Z.prototype =Z.prototype= $.fn return $ //返回$,赋值给Zepto })() window.Zepto = Zepto /.../当$未被占用时就把Zepto赋值给$ window.$ === undefined && (window.$ = Zepto) //事件处理模块 ;funciton(){ }(Zepto) /.../Ajax模块 ;function(){ }(Zepto) //表单序列化模块 ;function(){ }(Zepto) 原文地址:http://www.itkaoyan.cn/?
目录 类库和框架的区别 写法 jq操作样式 属性 事件 class dom操作 效果 类库和框架的区别 jq jq是一个功能丰富,轻量级的类库 zepto.js zepto.js 是更轻量级的类库
zepto中的ready函数是作为$.fn的一个方法,即作为一个zepto对象的方法 readyRE = /complete|loaded|interactive/; ready: function(callback...所以在zepto中,必须检测document.readyState的值来判断下一步的进行的动作。
在zepto中,通过$来构造对象 $ = function(selector, context){ return zepto.init(selector, context) } 由该函数,实际上...given, return an empty Zepto collection //返回一空的zepto对象 if (!...else dom = zepto.qsa(document, selector) } // create a new Zepto collection from the nodes found...条件判断里的代码需要注意一点,即将dom转成zepto对象.使其能调用$的attr方法,attr函数留在后面。...重新回到init函数,接下来的都是一些条件判断,其中有一个是选择器函数 即zepto.qsa zepto.qsa = function(element, selector){ var found
$.inArray(element, array, [fromIndex]) ⇒ number 返回数组中指定元素的索引值(以0为基数),如果没有找到该元素...
这里主要分析zepto事件中的$.on函数,先看一下该函数的代码 $.fn.on = function(event, selector, data, callback, one){ var autoRemove...//callback = function(){return false} if (callback === false) callback = returnFalse //迭代zepto...该函数主要分析的是return 后面的语句,在前面的分析中,分析了each函数和$对象,也就是对$对象中的每一个dom进行绑定事件,这里先跳过autoRemove函数,留在后面分析,如果有传入选择器,zepto...先定义一个delegator函数,delegator函数中有一个match变量,该变量即为我们要绑定事件的目标元素,zepto采用的是事件委托,官方文档对于closest的定义如下: ?...stopPropagation: 'isPropagationStopped' } 在原生的事件属性中,也存在prereventDefault等方法以及判断其值的defaultPrevented属性,但在zepto
可以查看之前写的一篇文章Zepto中数据缓存原理与实现 ,应该可以找到答案 结尾 以上是Zepto中常见的操作元素属性的方法(attr、removeAttr、prop、removeProp、html、...参考 读Zepto源码之属性操作 textContent mdn multiple zepto.js 源码解析 文章记录 ie模块 Zepto源码分析之ie模块(2017-11-03)...data模块 Zepto中数据缓存原理与实现(2017-10-03) form模块 zepto源码分析之form模块(2017-10-01) zepto模块 这些Zepto中实用的方法集(2017-08...-26) Zepto核心模块之工具方法拾遗 (2017-08-30) 看zepto如何实现增删改查DOM (2017-10-2) Zepto这样操作元素属性(2017-11-13) event模块 mouseenter...(2017-06-05) 向zepto.js学习如何手动触发DOM事件(2017-06-07) 谁说你只是"会用"jQuery?
langyajiekou,本文属FreeBuf原创奖励计划,未经许可禁止转载 前段时间突然收到一个客户的电话,报告说她的电脑出了问题,所有文件都无法打开了,据她们自己的IT人员发现所有文件都多了一个.zepto...我当时一听到就咯噔一声,糟了,中勒索软件了,zepto是个新的变种,隶属于Locky家族。...好吧,使用“zepto 勒索”才返回了一些关联结果,不过大都是无用的求救信息,参考参考咯。...Zepto勒索软件沿用了它的先辈Locky家族的血统,使用了RSA-2048非对称加密算法,加密后添加.zepto到所属文件并改名成如下格式。
这是一个Zepto的方法,不是jquer的api。...collection 过滤当前对象集合,获取一个新的的对象集合,它里面的元素不能匹配css选择器,如果另一个参数为Zepto对象集合,那么返回的新Zepto对象中元素都不包括在该参 数对象中,...SCRIPT"] $.fn.next = function(){ return $(this.pluck('nextElementSibling')) } 这是一个Zepto
如果参数是一个Zepto对象集合或者一个元素,结果必须匹配给定的元素而不是选择器。 ...类型:self 添加元素到一个Zepto 对象集合形成一个新数组,如果参数是一个数组,那么这个数组中的元素 将会合并到Zepto对象集合中。 这是一个Zepto 提供的方法。...Zepto 基本实现`data()`只能存储字符串。如果你要存储任意对象,请引入可选的“data”模块到你构建的Zepto中。...如果给定Zepto对象集合或者元素,过滤他们,只有当他们在当前Zepto 集合对象中时,才会被返回。 ...这是一个Zepto提供的方法,不是jquery的API。
color:'darkblue'}}) //Hellow 当页面ready的时候,执行回调: Zepto...0 is: a //ct1.html:18 item 1 is: b //ct1.html:18 item 2 is: c var hah = {name:'zepto.js... $.each(hash,function(key,vaue){ console.log('%s: %s',key,value) }) //name: zepto.js...是一个对象,它拥有Zepto对象上所有的方法,在这个对象上添加一个方法。 ...所有的Zepto 对象上都能用到这个方法。
var obj = {name:'Zepto'} handler = function(){console.log("hello from+",this.name)} ...Zepto在不 支持该原生方法的浏览器中实现。(例如老版本的Android)。
上次看zepto的init方法时,有一段属性设置的代码,先来看看其表现: if (isPlainObject(properties)) { nodes = $(dom) $.each...回想了一下,在javascript中,对象是引用,而不是赋值,而dom不是zepto对象就是Dom对象,假如是zepto对象的话,那么nodes其实就是dom,因为在zepto的init方法中,传入参数是...zepto对象的话则直接返回该对象。...zepto.init = function(selector, context) { var dom ......else if (zepto.isZ(selector)) return selector else { ...
先看一下zepto事件的函数,在这里,zepto是把zepto对象作为一个立即执行函数的参数传进去的。...(function($){ ... ... })(Zepto) 在zepto事件函数中,主要为$.Event,$.on,$.off等,分析事件代码,分析这三个就够了,首先分析$.Event函数,在分析该函数之前...回过头来看zepto中的函数, $.Event = function(type, props) { if (!...return compatible(event) } 该函数传入两个参数,分别为事件的type属性和其他另外加入的属性,函数中在创建事件event时,有一个specialEvents,在zepto
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto...有了上面的知识的回顾,接下来我们开始看zepto中serialize和serializeArray的实现 serializeArray 因为serialize依赖serializeArray的实现,...我们需要从zepto模块的val函数实现看起 val函数实现 function val (value) { if (0 in arguments) { if (value == null)...文章记录 form模块 zepto源码分析之form模块 zepto模块 这些Zepto中实用的方法集 Zepto核心模块之工具方法拾遗 event模块 mouseenter与mouseover为何这般纠缠不清...向zepto.js学习如何手动触发DOM事件 谁说你只是"会用"jQuery? ajax模块 原来你是这样的jsonp(原理与具体实现细节)
在用 zepto 时,肯定离不开这个神奇的 $ 符号,这篇文章将会看看 zepto 是如何实现 $ 的。...读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 zepto的css选择器 zepto.qsa 我们都知道,...zepto.Z 函数 从第一篇代码结构中我们已经知道,其实实现 $ 函数的核心是 zepto.init ,而 zepto.init 最终返回的是 zepto.Z 的结果。...那就先来看看 zepto.Z zepto.Z = function(dom, selector) { return new Z(dom, selector) } zepto.Z 的代码很简单,返回的是...如果所需设置的属性,zepto已经定义了相应的方法,则调用zepto对应的方法,否则统一调用zepto的attr 方法设置属性。
学习zepto.js(对象方法)[1] zepto也是使用的链式操作,链式操作:函数返回调用函数的对象....但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说明,下边介绍的方法都会返回zepto对象; add(): 支持一到二个参数...add函数本身无任何亮点- -,将两个参数原封不动的传入$()然后返回一个Zepto对象,执行concat函数,该函数会将所有参数添加至调用函数对象的末尾, toArray方法会调用get方法,当get...方法执行时而没有传入参数,会将该对象所有的匹配元素以数组的形式返回; uniq方法是一个数组去重的方法,返回的还是一个数组,然后回到add方法再次通过$()构造一个zepto对象并返回; addClass...通过each方法循环遍历对象,each方法会返回一个zepto对象.首先会判断元素是否存在className属性, 通过className方法获取到当前元素的所有className信息的字符串; ?
读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook 《reading-zepto》 内部方法...系列文章 读Zepto源码之代码结构 读Zepto源码之内部方法 读Zepto源码之工具函数 读Zepto源码之神奇的$ 读Zepto源码之集合操作 读Zepto源码之集合元素查找 读Zepto源码之操作...DOM 读Zepto源码之样式操作 读Zepto源码之属性操作 读Zepto源码之Event模块 读Zepto源码之IE模块 读Zepto源码之Callbacks模块 读Zepto源码之Deferred...模块 读Zepto源码之Ajax模块 读Zepto源码之Assets模块 读Zepto源码之Selector模块 读Zepto源码之Touch模块 读Zepto源码之Gesture模块 读Zepto源码之...IOS3模块 读Zepto源码之Fx模块 读Zepto源码之fx_methods模块 读Zepto源码之Stack模块 读Zepto源码之Form模块 附文 译:怎样处理 Safari 移动端对图片资源的限制
Selector 模块是对 Zepto 选择器的扩展,使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。...读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 GitBook 《reading-zepto》 辅助方法...重写的方法 qsa var zepto = $.zepto, oldQsa = zepto.qsa, oldMatches = zepto.matches, childRe = /^\s*>/...系列文章 读Zepto源码之代码结构 读Zepto源码之内部方法 读Zepto源码之工具函数 读Zepto源码之神奇的$ 读Zepto源码之集合操作 读Zepto源码之集合元素查找 读Zepto源码之操作...DOM 读Zepto源码之样式操作 读Zepto源码之属性操作 读Zepto源码之Event模块 读Zepto源码之IE模块 读Zepto源码之Callbacks模块 读Zepto源码之Deferred
读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 内部方法 setAttribute function setAttribute...由于参数 html 可以是固定值或者函数,所以先调用内部函数 funcArg 来对参数进行处理,funcArg 的分析请看 《读Zepto源码之样式操作》 。...append 方法的分析请看《读Zepto源码之操作DOM》 .text() text: function(text) { return 0 in arguments ?...系列文章 读Zepto源码之代码结构 读 Zepto 源码之内部方法 读Zepto源码之工具函数 读Zepto源码之神奇的$ 读Zepto源码之集合操作 读Zepto源码之集合元素查找 读Zepto源码之操作...DOM 读Zepto源码之样式操作 参考 MDN:Node.textContent data-* Element.getBoundingClientRect() License ?
领取专属 10元无门槛券
手把手带您无忧上云