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!‘)
})