移动端:zepto框架

时间:2019-03-01 09:20:01   收藏:0   阅读:2683

zepto框架


一、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内容分发网络】

二、 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对象

三、 zepto和jQuery相同方法或属性

技术图片

四、zepto独有特效

五、 完整Zepto文件

六、项目案例

  1. 滑动解锁
  2. 首页界面设计

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!