Zepto.js入门介绍

GitHub Zepto

Zepto的一些可选功能是专门针对移动端浏览器的；因为它的最初目标在移动端提供一个精简的类似jquery的js库。

• Zepto不支持旧版本的Internet Explorer浏览器(<10)。
• 不支持jQuery CSS 扩展 > 然而，可选的“selector”模块有限提供了支持几个最常用的伪选择器，而且可以被丢弃，与现有的代码或插件的兼容执行。
• 如果$变量尚未定义，Zepto只设置了全局变量$指向它本身。 > 允许您同时使用的Zepto和有用的遗留代码，例如，prototype.js。只要首先加载Prototype，Zepto将不会覆盖Prototype的 $ 函数。Zepto将始终设置全局变量Zepto指向它本身。

Zepto 模块

module default description zepto ✔ 核心模块；包含许多方法 event ✔ 通过on()& off()处理事件 ajax ✔ XMLHttpRequest 和 JSONP 实用功能 form ✔ 序列化 & 提交web表单 ie ✔ 增加支持桌面的Internet Explorer 10+和Windows Phone 8。 detect 提供 $.os和 $.browser消息 fx The animate()方法 fx_methods 以动画形式的 show, hide, toggle, 和 fade*()方法. assets 实验性支持从DOM中移除image元素后清理iOS的内存。 data 一个全面的 data()方法, 能够在内存中存储任意对象。 deferred 提供 $.Deferredpromises API. 依赖"callbacks" 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。 callbacks 为"deferred"模块提供 $.Callbacks。 selector 实验性的支持 jQuery CSS 表达式 实用功能，比如 $('div:first')和 el.is(':visible')。 touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。 gesture 在触摸设备上触发 pinch 手势事件。 stack 提供 andSelf& end()链式调用方法 ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.

用一个script标签引入Zepto到你的页面的底部：

...
<script src="./lib/src/zepto.js"></script>
</body>
</html>

创建插件

可以通过添加方法作为 $.fn 的属性来写插件：

;(function($){
  $.extend($.fn, {
    foo: function(){
      // `this` refers to the current Zepto collection.
      // When possible, return the Zepto collection to allow chaining.
      return this.html('bar')
    }
  })
})(Zepto)

demo

$('div')  //=> 所有页面中得div元素
$('#foo') //=> ID 为 "foo" 的元素

// 创建元素:
$("<p>Hello</p>") //=> 新的p元素
// 创建带有属性的元素:
$("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })
//=> <p id=greeting style="color:darkblue">Hello</p>

// 当页面ready的时候，执行回调:
Zepto(function($){
  alert('Ready to Zepto!')
})