移動端：zepto框架

時間  2019-11-10
標籤 移動 zepto 框架 欄目 無線 简体版
原文   原文鏈接

zepto框架

1、zepto框架概述

  1. Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript
  2. 庫兼容性：
    • Zepto.js是專門爲現代智能手機瀏覽器推出的JavaScript框架
    • Zepto的一些可選功能專門針對移動瀏覽器，由於最初的目標是專門爲移動網站提供一個精簡的jQuery替代方案
  3. 優點：
    • 更小型的JavaScript框架
    • 徹底兼容jQuery語法
    • 精簡大量瀏覽器兼容性代碼，更輕量
    • 封裝了移動端手勢
  4. 下載：
    • www.zeptojs.cn 網站上經過點擊Download打開下載頁面
    • 下載的zepto文件只要包括core、Ajax、Event、Form、IE這些模塊。其中並無包括Effects和Touch模塊。因此後續在使用zepto的這些功能的時候還須要添加相關的插件或從新下載完整版的zepto
  5. 引入：
    • <body>     <script src=zepto.min.js></script>     </body>
  6. CDN加速服務：http://cdn.uedsc.com/zepto/ 【CDN內容分發網絡】

2、 zepto和jQuery的區別

  1. 針對移動端程序，Zepto有一些基本的觸摸事件能夠用來作觸摸屏交互，Zepto是不支持IE瀏覽器的
  2. Dom操做的區別：添加id時jQuery不會生效而Zepto會生效
  3. 事件觸發的區別：使用jQuery時load事件的處理函數不會執行；使用Zepto時load事件的處理函數會執行
  4. 事件委託的區別：zepto中，選擇器上全部的委託事件都依次放入到一個隊列中，而在jquery中則委託成獨立的多個事件
  5. width()和height()的區別
    • Zepto由盒模型(box-sizing)決定，用.width()返回賦值的width，用.css('width')返回包含border等的結果
    • jQuery會忽略盒模型，始終返回內容區域的寬/高(不包含padding、border)
  6. offset()的區別
    • Zepto返回{top,left,width,height}
    • jQuery返回{width,height}
    • Zepto沒法獲取隱藏元素寬高，jQuery 能夠
  7. Zepto中沒有爲原型定義extend方法而jQuery有
  8. Zepto的each方法只能遍歷數組，不能遍歷JSON對象

3、 zepto和jQuery相同方法或屬性

  • $(selector, [context])
    • $(<Zepto collection>)
    • $(<DOM nodes>)
    • $(htmlString)
    • $(htmlString, attributes)
    • Zepto(function($){ ... })

4、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：當元素被劃過期觸發

5、 完整Zepto文件

  • 經過www.zeptojs.cn網站下載的默認核心文件Zepto在這裏就不能使用，爲何？
  • 默認的zepto文件不包括Effects和Touch模塊

6、項目案例

  1. 滑動解鎖
  2. 首頁界面設計
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程