<header><p >Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。</p><p ><span >下载 Zepto</span><br/></p></header><ul class=" list-paddingleft-2"><li><p><a href="https://zeptojs.com/zepto.js" >zepto.js v1.2.0 (开发版)</a>–<em>57.3k 未压缩，包含注释</em></p></li><li><p><a href="https://zeptojs.com/zepto.min.js" >zepto.min.js v1.2.0 (生产版)</a>–<em>9.6k gzip压缩</em></p></li></ul><p >其他下载方式选择:</p><ul class=" list-paddingleft-2"><li><p><code >npm install zepto</code>; 或者</p></li><li><p><a href="https://github.com/madrobby/zepto" >grab the latest version on GitHub</a>.</p></li></ul><p >默认构建包含以下<a href="https://www.css88.com/doc/zeptojs_api/#modules" >模块：</a><em>Core, Ajax, Event, Form, IE</em>.</p><p >如果<code >$</code>变量尚未定义，Zepto只设置全局变量<code >$</code>指向它本身。 没有<code >Zepto.noConflict</code>方法。</p><h3 >浏览器支持</h3><h4 >初级 (100% 支持)</h4><ul class=" list-paddingleft-2"><li><p>Safari 6+ (Mac)</p></li><li><p>Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)</p></li><li><p>Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)</p></li><li><p>iOS 5+ Safari</p></li><li><p>Android 2.3+ Browser</p></li><li><p>Internet Explorer 10+ (Windows, Windows Phone)</p></li></ul><h4 >次要目标（完全或大部分支持）</h4><ul class=" list-paddingleft-2"><li><p>iOS 3+ Safari</p></li><li><p>Chrome <30</p></li><li><p>Firefox 4+</p></li><li><p>Safari <6</p></li><li><p>Android Browser 2.2</p></li><li><p>Opera 10+</p></li><li><p>webOS 1.4.5+ Browser</p></li><li><p>BlackBerry Tablet OS 1.0.7+ Browser</p></li><li><p>Amazon Silk 1.0+</p></li><li><p>Other WebKit-based browsers/runtimes</p></li></ul><p ><em>需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的；因为它的最初目标在移动端提供一个精简的类似jquery的js库。</em></p><p >在浏览器上(Safari、Chrome和Firefox)上开发页面应用或者构建基于html的web-view本地应用，你如<a href="https://phonegap.com/" >PhoneGap</a>，使用Zepto是一个不错的选择。</p><p ><br/></p><p >总之，Zepto希望在所有的现代浏览器中作为一种基础环境来使用。Zepto不支持旧版本的Internet Explorer浏览器(<10)。</p><h3 >手动建立Zepto</h3><p ><code >zepto.js</code>和<code >zepto.min.js</code>提供以上使用方式。 然而，为了更好的程序效果和自由性，可以在使用Zepto源码构建Zepto.js和zepto.min.js的时候选择模块并作测试， 使用<a href="https://github.com/mishoo/UglifyJS" >UglifyJS</a>根据你的需要来生成(当服务端开启gzipped后，最精简的代码)代码。</p><p >关于如何建立Zepto的<a href="https://github.com/madrobby/zepto#readme" >the README</a>，包含运行测试和补丁。</p><h3 >Zepto 模块</h3><table><thead><tr class="firstRow"><th >module</th><th >default</th><th >description</th></tr></thead><tbody><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/zepto.js#files" >zepto</a></th><td >✔</td><td >核心模块；包含许多方法</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/event.js#files" >event</a></th><td >✔</td><td >通过<code >on()</code>&<code >off()</code>处理事件</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/ajax.js#files" >ajax</a></th><td >✔</td><td >XMLHttpRequest 和 JSONP 实用功能</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/form.js#files" >form</a></th><td >✔</td><td >序列化 & 提交web表单</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/ie.js#files" >ie</a></th><td >✔</td><td >增加支持桌面的Internet Explorer 10+和Windows Phone 8。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/detect.js#files" >detect</a></th><td ><br/></td><td >提供<code >$.os</code>和<code >$.browser</code>消息</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/fx.js#files" >fx</a></th><td ><br/></td><td >The<code >animate()</code>方法</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/fx_methods.js#files" >fx_methods</a></th><td ><br/></td><td >以动画形式的<code >show</code>,<code >hide</code>,<code >toggle</code>, 和<code >fade*()</code>方法.</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/assets.js#files" >assets</a></th><td ><br/></td><td >实验性支持从DOM中移除image元素后清理iOS的内存。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/data.js#files" >data</a></th><td ><br/></td><td >一个全面的<code >data()</code>方法, 能够在内存中存储任意对象。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/deferred.js#files" >deferred</a></th><td ><br/></td><td >提供<code >$.Deferred</code>promises API. 依赖"callbacks" 模块.<br/>当包含这个模块时候,<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" ><code >$.ajax()</code></a>支持promise接口链式的回调。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/callbacks.js#files" >callbacks</a></th><td ><br/></td><td >为"deferred"模块提供<code >$.Callbacks</code>。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/selector.js#files" >selector</a></th><td ><br/></td><td >实验性的支持<a href="https://www.css88.com/jqapi-1.9/category/selectors/jquery-selector-extensions/" >jQuery CSS 表达式</a>实用功能，比如<code >$('div:first')</code>和<code >el.is(':visible')</code>。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/touch.js#files" >touch</a></th><td ><br/></td><td >在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/gesture.js#files" >gesture</a></th><td ><br/></td><td >在触摸设备上触发 pinch 手势事件。</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/stack.js#files" >stack</a></th><td ><br/></td><td >提供<code >andSelf</code>&<code >end()</code>链式调用方法</td></tr><tr><th ><a href="https://github.com/madrobby/zepto/blob/master/src/ios3.js#files" >ios3</a></th><td ><br/></td><td >String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.</td></tr></tbody></table><h3 >创建插件</h3><p >可以通过添加方法作为<a href="https://www.css88.com/doc/zeptojs_api/#$.fn" ><code >$.fn</code></a>的属性来写插件：</p><pre >;(function($){$.extend($.fn,{foo:function(){//`this`referstothecurrentZeptocollection.//Whenpossible,returntheZeptocollectiontoallowchaining.returnthis.html('bar')}})})(Zepto)</pre><p >为了更好开始开发插件，先看下<a href="https://github.com/madrobby/zepto/blob/master/src/zepto.js" >source of Zepto's core module</a>，并确认读过<a href="https://github.com/madrobby/zepto#code-style-guidelines" >coding style guidelines</a></p><p><section><hr/><h2 >核心方法</h2><article><h3 >$()</h3><pre >$(selector,[context])⇒collection$(<Zeptocollection>)⇒samecollection$(<DOMnodes>)⇒collection$(htmlString)⇒collection$(htmlString,attributes)⇒collectionv1.0+Zepto(function($){...})</pre><p >通过执行css选择器，包装dom节点，或者通过一个html字符串创建多个元素 来创建一个Zepto集合对象。</p><p >Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的DOM节点，除了$(<code >Zepto</code>)对象上的直接方法外(如<code >$.extend</code>)，文档对象中的所有方法都是集合方法。</p><p >如果选择器中存在content参数(css选择器，dom，或者Zepto集合对象)，那么只在所给的节点背景下进行css选择器；这个功能和使用<code >$(context).find(selector)</code>是一样的。</p><p >当给定一个html字符串片段来创建一个dom节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素，使用<code ><div></code>或<code ><div/></code>形式。</p><p >当一个函数附加在<code >DOMContentLoaded</code>事件的处理流程中。如果页面已经加载完毕，这个方法将会立即被执行。</p><pre >$('div')//=>所有页面中得div元素$('#foo')//=>ID为"foo"的元素//创建元素:$("<p>Hello</p>")//=>新的p元素//创建带有属性的元素:$("<p/>",{text:"Hello",id:"greeting",css:{color:'darkblue'}})//=><pid=greetingstyle="color:darkblue">Hello</p>//当页面ready的时候，执行回调:Zepto(function($){alert('ReadytoZepto!')})</pre><p >不支持<a href="https://www.css88.com/jqapi-1.9/category/selectors/jquery-selector-extensions/" >jQuery CSS 扩展</a>， 然而，可选的“selector”模块有限提供了支持几个最常用的伪选择器，而且可以被丢弃，与现有的代码或插件的兼容执行。</p><p >如果<code >$</code>变量尚未定义，Zepto只设置了全局变量<code >$</code>指向它本身。允许您同时使用的Zepto和有用的遗留代码，例如，prototype.js。只要首先加载Prototype，Zepto将不会覆盖Prototype的<code >$</code>函数。Zepto将始终设置全局变量<code >Zepto</code>指向它本身。</p></article><article><h3 >$.camelCase<span >v1.0+</span></h3><pre >$.camelCase(string)⇒string</pre><p >将一组字符串变成“骆驼”命名法的新字符串，如果该字符已经是“骆驼”命名法，则不变化。</p><pre >$.camelCase('hello-there')//=>"helloThere"$.camelCase('helloThere')//=>"helloThere"</pre></article><article><h3 >$.contains<span >v1.0+</span></h3><pre >$.contains(parent,node)⇒boolean</pre><p >检查父节点是否包含给定的dom节点，如果两者是相同的节点，则返回<code >false</code>。</p></article><article><h3 >$.each</h3><pre >$.each(collection,function(index,item){...})⇒collection</pre><p >遍历数组元素或以key-value值对方式遍历对象。回调函数返回<code >false</code>时停止遍历。</p><pre >$.each(['a','b','c'],function(index,item){console.log('item%dis:%s',index,item)})varhash={name:'zepto.js',size:'micro'}$.each(hash,function(key,value){console.log('%s:%s',key,value)})</pre></article><article><h3 >$.extend</h3><pre >$.extend(target,[source,[source2,...]])⇒target$.extend(true,target,[source,...])⇒targetv1.0+</pre><p >通过源对象扩展目标对象的属性，源对象属性将覆盖目标对象属性。</p><p >默认情况下为，复制为浅拷贝（浅复制）。如果第一个参数为true表示深度拷贝（深度复制）。</p><pre >vartarget={one:'patridge'},source={two:'turtledoves'}$.extend(target,source)//=>{one:'patridge',//two:'turtledoves'}</pre></article><article><h3 >$.fn</h3><p ><code >Zepto.fn</code>是一个对象，它拥有Zepto对象上所有可用的方法，如<a href="https://www.css88.com/doc/zeptojs_api/#addClass" ><code >addClass()</code></a>，<a href="https://www.css88.com/doc/zeptojs_api/#attr" ><code >attr()</code></a>，和其它方法。在这个对象添加一个方法，所有的Zepto对象上都能用到该方法。</p><p >这里有一个实现 Zepto 的<a href="https://www.css88.com/doc/zeptojs_api/#empty" ><code >empty()</code></a>方法的例子：</p><pre >$.fn.empty=function(){returnthis.each(function(){this.innerHTML=''})}</pre></article><article><h3 >$.grep<span >v1.0+</span></h3><pre >$.grep(items,function(item){...})⇒array</pre><p >获取一个新数组，新数组只包含回调函数中返回 ture 的数组项。</p><pre >$.grep([1,2,3],function(item){returnitem>1});//=>[2,3]</pre></article><article><h3 >$.inArray<span >v1.0+</span></h3><pre >$.inArray(element,array,[fromIndex])⇒number</pre><p >返回数组中指定元素的索引值（愚人码头注：以0为基数），如果没有找到该元素则返回<code >-1</code>。</p><p >愚人码头注：<code >[fromIndex]</code>参数可选，表示从哪个索引值开始向后查找。</p><pre >$.inArray("abc",["bcd","abc","edf","aaa"]);//=>1$.inArray("abc",["bcd","abc","edf","aaa"],1);//=>1$.inArray("abc",["bcd","abc","edf","aaa"],2);//=>-1</pre></article><article><h3 >$.isArray</h3><pre >$.isArray(object)⇒boolean</pre><p >如果object是array，则返回ture。</p></article><article><h3 >$.isFunction</h3><pre >$.isFunction(object)⇒boolean</pre><p >如果object是function，则返回ture。</p></article><article><h3 >$.isNumeric<span >v1.2+</span></h3><pre >$.isNumeric(value)⇒boolean</pre><p >如果该值为有限数值或一个字符串表示的数字，则返回ture。</p></article><article><h3 >$.isPlainObject<span >v1.0+</span></h3><pre >$.isPlainObject(object)⇒boolean</pre><p >测试对象是否是“纯粹”的对象，这个对象是通过 对象常量（"{}"） 或者<code >new Object</code>创建的，如果是，则返回true。</p><pre >$.isPlainObject({})//=>true$.isPlainObject(newObject)//=>true$.isPlainObject(newDate)//=>false$.isPlainObject(window)//=>false</pre></article><article><h3 >$.isWindow<span >v1.0+</span></h3><pre >$.isWindow(object)⇒boolean</pre><p >如果object参数为一个window对象，那么返回true。这在处理iframe时非常有用，因为每个iframe都有它们自己的window对象，使用常规方法<code >obj === window</code>校验这些objects的时候会失败。</p></article><article><h3 >$.map</h3><pre >$.map(collection,function(item,index){...})⇒collection</pre><p >通过遍历集合中的元素，返回通过迭代函数的全部结果，（愚人码头注：一个新数组）<code >null</code>和<code >undefined</code>将被过滤掉。</p><pre >$.map([1,2,3,4,5],function(item,index){if(item>1){returnitem*item;}});//=>[4,9,16,25]$.map({"yao":1,"tai":2,"yang":3},function(item,index){if(item>1){returnitem*item;}});//=>[4,9]</pre></article><article><h3 >$.noop<span >v1.2+</span></h3><pre >varcallback=$.noop</pre><p >引用一个空函数（什么都不处理）。</p></article><article><h3 >$.parseJSON<span >v1.0+</span></h3><pre >$.parseJSON(string)⇒object</pre><p >原生<code >JSON.parse</code>方法的别名。（愚人码头注：接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象。）</p></article><article><h3 >$.trim<span >v1.0+</span></h3><pre >$.trim(string)⇒string</pre><p >删除字符串首尾的空白符。类似String.prototype.trim()。</p></article><article><h3 >$.type<span >v1.0+</span></h3><pre >$.type(object)⇒string</pre><p >获取JavaScript 对象的类型。可能的类型有：<code >null</code><code >undefined</code><code >boolean</code><code >number</code><code >string</code><code >function</code><code >array</code><code >date</code><code >regexp</code><code >object</code><code >error</code>。</p><p >对于其它对象，它只是简单报告为“object”，如果你想知道一个对象是否是一个javascript普通对象，使用<a href="https://www.css88.com/doc/zeptojs_api/#$.isPlainObject" >isPlainObject</a>。</p></article><article><h3 >add</h3><pre >add(selector,[context])⇒self</pre><p >添加元素到当前匹配的元素集合中。如果给定content参数，将只在content元素中进行查找，否则在整个document中查找。</p><pre ><ul><li>listitem1</li><li>listitem2</li><li>listitem3</li></ul><p>aparagraph</p><scripttype="text/javascript">$('li').add('p').css('background-color','red');</script></pre></article><article><h3 >addClass</h3><pre >addClass(name)⇒selfaddClass(function(index,oldClassName){...})⇒self</pre><p >为每个匹配的元素添加指定的class类名。多个class类名使用空格分隔。</p></article><article><h3 >after</h3><pre >after(content)⇒self</pre><p >在每个匹配的元素后插入内容（愚人码头注：外部插入）。内容可以为html字符串，dom节点，或者节点组成的数组。</p><pre >$('formlabel').after('<p>Anotebelowthelabel</p>')</pre></article><article><h3 >append</h3><pre >append(content)⇒self</pre><p >在每个匹配的元素末尾插入内容（愚人码头注：内部插入）。内容可以为html字符串，dom节点，或者节点组成的数组。</p><pre >$('ul').append('<li>newlistitem</li>')</pre></article><article><h3 >appendTo</h3><pre >appendTo(target)⇒self</pre><p >将匹配的元素插入到目标元素的末尾（愚人码头注：内部插入）。这个有点像<a href="https://www.css88.com/doc/zeptojs_api/#append" >append</a>，但是插入的目标与其相反。</p><pre >$('<li>newlistitem</li>').appendTo('ul')</pre></article><article><h3 >attr</h3><pre >attr(name)⇒stringattr(name,value)⇒selfattr(name,function(index,oldValue){...})⇒selfattr({name:value,name2:value2,...})⇒self</pre><p >读取或设置dom的属性。如果没有给定value参数，则读取对象集合中第一个元素的属性值。当给定了value参数。则设置对象集合中所有元素的该属性的值。当value参数为<code >null</code>，那么这个属性将被移除(类似<a href="https://www.css88.com/doc/zeptojs_api/#removeAttr" >removeAttr</a>)，多个属性可以通过对象键值对的方式进行设置。</p><p >要读取DOM的属性如<code >checked</code>和<code >selected</code>, 使用<a href="https://www.css88.com/doc/zeptojs_api/#prop" >prop</a>。</p><pre >varform=$('form')form.attr('action')//=>读取值form.attr('action','/create')//=>设置值form.attr('action',null)//=>移除属性//多个属性:form.attr({action:'/create',method:'post'})</pre></article><article><h3 >before</h3><pre >before(content)⇒self</pre><p >在匹配每个元素的前面插入内容（愚人码头注：外部插入）。内容可以为html字符串，dom节点，或者节点组成的数组。</p><pre >$('table').before('<p>Seethefollowingtable:</p>')</pre></article><article><h3 >children</h3><pre >children([selector])⇒collection</pre><p >获得每个匹配元素集合元素的直接子元素，如果给定selector，那么返回的结果中只包含符合css选择器的元素。</p><pre >$('ol').children('*:nth-child(2n)')//=>everyotherlistitemfromeveryorderedlist</pre></article><article><h3 >clone<span >v1.0+</span></h3><pre >clone()⇒collection</pre><p >通过深度克隆来复制集合中的所有元素。</p><p >此方法不会将数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。</p></article><article><h3 >closest</h3><pre >closest(selector,[context])⇒collectionclosest(collection)⇒collectionv1.0+closest(element)⇒collectionv1.0+</pre><p >从元素本身开始，逐级向上级元素匹配，并返回最先匹配selector的元素。如果给定context节点参数，那么只匹配该节点的后代元素。这个方法与<a href="https://www.css88.com/doc/zeptojs_api/#parents" ><code >parents(selector)</code></a>有点相像，但它只返回最先匹配的祖先元素。</p><p >如果参数是一个Zepto对象集合或者一个元素，结果必须匹配给定的元素而不是选择器。</p><pre >varinput=$('input[type=text]')input.closest('form')</pre></article><article><h3 >concat</h3><pre >concat(nodes,[node2,...])⇒self</pre><p >添加元素到一个Zepto对象集合形成一个新数组。如果参数是一个数组，那么这个数组中的元素将会合并到Zepto对象集合中。</p><p >这是一个Zepto提供的方法，不是jquey的API 。</p></article><article><h3 >contents<span >v1.0+</span></h3><pre >contents()⇒collection</pre><p >获得每个匹配元素集合元素的子元素，包括文字和注释节点。（愚人码头注：.contents()和<a href="https://www.css88.com/doc/zeptojs_api/#children" >.children()</a>方法类似，只不过前者包括文本节点以及jQuery对象中产生的HTML元素。）</p></article><article><h3 >css</h3><pre >css(property)⇒valuecss([property1,property2,...])⇒objectv1.1+css(property,value)⇒selfcss({property:value,property2:value2,...})⇒self</pre><p >读取或设置DOM元素的css属性。当value参数不存在的时候，返回对象集合中第一个元素的css属性。当value参数存在时，设置对象集合中每一个元素的对应css属性。</p><p >多个属性可以通过传递一个属性名组成的数组一次性获取。多个属性可以利用对象键值对的方式进行设置。</p><p >当value为空(空字符串，<code >null</code>或<code >undefined</code>)，那个css属性将会被移出。当value参数为一个无单位的数字，如果该css属性需要单位，“px”将会自动添加到该属性上。</p><pre >varelem=$('h1')elem.css('background-color')//readpropertyelem.css('background-color','#369')//setpropertyelem.css('background-color','')//removeproperty//setmultipleproperties:elem.css({backgroundColor:'#8EE',fontSize:28})//readmultipleproperties:elem.css(['backgroundColor','fontSize'])['fontSize']</pre></article><article><h3 >data</h3><pre >data(name)⇒valuedata(name,value)⇒self</pre><p >读取或写入dom的<code >data-*</code>属性。行为有点像<a href="https://www.css88.com/doc/zeptojs_api/#attr" >attr</a>，但是属性名称前面加上<code >data-</code>。</p><p >当读取属性值时，会有下列转换：<span >v1.0+</span></p><ul class=" list-paddingleft-2"><li><p>“true”, “false”, and “null” 被转换为相应的类型；</p></li><li><p>数字值转换为实际的数字类型；</p></li><li><p>JSON值将会被解析，如果它是有效的JSON；</p></li><li><p>其它的一切作为字符串返回。</p><p >Zepto 基本实现`data()`只能存储字符串。如果你要存储任意对象，请引入可选的“data”模块到你构建的Zepto中。</p></li></ul></article><article><h3 >each</h3><pre >each(function(index,item){...})⇒self</pre><p >遍历一个对象集合每个元素。在迭代函数中，<code >this</code>关键字指向当前项(作为函数的第二个参数传递)。如果迭代函数返回<code >false</code>，遍历结束。</p><pre >$('forminput').each(function(index){console.log('input%dis:%o',index,this)})</pre></article><article><h3 >empty</h3><pre >empty()⇒self</pre><p >清空对象集合中每个元素的DOM内容。</p></article><article><h3 >eq</h3><pre >eq(index)⇒collection</pre><p >从当前对象集合中获取给定索引值（愚人码头注：以0为基数）的元素。</p><pre >$('li').eq(0)//=>onlythefirstlistitem$('li').eq(-1)//=>onlythelastlistitem</pre></article><article><h3 >filter</h3><pre >filter(selector)⇒collectionfilter(function(index){...})⇒collectionv1.0+</pre><p >过滤对象集合，返回对象集合中满足css选择器的项。如果参数为一个函数，函数返回有实际值得时候，元素才会被返回。在函数中，<code >this</code>关键字指向当前的元素。</p><p >与此相反的功能，查看<a href="https://www.css88.com/doc/zeptojs_api/#not" >not</a>.</p></article><article><h3 >find</h3><pre >find(selector)⇒collectionfind(collection)⇒collectionv1.0+find(element)⇒collectionv1.0+</pre><p >在当对象前集合内查找符合CSS选择器的每个元素的后代元素。</p><p >如果给定Zepto对象集合或者元素，过滤它们，只有当它们在当前Zepto集合对象中时，才回被返回。</p><pre >varform=$('#myform')form.find('input,select')</pre></article><article><h3 >first</h3><pre >first()⇒collection</pre><p >获取当前对象集合中的第一个元素。</p><pre >$('form').first()</pre></article><article><h3 >forEach</h3><pre >forEach(function(item,index,array){...},[context])</pre><p >遍历对象集合中每个元素，有点类似<a href="https://www.css88.com/doc/zeptojs_api/#each" >each</a>，但是遍历函数的参数不一样，当函数返回<code >false</code>的时候，遍历不会停止。</p><p >这是一个Zepto提供的方法，不是jquery的API。</p></article><article><h3 >get</h3><pre >get()⇒arrayget(index)⇒DOMnode</pre><p >从当前对象集合中获取所有元素或单个元素。当index参数不存在的时，以普通数组的方式返回所有的元素。当指定index时，只返回该置的元素。这点与<a href="https://www.css88.com/doc/zeptojs_api/#eq" >eq</a>不同，该方法返回的是DOM节点，不是Zepto对象集合。</p><pre >varelements=$('h2')elements.get()//=>getallheadingsasanarrayelements.get(0)//=>getfirstheadingnode</pre></article><article><h3 >has<span >v1.0+</span></h3><pre >has(selector)⇒collectionhas(node)⇒collection</pre><p >判断当前对象集合的子元素是否有符合选择器的元素，或者是否包含指定的DOM节点，如果有，则返回新的对象集合，该对象过滤掉不含有选择器匹配元素或者不含有指定DOM节点的对象。</p><pre >$('ol>li').has('a[href]')//=>getonlyLIelementsthatcontainlinks</pre></article><article><h3 >hasClass</h3><pre >hasClass(name)⇒boolean</pre><p >检查对象集合中是否有元素含有指定的class。</p><pre ><ul><li>listitem1</li><li>listitem2</li><li>listitem3</li></ul><p>aparagraph</p><scripttype="text/javascript">$("li").hasClass("yaotaiyang");//=>true</script></pre></article><article><h3 >height</h3><pre >height()⇒numberheight(value)⇒selfheight(function(index,oldHeight){...})⇒self</pre><p >获取对象集合中第一个元素的高度；或者设置对象集合中所有元素的高度。</p><pre >$('#foo').height()//=>123$(window).height()//=>838(viewportheight)$(document).height()//=>22302</pre></article><article><h3 >hide</h3><pre >hide()⇒self</pre><p >Hide elements in this collection by setting their<code >display</code>CSS property to<code >none</code>.</p><p >通过设置css的属性<code >display</code>为<code >none</code>来将对象集合中的元素隐藏。</p></article><article><h3 >html</h3><pre >html()⇒stringhtml(content)⇒selfhtml(function(index,oldHtml){...})⇒self</pre><p >获取或设置对象集合中元素的HTML内容。当没有给定content参数时，返回对象集合中第一个元素的innerHtml。当给定content参数时，用其替换对象集合中每个元素的内容。content可以是<a href="https://www.css88.com/doc/zeptojs_api/#append" >append</a>中描述的所有类型。</p><pre >//autolinkeverythingthatlookslikeaTwitterusername$('.commentp').html(function(idx,oldHtml){returnoldHtml.replace(/(^|\W)@(\w{1,15})/g,'$1@<ahref="http://twitter.com/$2">$2</a>')})</pre></article><article><h3 >index</h3><pre >index([element])⇒number</pre><p >获取一个元素的索引值（愚人码头注：从0开始计数）。当elemen参数没有给出时，返回当前元素在兄弟节点中的位置。当element参数给出时，返回它在当前对象集合中的位置。如果没有找到该元素，则返回<code >-1</code>。</p><pre >$('li:nth-child(2)').index()//=>1</pre></article><article><h3 >indexOf</h3><pre >indexOf(element,[fromIndex])⇒number</pre><p >Get the position of an element in the current collection. If fromIndex number is given, search only from that position onwards. Returns the 0-based position when found and<code >-1</code>if not found. Use of<a href="https://www.css88.com/doc/zeptojs_api/#index" >index</a>is recommended over this method.</p><p >在当前对象集合中获取一个元素的索引值（愚人码头注：从0开始计数）。如果给定formindex参数，从该位置开始往后查找，返回基于0的索引值，如果没找到，则返回<code >-1</code>。<a href="https://www.css88.com/doc/zeptojs_api/#index" >index</a>方法是基于这个方法实现的。</p><p >这是一个Zepto的方法，不是jquer的api。</p></article><article><h3 >insertAfter</h3><pre >insertAfter(target)⇒self</pre><p >将集合中的元素插入到指定的目标元素后面（愚人码头注：外部插入）。这个有点像<a href="https://www.css88.com/doc/zeptojs_api/#after" >after</a>，但是使用方式相反。</p><pre >$('<p>Emphasismine.</p>').insertAfter('blockquote')</pre></article><article><h3 >insertBefore</h3><pre >insertBefore(target)⇒self</pre><p >将集合中的元素插入到指定的目标元素前面（愚人码头注：外部插入）。这个有点像<a href="https://www.css88.com/doc/zeptojs_api/#before" >before</a>，但是使用方式相反。</p><pre >$('<p>Seethefollowingtable:</p>').insertBefore('table')</pre></article><article><h3 >is</h3><pre >is(selector)⇒boolean</pre><p >判断当前元素集合中的第一个元素是否符css选择器。对于基础支持jquery的非标准选择器类似：<code >:visible</code>包含在可选的“selector”模块中。</p><p ><a href="https://www.css88.com/jqapi-1.9/category/selectors/jquery-selector-extensions/" >jQuery CSS extensions</a>不被支持。 选择“selector”模块仅仅能支持有限几个最常用的方式。</p></article><article><h3 >last</h3><pre >last()⇒collection</pre><p >获取对象集合中最后一个元素。</p><pre >$('li').last()</pre></article><article><h3 >map</h3><pre >map(function(index,item){...})⇒collection</pre><p >遍历对象集合中的所有元素。通过遍历函数返回值形成一个新的集合对象。在遍历函数中<code >this</code>关键之指向当前循环的项（遍历函数中的第二个参数）。</p><p >遍历中返回<code >null</code>和<code >undefined</code>，遍历将结束。</p><pre >//gettextcontentsofallelementsincollectionelements.map(function(){return$(this).text()}).get().join(',')</pre></article><article><h3 >next</h3><pre >next()⇒collectionnext(selector)⇒collectionv1.0+</pre><p >Get the next sibling–optionally filtered by selector–of each element in the collection.</p><p >获取对象集合中每一个元素的下一个兄弟节点(可以选择性的带上过滤选择器)。</p><pre >$('dldt').next()//=>theDDelements</pre></article><article><h3 >not</h3><pre >not(selector)⇒collectionnot(collection)⇒collectionnot(function(index){...})⇒collection</pre><p >过滤当前对象集合，获取一个新的对象集合，它里面的元素不能匹配css选择器。如果另一个参数为Zepto对象集合，那么返回的新Zepto对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的元素，函数的<code >this</code>关键字指向当前循环元素。</p><p >与它相反的功能，查看<a href="https://www.css88.com/doc/zeptojs_api/#filter" >filter</a>.</p></article><article><h3 >offset</h3><pre >offset()⇒objectoffset(coordinates)⇒selfv1.0+offset(function(index,oldOffset){...})⇒selfv1.0+</pre><p >获得当前元素相对于document的位置。返回一个对象含有：<code >top</code>,<code >left</code>,<code >width</code>和<code >height</code></p><p >当给定一个含有<code >left</code>和<code >top</code>属性对象时，使用这些值来对集合中每一个元素进行相对于document的定位。</p></article><article><h3 >offsetParent<span >v1.0+</span></h3><pre >offsetParent()⇒collection</pre><p >找到第一个定位过的祖先元素，意味着它的css中的<code >position</code>属性值为“relative”, “absolute” or “fixed”</p></article><article><h3 >parent</h3><pre >parent([selector])⇒collection</pre><p >获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。</p></article><article><h3 >parents</h3><pre >parents([selector])⇒collection</pre><p >获取对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。</p><p >如果想获取直接父级元素，使用<a href="https://www.css88.com/doc/zeptojs_api/#parent" >parent</a>。如果只想获取到第一个符合css选择器的元素，使用<a href="https://www.css88.com/doc/zeptojs_api/#closest" >closest</a>。</p><pre >$('h1').parents()//=>[<div#container>,<body>,<html>]</pre></article><article><h3 >pluck</h3><pre >pluck(property)⇒array</pre><p >获取对象集合中每一个元素的属性值。返回值为<code >null</code>或<code >undefined</code>值得过滤掉。</p><pre >$('body>*').pluck('nodeName')//=>["DIV","SCRIPT"]//implementationofZepto's`next`method$.fn.next=function(){return$(this.pluck('nextElementSibling'))}</pre><p >这是一个Zepto的方法，不是jquery的api</p></article><article><h3 >position<span >v1.0+</span></h3><pre >position()⇒object</pre><p >获取对象集合中第一个元素的位置。相对于<a href="https://www.css88.com/doc/zeptojs_api/#offsetParent" >offsetParent</a>。当绝对定位的一个元素靠近另一个元素的时候，这个方法是有用的。</p><p >Returns an object with properties:<code >top</code>,<code >left</code>.</p><pre >varpos=element.position()//positionatooltiprelativetotheelement$('#tooltip').css({position:'absolute',top:pos.top-30,left:pos.left})</pre></article><article><h3 >prepend</h3><pre >prepend(content)⇒self</pre><p >将参数内容插入到每个匹配元素的前面（愚人码头注：元素内部插入）。插入d的元素可以试html字符串片段，一个dom节点，或者一个节点的数组。</p><pre >$('ul').prepend('<li>firstlistitem</li>')</pre></article><article><h3 >prependTo</h3><pre >prependTo(target)⇒self</pre><p >将所有元素插入到目标前面（愚人码头注：元素内部插入）。这有点像<a href="https://www.css88.com/doc/zeptojs_api/#prepend" >prepend</a>，但是是相反的方式。</p><pre >$('<li>firstlistitem</li>').prependTo('ul')</pre></article><article><h3 >prev</h3><pre >prev()⇒collectionprev(selector)⇒collectionv1.0+</pre><p >获取对象集合中每一个元素的前一个兄弟节点，通过选择器来进行过滤。</p></article><article><h3 >prop<span >v1.0+</span></h3><pre >prop(name)⇒valueprop(name,value)⇒selfprop(name,function(index,oldValue){...})⇒self</pre><p >读取或设置dom元素的属性值。它在读取属性值的情况下优先于<a href="https://www.css88.com/doc/zeptojs_api/#attr" >attr</a>，因为这些属性值会因为用户的交互发生改变，如<code >checked</code>和<code >selected</code>。</p><p >简写或小写名称，比如<code >for</code>,<code >class</code>,<code >readonly</code>及类似的属性，将被映射到实际的属性上，比如<code >htmlFor</code>,<code >className</code>,<code >readOnly</code>, 等等。</p></article><article><h3 >push</h3><pre >push(element,[element2,...])⇒self</pre><p >Add elements to the end of the current collection.</p><p >添加元素到当前对象集合的最后。</p><p >这是一个zepto的方法，不是jquery的api</p></article><article><h3 >ready</h3><pre >ready(function($){...})⇒self</pre><p >添加一个事件侦听器，当页面DOM加载完毕 “DOMContentLoaded” 事件触发时触发。建议使用<a href="https://www.css88.com/doc/zeptojs_api/#$()" >$()</a>来代替这种用法。</p></article><article><h3 >reduce</h3><pre >reduce(function(memo,item,index,array){...},[initial])⇒value</pre><p >与<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/Reduce" >Array.reduce</a>有相同的用法，遍历当前对象集合。memo是函数上次的返回值。迭代进行遍历。</p><p >这是一个zepto的方法，不是jquery的api</p></article><article><h3 >remove</h3><pre >remove()⇒self</pre><p >从其父节点中删除当前集合中的元素，有效的从dom中移除。</p></article><article><h3 >removeAttr</h3><pre >removeAttr(name)⇒self</pre><p >移除当前对象集合中所有元素的指定属性。</p></article><article><h3 >removeClass</h3><pre >removeClass([name])⇒selfremoveClass(function(index,oldClassName){...})⇒self</pre><p >移除当前对象集合中所有元素的指定class。如果没有指定name参数，将移出所有的class。多个class参数名称可以利用空格分隔。下例移除了两个class。</p><pre ><inputclass="taiyangyueliang"id="check1"type="checkbox"checked="checked">
<inputid="check2"type="checkbox"><scripttype="text/javascript">$("#check1").removeClass("taiyangyueliang")</script></pre></article><article><h3 >removeProp<span >v1.2+</span></h3><pre >removeProp(name)⇒self</pre><p >从集合的每个DOM节点中删除一个属性。这是用JavaScript的<code >delete</code>操作符完成。值得注意的是如果尝试删除DOM的一些内置属性，如<code >className</code>或<code >maxLength</code>，将不会有任何效果，因为浏览器禁止删除这些属性。</p></article><article><h3 >replaceWith</h3><pre >replaceWith(content)⇒self</pre><p >用给定的内容替换所有匹配的元素。(包含元素本身)。content参数可以为<a href="https://www.css88.com/doc/zeptojs_api/#before" >before</a>中描述的类型。</p></article><article><h3 >scrollLeft<span >v1.1+</span></h3><pre >scrollLeft()⇒numberscrollLeft(value)⇒self</pre><p >获取或设置页面上的滚动元素或者整个窗口向右滚动的像素值。</p></article><article><h3 >scrollTop<span >v1.0+</span></h3><pre >scrollTop()⇒numberscrollTop(value)⇒selfv1.1+</pre><p >获取或设置页面上的滚动元素或者整个窗口向下滚动的像素值。</p></article><article><h3 >show</h3><pre >show()⇒self</pre><p >恢复对象集合中每个元素默认的“display”值。如果你用<a href="https://www.css88.com/doc/zeptojs_api/#hide" >hide</a>将元素隐藏，用该属性可以将其显示。相当于去掉了<code >display：none</code>。</p></article><article><h3 >siblings</h3><pre >siblings([selector])⇒collection</pre><p >获取对象集合中所有元素的兄弟节点。如果给定CSS选择器参数，过滤出符合选择器的元素。</p></article><article><h3 >size</h3><pre >size()⇒number</pre><p >获取对象集合中元素的数量。</p></article><article><h3 >slice</h3><pre >slice(start,[end])⇒array</pre><p >提取这个数组<code >array</code>的子集，从<code >start</code>开始，如果给定<code >end</code>，提取从从<code >start</code>开始到<code >end</code>结束的元素，但是不包含<code >end</code>位置的元素。</p></article><article><h3 >text</h3><pre >text()⇒stringtext(content)⇒selftext(function(index,oldText){...})⇒selfv1.1.4+</pre><p >获取或者设置所有对象集合中元素的文本内容。当没有给定content参数时，返回当前对象集合中第一个元素的文本内容（包含子节点中的文本内容）。当给定content参数时，使用它替换对象集合中所有元素的文本内容。它有待点似<a href="https://www.css88.com/doc/zeptojs_api/#html" >html</a>，与它不同的是它不能用来获取或设置 HTML。</p></article><article><h3 >toggle</h3><pre >toggle([setting])⇒self</pre><p >显示或隐藏匹配元素。如果<code >setting</code>为true，相当于<a href="https://www.css88.com/doc/zeptojs_api/#show" >show</a>法。如果<code >setting</code>为false。相当于<a href="https://www.css88.com/doc/zeptojs_api/#hide" >hide</a>方法。</p><pre >varinput=$('input[type=text]')$('#too_long').toggle(input.val().length>140)</pre></article><article><h3 >toggleClass</h3><pre >toggleClass(names,[setting])⇒selftoggleClass(function(index,oldClassNames){...},[setting])⇒self</pre><p >在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它，如果不存在，就添加它。如果<code >setting</code>的值为真，这个功能类似于<a href="https://www.css88.com/doc/zeptojs_api/#addClass" >addClass</a>，如果为假，这个功能类似与<a href="https://www.css88.com/doc/zeptojs_api/#removeClass" >removeClass</a>。</p></article><article><h3 >unwrap</h3><pre >unwrap()⇒self</pre><p >移除集合中每个元素的直接父节点，并把他们的子元素保留在原来的位置。 基本上，这种方法删除上一的祖先元素，同时保持DOM中的当前元素。</p><pre >$(document.body).append('<divid=wrapper><p>Content</p></div>')$('#wrapperp').unwrap().parents()//=>[<body>,<html>]</pre></article><article><h3 >val</h3><pre >val()⇒stringval(value)⇒selfval(function(index,oldValue){...})⇒self</pre><p >获取或设置匹配元素的值。当没有给定value参数，返回第一个元素的值。如果是<code ><select multiple></code>标签，则返回一个数组。当给定value参数，那么将设置所有元素的值。</p></article><article><h3 >width</h3><pre >width()⇒numberwidth(value)⇒selfwidth(function(index,oldWidth){...})⇒self</pre><p >获取对象集合中第一个元素的宽；或者设置对象集合中所有元素的宽。</p><pre >$('#foo').width()//=>123$(window).width()//=>768(viewportwidth)$(document).width()//=>768</pre></article><article><h3 >wrap</h3><pre >wrap(structure)⇒selfwrap(function(index){...})⇒selfv1.0+</pre><p >在每个匹配的元素外层包上一个html元素。structure参数可以是一个单独的元素或者一些嵌套的元素。也可以是一个html字符串片段或者dom节点。还可以是一个生成用来包元素的回调函数，这个函数返回前两种类型的包裹片段。</p><p >需要提醒的是：该方法对于dom中的节点有着很好的支持。如果将<code >wrap()</code>用在一个新的元素上，然后再将结果插入到document中，此时该方法无效。</p><pre >//wrapeachbuttoninaseparatespan:$('.buttonsa').wrap('<span>')//wrapeachcodeblockinadivandpre:$('code').wrap('<div><pre/></div>')//wrapallforminputsinaspanwithclassname//correspondingtoinputtype:$('input').wrap(function(index){return'<spanclass='+this.type+'field/>'})//=><span><inputtype=text/></span>,//<span><inputtype=search/></span>//WARNING:willnotworkasexpected!$('<em>broken</em>').wrap('<li>').appendTo(document.body)//dothisinstead:$('<em>better</em>').appendTo(document.body).wrap('<li>')</pre></article><article><h3 >wrapAll</h3><pre >wrapAll(structure)⇒self</pre><p >在所有匹配元素外面包一个单独的结构。结构可以是单个元素或 几个嵌套的元素，并且可以通过在作为HTML字符串或DOM节点。</p><pre >//wrapallbuttonsinasinglediv:$('a.button').wrapAll('<divid=buttons/>')</pre></article><article><h3 >wrapInner</h3><pre >wrapInner(structure)⇒selfwrapInner(function(index){...})⇒selfv1.0+</pre><p >将每个元素中的<em>内容</em>包裹在一个单独的结构中。结构可以是单个元件或多个嵌套元件，并且可以通过在作为HTML字符串或DOM节点，或者是一个生成用来包元素的回调函数，这个函数返回前两种类型的包裹片段。</p><pre >//wrapthecontentsofeachnavigationlinkinaspan:$('nava').wrapInner('<span>')//wrapthecontentsofeachlistiteminaparagraphandemphasis:$('olli').wrapInner('<p><em/></p>')</pre></article><hr/><h2 >Detect methods</h2><article><h3 >Detect module</h3><p >该检测方法可以在不同的环境中微调你的站点或者应用程序，并帮助你识别手机和平板；以及不同的浏览器和操作系统。</p><pre >//Thefollowingbooleanflagsaresettotrueiftheyapply,//ifnotthey'reeithersetto`false`or`undefined`.//Werecommendaccessingthemwith`!!`prefixedtocoercetoaboolean.//generaldevicetype$.os.phone$.os.tablet//specificOS$.os.ios$.os.android$.os.webos$.os.blackberry$.os.bb10$.os.rimtabletos//specificdevicetype$.os.iphone$.os.ipad$.os.ipod//[v1.1]$.os.touchpad$.os.kindle//specificbrowser$.browser.chrome$.browser.firefox$.browser.safari//[v1.1]$.browser.webview//(iOS)[v1.1]$.browser.silk$.browser.playbook$.browser.ie//[v1.1]//此外，版本信息是可用的。//下面是运行iOS6.1的iPhone所返回的。!!$.os.phone//=>true!!$.os.iphone//=>true!!$.os.ios//=>true$.os.version//=>"6.1"$.browser.version//=>"536.26"</pre></article><hr/><h2 >事件处理</h2><article><h3 >$.Event</h3><pre >$.Event(type,[properties])⇒event</pre><p >创建并初始化一个指定的DOM事件。如果给定properties对象，使用它来扩展出新的事件对象。默认情况下，事件被设置为冒泡方式；这个可以通过设置<code >bubbles</code>为<code >false</code>来关闭。</p><p >一个事件初始化的函数可以使用<a href="https://www.css88.com/doc/zeptojs_api/#trigger" >trigger</a>来触发。</p><pre >$.Event('mylib:change',{bubbles:false})</pre></article><article><h3 >$.proxy<span >v1.0+</span></h3><pre >$.proxy(fn,context)⇒function$.proxy(fn,context,[additionalArguments...])⇒functionv1.1.4+$.proxy(context,property)⇒function$.proxy(context,property,[additionalArguments...])⇒functionv1.1.4+</pre><p >接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文(context)语境，新函数中<code >this</code>指向context参数。另外一种形式，原始的function是从上下文(context)对象的特定属性读取。</p><p >如果传递超过2个的额外参数，它们被用于 传递给fn参数的函数 引用。</p><pre >varobj={name:'Zepto'},handler=function(){console.log("hellofrom+",this.name)}//ensuresthatthehandlerwillbeexecutedinthecontextof`obj`:$(document).on('click',$.proxy(handler,obj))</pre></article><article><h3 >bind</h3><p >不推荐, 使用<a href="https://www.css88.com/doc/zeptojs_api/#on" >on</a>代替。</p><pre >bind(type,function(e){...})⇒selfbind(type,[data],function(e){...})⇒selfv1.1+bind({type:handler,type2:handler2,...})⇒selfbind({type:handler,type2:handler2,...},[data])⇒selfv1.1+</pre><p >为一个元素绑定一个处理事件。</p></article><article><h3 >delegate</h3><p >不推荐, 使用<a href="https://www.css88.com/doc/zeptojs_api/#on" >on</a>代替。</p><pre >delegate(selector,type,function(e){...})⇒selfdelegate(selector,{type:handler,type2:handler2,...})⇒self</pre><p >基于一组特定的根元素为所有选择器匹配的元素附加一个处理事件，匹配的元素可能现在或将来才创建。</p></article><article><h3 >die</h3><p >不推荐, 使用<a href="https://www.css88.com/doc/zeptojs_api/#on" >on</a>代替。</p><pre >die(type,function(e){...})⇒selfdie({type:handler,type2:handler2,...})⇒self</pre><p >删除通过<a href="https://www.css88.com/doc/zeptojs_api/#live" >live</a>添加的事件。</p></article><article><h3 >event.isDefaultPrevented<span >v1.1+</span></h3><pre >event.isDefaultPrevented()⇒boolean</pre><p >如果<code >preventDefault()</code>被该事件的实例调用，那么返回true。 这可作为跨平台的替代原生的<code >defaultPrevented</code>属性，如果<code >defaultPrevented</code>缺失或在某些浏览器下不可靠的时候。</p><pre >//triggeracustomeventandcheckwhetheritwascancelledvarevent=$.Event('custom')element.trigger(event)event.isDefaultPrevented()</pre></article><article><h3 >event.isImmediatePropagationStopped<span >v1.1+</span></h3><pre >event.isImmediatePropagationStopped()⇒boolean</pre><p >如果<code >stopImmediatePropagation()</code>被该事件的实例调用，那么返回true。Zepto在不支持该原生方法的浏览器中实现它， （例如老版本的Android）。</p></article><article><h3 >event.isPropagationStopped<span >v1.1+</span></h3><pre >event.isPropagationStopped()⇒boolean</pre><p >如果<code >stopPropagation()</code>被该事件的实例调用，那么返回true。</p></article><article><h3 >live</h3><p >不推荐, 使用<a href="https://www.css88.com/doc/zeptojs_api/#on" >on</a>代替。</p><pre >live(type,function(e){...})⇒selflive({type:handler,type2:handler2,...})⇒self</pre><p >类似<a href="https://www.css88.com/doc/zeptojs_api/#delegate" >delegate</a>，添加一个个事件处理器到符合目前选择器的所有元素匹配，匹配的元素可能现在或将来才创建。</p></article><article><h3 >off</h3><pre >off(type,[selector],function(e){...})⇒selfoff({type:handler,type2:handler2,...},[selector])⇒selfoff(type,[selector])⇒selfoff()⇒self</pre><p >移除通过<a href="https://www.css88.com/doc/zeptojs_api/#on" >on</a>添加的事件.移除一个特定的事件处理程序， 必须通过用<code >on()</code>添加的那个相同的函数。否则，只通过事件类型调用此方法将移除该类型的所有处理程序。如果没有参数，将移出当前元素上<em>全部</em>的注册事件。</p></article><article><h3 >on</h3><pre >on(type,[selector],function(e){...})⇒selfon(type,[selector],[data],function(e){...})⇒selfv1.1+on({type:handler,type2:handler2,...},[selector])⇒selfon({type:handler,type2:handler2,...},[selector],[data])⇒selfv1.1+</pre><p >添加事件处理程序到对象集合中得元素上。多个事件可以通过空格的字符串方式添加，或者以事件类型为键、以函数为值的对象 方式。如果给定css选择器，当事件在匹配该选择器的元素上发起时，事件才会被触发（愚人码头注：即事件委派，或者说事件代理）。</p><p >如果给定<code >data</code>参数，这个值将在事件处理程序执行期间被作为有用的<code >event.data</code>属性</p><p >事件处理程序在添加该处理程序的元素、或在给定选择器情况下匹配该选择器的元素的上下文中执行(愚人码头注：this指向触发事件的元素)。 当一个事件处理程序返回<code >false</code>，<code >preventDefault()</code>和<code >stopPropagation()</code>被当前事件调用的情况下， 将防止默认浏览器操作，如链接。</p><p >如果<code >false</code>在回调函数的位置上作为参数传递给这个方法， 它相当于传递一个函数，这个函数直接返回<code >false</code>。（愚人码头注：即将<code >false</code>当作<code >function(e){ ... }</code>的参数，作为<code >function(){ return false; }</code>的简写形式，例如：<code >$("a.disabled").on("click", false);</code>这相当于<code >$("a.disabled").on("click", function(){ return false; } );</code>）</p><pre >varelem=$('#content')//observeallclicksinside#content:elem.on('click',function(e){...})//observeclicksinsidenavigationlinksin#contentelem.on('click','nava',function(e){...})//allclicksinsidelinksinthedocument$(document).on('click','a',function(e){...})//disablefollowinganynavigationlinkonthepage$(document).on('click','nava',false)</pre></article><article><h3 >one</h3><pre >one(type,[selector],function(e){...})⇒selfone(type,[selector],[data],function(e){...})⇒selfv1.1+one({type:handler,type2:handler2,...},[selector])⇒selfone({type:handler,type2:handler2,...},[selector],[data])⇒selfv1.1+</pre><p >添加一个处理事件到元素，当第一次执行事件以后，该事件将自动解除绑定，保证处理函数在每个元素上最多执行一次。<code >selector</code>和<code >data</code>等参数说明请查看<a href="https://www.css88.com/doc/zeptojs_api/#on" ><code >.on()</code></a>。</p></article><article><h3 >trigger</h3><pre >trigger(event,[args])⇒self</pre><p >在对象集合的元素上触发指定的事件。事件可以是一个字符串类型，也可以是一个 通过<a href="https://www.css88.com/doc/zeptojs_api/#$.Event" >$.Event</a>定义的事件对象。如果给定args参数，它会作为参数传递给事件函数。</p><pre >//addahandlerforacustomevent$(document).on('mylib:change',function(e,from,to){console.log('changeon%owithdata%s,%s',e.target,from,to)})//triggerthecustomevent$(document.body).trigger('mylib:change',['one','two'])</pre><p >Zepto仅仅支持在dom元素上触发事件。</p></article><article><h3 >triggerHandler</h3><pre >triggerHandler(event,[args])⇒self</pre><p >像<a href="https://www.css88.com/doc/zeptojs_api/#trigger" >trigger</a>，它只在当前元素上触发事件，但不冒泡。</p><pre >$("input").triggerHandler('focus');//此时input上的focus事件触发，但是input不会获取焦点$("input").trigger('focus');//此时input上的focus事件触发，input获取焦点</pre></article><article><h3 >unbind</h3><p >Deprecated, use<a href="https://www.css88.com/doc/zeptojs_api/#off" >off</a>instead.</p><pre >unbind(type,function(e){...})⇒selfunbind({type:handler,type2:handler2,...})⇒self</pre><p >移除通过<a href="https://www.css88.com/doc/zeptojs_api/#bind" >bind</a>注册的事件。</p></article><article><h3 >undelegate</h3><p >Deprecated, use<a href="https://www.css88.com/doc/zeptojs_api/#off" >off</a>instead.</p><pre >undelegate(selector,type,function(e){...})⇒selfundelegate(selector,{type:handler,type2:handler2,...})⇒self</pre><p >移除通过<a href="https://www.css88.com/doc/zeptojs_api/#delegate" >delegate</a>注册的事件。</p></article><hr/><h2 >Ajax 请求</h2><article><h3 >$.ajax</h3><pre >$.ajax(options)⇒XMLHttpRequest</pre><p >执行Ajax请求。它可以是本地资源，或者通过支持<a href="https://developer.mozilla.org/en/http_access_control" >HTTP access control</a>的浏览器 或者通过<a href="https://json-p.org/" >JSONP</a>来实现跨域。</p><p >选项:</p><ul class=" list-paddingleft-2"><li><p><code >type</code>(默认： “GET”)：请求方法 (“GET”, “POST”, or other)</p></li><li><p><code >url</code>(默认： 当前地址)：发送请求的地址</p></li><li><p><code >data</code>(默认：none)：发送到服务器的数据；如果是GET请求，它会自动被作为参数拼接到url上。非String对象将通过<a href="https://www.css88.com/doc/zeptojs_api/#$.param" >$.param</a>得到序列化字符串。</p></li><li><p><code >processData</code>(默认： true)： 对于非Get请求。是否自动将<code >data</code>转换为字符串。</p></li><li><p><code >contentType</code>(默认： “application/x-www-form-urlencoded”)： 发送信息至服务器时内容编码类型。 (这也可以通过设置<code >headers</code>)。通过设置<code >false</code>跳过设置默认值。</p></li><li><p><code >mimeType</code>(默认： none): 覆盖响应的MIME类型。<span >v1.1+</span></p></li><li><p><code >dataType</code>(默认： none)：预期服务器返回的数据类型(“json”, “jsonp”, “xml”, “html”, or “text”)</p></li><li><p><code >jsonp</code>(默认：“callback”): JSONP回调查询参数的名称</p></li><li><p><code >jsonpCallback</code>(默认： “jsonp{N}”): 全局JSONP回调函数的 字符串（或返回的一个函数）名。设置该项能启用浏览器的缓存。<span >v1.1+</span></p></li><li><p><code >timeout</code>(默认：<code >0</code>): 以毫秒为单位的请求超时时间,<code >0</code>表示不超时。</p></li><li><p><code >headers</code>: Ajax请求中额外的HTTP信息头对象</p></li><li><p><code >async</code>(默认：true): 默认设置下，所有请求均为异步。如果需发送同步请求，请将此设置为<code >false</code>。</p></li><li><p><code >global</code>(默认：true): 请求将触发全局Ajax事件处理程序，设置为 false 将不会触发全局 Ajax 事件。</p></li><li><p><code >context</code>(默认：window): 这个对象用于设置Ajax相关回调函数的上下文(this指向)。</p></li><li><p><code >traditional</code>(默认： false): 激活传统的方式通过<a href="https://www.css88.com/doc/zeptojs_api/#$.param" >$.param</a>来得到序列化的<code >data</code>。</p></li><li><p><code >cache</code>(默认： true): 浏览器是否应该被允许缓存GET响应。从<span >v1.1.4</span>开始，当dataType选项为<code >"script"</code>或<code >jsonp</code>时，默认为<code >false</code>。</p></li><li><p><code >xhrFields</code>(默认： none): 一个对象包含的属性被逐字复制到XMLHttpRequest的实例。<span >v1.1+</span></p></li><li><p><code >username</code>&<code >password</code>(默认： none): HTTP基本身份验证凭据。<span >v1.1+</span></p></li></ul><p >如果URL中含有<code >=?</code>或者<code >dataType</code>是“jsonp”，这讲求将会通过注入一个<code ><script></code>标签来代替使用 XMLHttpRequest (查看<a href="https://json-p.org/" >JSONP</a>)。此时<code >contentType</code>,<code >dataType</code>,<code >headers</code>有限制，<code >async</code>不被支持。</p><h4 >Ajax 回调函数</h4><p >你可以指定以下的回调函数，他们将按给定的顺序执行：</p><ol class=" list-paddingleft-2"><li><p ><code >beforeSend(xhr, settings)</code>：请求发出前调用，它接收xhr对象和settings作为参数对象。如果它返回<code >false</code>，请求将被取消。</p></li><li><p ><code >success(data, status, xhr)</code>：请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。</p></li><li><p ><code >error(xhr, errorType, error)</code>：请求出错时调用。 (超时，解析错误，或者状态码不在HTTP 2xx)。</p></li><li><p ><code >complete(xhr, status)</code>：请求完成时调用，无论请求失败或成功。</p></li></ol><h4 >Promise 回调接口<span >v1.1+</span></h4><p >如果可选的“callbacks” 和 “deferred” 模块被加载，从<code >$.ajax()</code>返回的XHR对象实现了promise接口链式的回调：</p><pre >xhr.done(function(data,status,xhr){...})xhr.fail(function(xhr,errorType,error){...})xhr.always(function(){...})xhr.then(function(){...})</pre><p >这些方法取代了<code >success</code>,<code >error</code>, 和<code >complete</code>回调选项.</p><h4 >Ajax 事件</h4><p >当<code >global: true</code>时。在Ajax请求生命周期内，以下这些事件将被触发。</p><ol class=" list-paddingleft-2"><li><p ><code >ajaxStart</code><em>(global)</em>：如果没有其他Ajax请求当前活跃将会被触发。</p></li><li><p ><code >ajaxBeforeSend</code>(data: xhr, options)：再发送请求前，可以被取消。</p></li><li><p ><code >ajaxSend</code>(data: xhr, options)：像<code >ajaxBeforeSend</code>，但不能取消。</p></li><li><p ><code >ajaxSuccess</code>(data: xhr, options, data)：当返回成功时。</p></li><li><p ><code >ajaxError</code>(data: xhr, options, error)：当有错误时。</p></li><li><p ><code >ajaxComplete</code>(data: xhr, options)：请求已经完成后，无论请求是成功或者失败。</p></li><li><p ><code >ajaxStop</code><em>(global)</em>：如果这是最后一个活跃着的Ajax请求，将会被触发。</p></li></ol><p >默认情况下，Ajax事件在document对象上触发。然而，如果请求的<code >context</code>是一个DOM节点，该事件会在此节点上触发然后再DOM中冒泡。唯一的例外是<code >ajaxStart</code>&<code >ajaxStop</code>这两个全局事件。</p><pre >$(document).on('ajaxBeforeSend',function(e,xhr,options){//ThisgetsfiredforeveryAjaxrequestperformedonthepage.//Thexhrobjectand$.ajax()optionsareavailableforediting.//Returnfalsetocancelthisrequest.})$.ajax({type:'GET',url:'/projects',//datatobeaddedtoquerystring:data:{name:'Zepto.js'},//typeofdataweareexpectinginreturn:dataType:'json',timeout:300,context:$('body'),success:function(data){//SupposingthisJSONpayloadwasreceived://{"project":{"id":42,"html":"<div>..."}}//appendtheHTMLtocontextobject.this.append(data.project.html)},error:function(xhr,type){alert('Ajaxerror!')}})//postaJSONpayload:$.ajax({type:'POST',url:'/projects',//postpayload:data:JSON.stringify({name:'Zepto.js'}),contentType:'application/json'})</pre></article><article><h3 >$.ajaxJSONP</h3><p >不推荐, 使用<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" >$.ajax</a>代替。</p><pre >$.ajaxJSONP(options)⇒mockXMLHttpRequest</pre><p >执行JSONP跨域获取数据。</p><p >此方法相对<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" >$.ajax</a>没有优势，建议不要使用。</p></article><article><h3 >$.ajaxSettings</h3><p >一个包含Ajax请求的默认设置的对象。大部分的设置在<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" >$.ajax</a>中已经描述。以下设置为全局非常有用：</p><ul class=" list-paddingleft-2"><li><p><code >timeout</code>(默认：<code >0</code>)：对Ajax请求设置一个非零的值指定一个默认的超时时间，以毫秒为单位。</p></li><li><p><code >global</code>(默认： true)：设置为false。以防止触发Ajax事件。</p></li><li><p><code >xhr</code>(默认：XMLHttpRequest factory)：设置为一个函数，它返回XMLHttpRequest实例(或一个兼容的对象)</p></li><li><p><code >accepts</code>: 从服务器请求的MIME类型，指定<code >dataType</code>值：</p></li><ul class=" list-paddingleft-2"><li><p>script: “text/javascript, application/javascript”</p></li><li><p>json: “application/json”</p></li><li><p>xml: “application/xml, text/xml”</p></li><li><p>html: “text/html”</p></li><li><p>text: “text/plain”</p></li></ul></ul></article><article><h3 >$.get</h3><pre >$.get(url,function(data,status,xhr){...})⇒XMLHttpRequest$.get(url,[data],[function(data,status,xhr){...}],[dataType])⇒XMLHttpRequestv1.0+</pre><p >执行一个Ajax GET请求。这是一个<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" >$.ajax</a>的简写方式。</p><pre >$.get('/whatevs.html',function(response){$(document.body).append(response)})</pre></article><article><h3 >$.getJSON</h3><pre >$.getJSON(url,function(data,status,xhr){...})⇒XMLHttpRequest$.getJSON(url,[data],function(data,status,xhr){...})⇒XMLHttpRequestv1.0+</pre><p >通过 Ajax GET请求获取JSON数据。这是一个<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" >$.ajax</a>的简写方式。</p><pre >$.getJSON('/awesome.json',function(data){console.log(data)})//fetchdatafromanotherdomainwithJSONP$.getJSON('//example.com/awesome.json?callback=?',function(remoteData){console.log(remoteData)})</pre></article><article><h3 >$.param</h3><pre >$.param(object,[shallow])⇒string$.param(array)⇒string</pre><p >序列化一个对象，在Ajax请求中提交的数据使用URL编码的查询字符串表示形式。如果shallow设置为true。嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。</p><p >如果任何对象的某个属性值是一个函数，而不是一个字符串，该函数将被调用并且返回值后才会被序列化。</p><p >此外，还接受<a href="https://www.css88.com/doc/zeptojs_api/#serializeArray" >serializeArray</a>格式的数组，其中每个项都有 “name” 和 “value”属性。</p><pre >$.param({foo:{one:1,two:2}})//=>"foo[one]=1&foo[two]=2)"$.param({ids:[1,2,3]})//=>"ids[]=1&ids[]=2&ids[]=3"$.param({ids:[1,2,3]},true)//=>"ids=1&ids=2&ids=3"$.param({foo:'bar',nested:{will:'notbeignored'}})//=>"foo=bar&nested[will]=not+be+ignored"$.param({foo:'bar',nested:{will:'beignored'}},true)//=>"foo=bar&nested=[object+Object]"$.param({id:function(){return1+2}})//=>"id=3"</pre></article><article><h3 >$.post</h3><pre >$.post(url,[data],function(data,status,xhr){...},[dataType])⇒XMLHttpRequest</pre><p >执行Ajax POST请求。这是一个<a href="https://www.css88.com/doc/zeptojs_api/#$.ajax" >$.ajax</a>的简写方式。</p><pre >$.post('/create',{sample:'payload'},function(response){//processresponse})</pre><p ><code >data</code>参数可以是一个字符串：</p><pre >$.post('/create',$('#some_form').serialize(),function(response){//...})</pre></article><article><h3 >load</h3><pre >load(url,function(data,status,xhr){...})⇒self</pre><p >通过GET Ajax载入远程 HTML 内容代码并插入至 当前的集合 中。另外，一个css选择器可以在url中指定，像这样，可以使用匹配selector选择器的HTML内容来更新集合。</p><pre >$('#some_element').load('/foo.html#bar')</pre><p >如果没有给定CSS选择器，将使用完整的返回文本。</p><p >请注意，在没有选择器的情况下，任何javascript块都会执行。如果带上选择器，匹配选择器内的script将会被删除。</p></article><hr/><h2 >表单方法</h2><article><h3 >serialize</h3><pre >serialize()⇒string</pre><p >在Ajax post请求中将用作提交的表单元素的值编译成 URL编码的 字符串。</p></article><article><h3 >serializeArray</h3><pre >serializeArray()⇒array</pre><p >将用作提交的表单元素的值编译成拥有<code >name</code>和<code >value</code>对象组成的数组。不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。</p><pre >$('form').serializeArray()//=>[{name:'size',value:'micro'},//{name:'name',value:'Zepto'}]</pre></article><article><h3 >submit</h3><pre >submit()⇒selfsubmit(function(e){...})⇒self</pre><p >为 "submit" 事件绑定一个处理函数，或者触发元素上的 "submit" 事件。当没有给定function参数时，触发当前表单“submit”事件，并且执行默认的提交表单行为，除非调用了<code >preventDefault()</code>。</p><p >当给定function参数时，在当前元素上它简单得为其在“submit”事件绑定一个处理函数。</p></article><hr/><h2 >Effects</h2><article><h3 >$.fx</h3><p >全局地动画设置：</p><ul class=" list-paddingleft-2"><li><p ><code >$.fx.off</code>(在支持css transition 的浏览器中默认为false)：设置true来禁止所有<a href="https://www.css88.com/doc/zeptojs_api/#animate" ><code >animate()</code></a>transitions。</p></li><li><p ><code >$.fx.speeds</code>：用来设置动画时间的对象。</p></li><ul class=" list-paddingleft-2"><li><p><code >_default</code>(400 ms)</p></li><li><p><code >fast</code>(200 ms)</p></li><li><p><code >slow</code>(600 ms)</p></li></ul></ul><p >改变现有值或者添加一个新属性去影响使用一个字符串来设置时间的动画。</p></article><article><h3 >animate</h3><pre >animate(properties,[duration,[easing,[function(){...}]]])⇒selfanimate(properties,{duration:msec,easing:type,complete:fn})⇒selfanimate(animationName,{...})⇒self</pre><p >对当前对象集合中元素进行css transition属性平滑过渡。</p><ul class=" list-paddingleft-2"><li><p><code >properties</code>: 一个对象，该对象包含了css动画的值，或者css帧动画的名称。</p></li><li><p><code >duration</code>(默认 400)：以毫秒为单位的时间，或者一个字符串。</p></li><ul class=" list-paddingleft-2"><li><p><code >fast</code>(200 ms)</p></li><li><p><code >slow</code>(600 ms)</p></li><li><p>任何<a href="https://www.css88.com/doc/zeptojs_api/#$.fx" ><code >$.fx.speeds</code></a>自定义属性</p></li></ul><li><p><code >easing</code>(默认<code >linear</code>)：指定动画的缓动类型，使用以下一个：</p></li><ul class=" list-paddingleft-2"><li><p><code >ease</code></p></li><li><p><code >linear</code></p></li><li><p><code >ease-in</code>/<code >ease-out</code></p></li><li><p><code >ease-in-out</code></p></li><li><p><a href="http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag" ><code >cubic-bezier(...)</code></a></p></li></ul><li><p><code >complete</code>：动画完成时的回调函数</p></li><li><p>li></p></li><code >delay</code><li><p>: 以毫秒为单位的过度延迟时间</p></li><span >v1.1+</span></ul><p >Zepto 还支持以下<a href="http://www.w3.org/TR/css3-transforms/#transform-functions" >CSS transform</a>属性：</p><ul class=" list-paddingleft-2"><li><p><code >translate(X|Y|Z|3d)</code></p></li><li><p><code >rotate(X|Y|Z|3d)</code></p></li><li><p><code >scale(X|Y|Z)</code></p></li><li><p><code >matrix(3d)</code></p></li><li><p><code >perspective</code></p></li><li><p><code >skew(X|Y)</code></p></li></ul><p >如果duration参数为<code >0</code>或<code >$.fx.off</code>为 true(在不支持css transitions的浏览器中默认为true)，动画将不被执行；替代动画效果的目标位置会即刻生效。类似的，如果指定的动画不是通过动画完成，而且动画的目标位置即可生效。这种情况下没有动画，<code >complete</code>方法也不会被调用。</p><p >如果第一个参数是字符串而不是一个对象，它将被当作一个css关键帧动画<a href="http://www.w3.org/TR/css3-animations/#animations" >CSS keyframe animation</a>的名称。</p><pre >$("#some_element").animate({opacity:0.25,left:'50px',color:'#abcdef',rotateZ:'45deg',translate3d:'0,10px,0'},500,'ease-out')</pre><p >Zepto只使用css过渡效果的动画。jquery的easings不会支持。jquery的相对变化("=+10px") syntax 也不支持。请查看<a href="http://www.w3.org/TR/css3-transitions/#animatable-properties-" >list of animatable properties</a>。浏览器的支持可能不同，所以一定要测试你所想要支持的浏览器。</p></article><hr/><h2 >Touch</h2><article><h3 >Touch events</h3><p >“touch”模块添加以下事件，可以使用<a href="https://www.css88.com/doc/zeptojs_api/#on" >on</a>和<a href="https://www.css88.com/doc/zeptojs_api/#off" >off</a>。</p><ul class=" list-paddingleft-2"><li><p><code >tap</code>—元素tap的时候触发。</p></li><li><p><code >singleTap</code>and<code >doubleTap</code>— 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用<code >tap</code>代替)。</p></li><li><p><code >longTap</code>— 当一个元素被按住超过750ms触发。</p></li><li><p><code >swipe</code>,<code >swipeLeft</code>,<code >swipeRight</code>,<code >swipeUp</code>,<code >swipeDown</code>— 当元素被划过时触发。(可选择给定的方向)</p></li></ul><p >这些事件也是所有Zepto对象集合上的快捷方法。</p><pre ><style>.delete{display:none;}</style><ulid=items><li>Listitem1<spanclass=delete>DELETE</span></li><li>Listitem2<spanclass=delete>DELETE</span></li></ul><script>//showdeletebuttonsonswipe$('#itemsli').swipe(function(){$('.delete').hide()$('.delete',this).show()})//deleterowontappingdeletebutton$('.delete').tap(function(){$(this).parent('li').remove()})</script></pre></article></section></p>