zepto框架
一、zepto框架概述
- Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript
- 庫兼容性：
-
Zepto.js是專門為現代智能手機瀏覽器推出的JavaScript框架
- Zepto的一些可選功能專門針對移動瀏覽器，因為最初的目標是專門為移動網站提供一個精簡的jQuery替代方案
- 優勢：
- 更小型的JavaScript框架
- 完全兼容jQuery語法
- 精簡大量瀏覽器兼容性代碼，更輕量
-
封裝了移動端手勢
- 下載：
-
www.zeptojs.cn 網站上通過點擊Download打開下載頁面
-
下載的zepto文件只要包括core、Ajax、Event、Form、IE這些模塊。其中並沒有包括Effects和Touch模塊。所以后續在使用zepto的這些功能的時候還需要添加相關的插件或重新下載完整版的zepto
- 引入：
- <body> <script src=zepto.min.js></script> </body>
-
CDN加速服務：http://cdn.uedsc.com/zepto/ 【CDN內容分發網絡】
二、 zepto和jQuery的區別
-
針對移動端程序，Zepto有一些基本的觸摸事件可以用來做觸摸屏交互，Zepto是不支持IE瀏覽器的
-
Dom操作的區別：添加id時jQuery不會生效而Zepto會生效
-
事件觸發的區別：使用jQuery時load事件的處理函數不會執行；使用Zepto時load事件的處理函數會執行
- 事件委托的區別：zepto中，選擇器上所有的委托事件都依次放入到一個隊列中，而在jquery中則委托成獨立的多個事件
-
width()和height()的區別
-
Zepto由盒模型(box-sizing)決定，用.width()返回賦值的width，用.css('width')返回包含border等的結果
-
jQuery會忽略盒模型，始終返回內容區域的寬/高(不包含padding、border)
-
offset()的區別
-
Zepto返回{top,left,width,height}
-
jQuery返回{width,height}
- Zepto無法獲取隱藏元素寬高，jQuery 可以
-
Zepto中沒有為原型定義extend方法而jQuery有
-
Zepto的each方法只能遍歷數組，不能遍歷JSON對象
三、 zepto和jQuery相同方法或屬性
- $(selector, [context])
- $(<Zepto collection>)
- $(<DOM nodes>)
-
$(htmlString)
-
$(htmlString, attributes)
-
Zepto(function($){ ... })
四、zepto獨有特效
- CSS transform
- translate(X|Y|Z|3d)
- rotate(X|Y|Z|3d)
- scale(X|Y|Z)
- skew(X|Y)
-
tap事件類似PC端上的click事件,它表示手指觸摸某個元素會被觸發
- Touch
- tap ：元素被觸摸的時候觸發
- singleTap and doubleTap：這一對事件可以用來檢測元素上的單擊和雙擊
-
longTap：當一個元素被按住超過750ms觸發
-
swipe、swipeLeft、swipeRight、swipeUp、swipeDown：當元素被划過時觸發
五、 完整Zepto文件
-
通過www.zeptojs.cn網站下載的默認核心文件Zepto在這里就不能使用，為什么？
-
默認的zepto文件不包括Effects和Touch模塊
-
通過訪問github地址：https://github.com/madrobby/zepto下載到所需要的完整zepto文件
六、項目案例
- 滑動解鎖
- 鎖屏時間更新
- 時間使用插件完成：http://momentjs.cn/
- 定時器
- 調用鎖屏插件
- 插件使用
-
patternLock.js
- md5.js
- 首頁界面設計
-
font-awesome字體圖標 http://www.fontawesome.com.cn/faicons/