Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库, 它与jquery 有着类似的api。 如果你会用 jquery,那么你也会用 zepto。
Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上。
使用
用一个script标签引入Zepto到你的页面的底部:
... </body> <script src=zepto.min.js></script> </html>
如果你需要兼容ie浏览器,你可以用回jquery。 需要注意ie10以后不再支持条件注释(为了提高与HTML5 的可互操作性和兼容性,Internet Explorer 10 标准模式和Quirks 模式中删除了对条件注释的支持),因此,我们建议以下的document.write
方法:
<script> document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>') </script>
目标平台
桌面浏览器
- Safari 5+ (Mac, Win)
- Chrome 5+ (Win, Mac, Linux, Chrome OS)
- Mozilla Firefox 4+ (Win, Mac, Linux)
- Opera 10+ (Win, Mac, Linux)
移动端浏览器
- iOS 4+ Safari
- Chrome for Android
- Chrome for iOS
- Android 2.2+ Browser
- webOS 1.4.5+ Browser
- BlackBerry Tablet OS 1.0.7+ Browser
- Amazon Silk 1.0+
- Firefox for Android
- Firefox OS Browser
- Practically any WebKit-based browsers/runtimes
需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的;因为它的最初目标在移动端提供一个精简的类似jquery的js库。
在浏览器上(Safari和Chrome)上开发页面应用或者使用PhoneGap构建基于html的web-view本地应用,使用Zepto是一个不错的选择。
总之,除了ie浏览器外,Zepto希望在所有的现代浏览器中作为一种基础环境来使用。
手动建立Zepto
zepto.js
和zepto.min.js
提供以上使用方式。 然而,为了更好的程序效果和自由性,可以在使用Zepto源码构建Zepto.js和zepto.min.js的时候选择模块并作测试, 使用UglifyJS根据你的需要来生成(当服务端开启gzipped后,最精简的代码)代码。
创建插件
可以通过添加方法作为$.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)
核心方法
- $()
- $.camelCase
- $.contains
- $.each
- $.extend
- $.fn
- $.grep
- $.inArray
- $.isArray
- $.isFunction
- $.isPlainObject
- $.isWindow
- $.map
- $.parseJSON
- $.trim
- $.type
- add
- addClass
- after
- append
- appendTo
- attr
- before
- children
- clone
- closest
- concat
- contents
- css
- data
- each
- empty
- eq
- filter
- find
- first
- forEach
- get
- has
- hasClass
- height
- hide
- html
- index
- indexOf
- insertAfter
- insertBefore
- is
- last
- map
- next
- not
- offset
- offsetParent
- parent
- parents
- pluck
- position
- prepend
- prependTo
- prev
- prop
- push
- ready
- reduce
- remove
- removeAttr
- removeClass
- replaceWith
- scrollLeft
- scrollTop
- show
- siblings
- size
- slice
- text
- toggle
- toggleClass
- unwrap
- val
- width
- wrap
- wrapAll
- wrapInner
- $.Event
- $.proxy
- bind
- delegate
- die
- event.isDefaultPrevented
- event.isImmediatePropagationStopped
- event.isPropagationStopped
- live
- off
- on
- one
- trigger
- triggerHandler
- unbind
- undelegate
英文文档:http://zeptojs.com
中文文档:http://www.bootcss.com/p/zeptojs/
-END-