Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。
文档声明:
Zepto.js (1.1.6)文档请移步http://www.html.cn/doc/zeptojs-1.1.6_api/;
Zepto.js (1.1.2)文档请移步http://www.html.cn/doc/zeptojs-1.1.2_api/;
Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上。
Zepto 是一款开源软件,它可以被开发者和商业发布。 MIT license.
浏览器支持
初级 (100% 支持)
Safari 6+ (Mac)
Chrome 30+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
Firefox 24+ (Windows, Mac, Android, Linux, Firefox OS)
iOS 5+ Safari
Android 2.3+ Browser
Internet Explorer 10+ (Windows, Windows Phone)
次要目标(完全或大部分支持)
iOS 3+ Safari
Chrome <30
Firefox 4+
Safari <6
Android Browser 2.2
Opera 10+
webOS 1.4.5+ Browser
BlackBerry Tablet OS 1.0.7+ Browser
Amazon Silk 1.0+
Other WebKit-based browsers/runtimes
需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的;因为它的最初目标在移动端提供一个精简的类似jquery的js库。
在浏览器上(Safari、Chrome和Firefox)上开发页面应用或者构建基于html的web-view本地应用,你如PhoneGap,使用Zepto是一个不错的选择。
总之,Zepto希望在所有的现代浏览器中作为一种基础环境来使用。Zepto不支持旧版本的Internet Explorer浏览器(<10)。
手动建立Zepto
zepto.js和zepto.min.js提供以上使用方式。 然而,为了更好的程序效果和自由性,可以在使用Zepto源码构建Zepto.js和zepto.min.js的时候选择模块并作测试, 使用UglifyJS根据你的需要来生成(当服务端开启gzipped后,最精简的代码)代码。
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.
创建插件
可以通过添加方法作为 $.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)
核心方法
$()
$(selector, [context]) ⇒ collection
$(<Zepto collection>) ⇒ same collection
$(<DOM nodes>) ⇒ collection
$(htmlString) ⇒ collection
$(htmlString, attributes) ⇒ collection v1.0+
Zepto(function($){ ... })
通过执行css选择器,包装dom节点,或者通过一个html字符串创建多个元素 来创建一个Zepto集合对象。
Zepto集合是一个类似数组的对象,它具有链式方法来操作它指向的DOM节点,除了 ( Z e p t o ) 对 象 上 的 直 接 方 法 外 ( 如 ( Zepto)对象上的直接方法外(如 (Zepto)对象上的直接方法外(如.extend),文档对象中的所有方法都是集合方法。
如果选择器中存在content参数(css选择器,dom,或者Zepto集合对象),那么只在所给的节点背景下进行css选择器;这个功能和使用$(context).find(selector)是一样的。
当给定一个html字符串片段来创建一个dom节点时。也可以通过给定一组属性映射来创建节点。最快的创建但元素,使用
当一个函数附加在 DOMContentLoaded 事件的处理流程中。如果页面已经加载完毕,这个方法将会立即被执行。
$('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!')
})
我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com