一、概述
Zepto.js是一個輕量的js庫,它與jQuery有類似的API。
zepto的設計目的是不到10K的通用庫,快速下載,有一個熟悉的api-->精力專注在開發上。
流行起來的原因:輕量;只支持現代瀏覽器;非常方便的搭配其他框架(phoneGap)來編寫代碼;優秀的源代碼,性能良好。
zepto和jQuery的對比:
瀏覽器兼容:zepto偏移動端,jQuery偏PC端;
文件大小:zepto 10k jQuery 30k ;
部分API接口:參數和執行結果有可能不一致;
生態圈:jQuery更好;
核心庫:zepto核心庫的性能要比jQuery優秀;
相關學習網站:http://zeptojs.com/;https://github.com/madrobby/zepto;http://github.e-sites.nl/zeptobuilder/
二、搭建環境與使用
1、搭建環境
1.1 命令行(CLI commandLine)
npm install
npm run-script dist
# do a custom build
MODULES="zepto event data" npm run-script dist
# on Windows
c:\zepto> SET MODULES=zepto event data
c:\zepto> npm run-script dist
The resulting files are:
dist/zepto.js
dist/zepto.min.js
1.2 壓縮包
可以直接去官網下載(自定義構建其他模塊的--》(http://github.e-sites.nl/zeptobuilder/) builder)
2、 zepto模塊
默認:核心模塊、event、ajax、form、ie
選擇符的支持:
標簽、id、屬性、class、父子選擇符、后代選擇符
節點進行增刪改查
插入: insertAfter insertBefore append appendTo prepend prependTo
刪除: remove
改: html('') css addClass removeClass toggleClass...
查: next prev children parent parents find
3、event
4、Ajax
$.Ajax({})
$.get();
$.post();
$('h1').load()
5、Touch
//swipeLeft swipeRight swipeUp swipeDown
//doubleTap tap longTap