码迷,mamicode.com
首页 > 移动开发 > 详细

移动端:zepto框架

时间:2019-03-01 09:20:01      阅读:2683      评论:0      收藏:0      [点我收藏+]

标签:rip   some   概述   盒模型   click   案例   项目案例   info   下载   

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相同方法或属性

  • $(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模块

六、项目案例

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

 

移动端:zepto框架

标签:rip   some   概述   盒模型   click   案例   项目案例   info   下载   

原文地址:https://www.cnblogs.com/guisenbin/p/10454414.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!