从零开始 Zepto

概述

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，和jQuery类似。
jQuery更多是在PC端被应用，Zepto 更多是在移动端被应用；Zepto 体积更小
Zepto专门用于移动端的轻量级的 jQuery

官方网址:

英文版
中文版

特点

Zepto 采用了模块化的开发, 将不同的功能放到了不同的模块中,在使用的过程中按需导入。

选择器

要实现高级选择器需引入selector，实验性的支持 jQuery CSS 表达式实用功能，比如 $('div:first')和 `el.is(’:visible’)。

事件

要想监听事件，需引入event，通过on()& off()处理事件。

动画

Zepto通过CSS3来实现动画

需要实现动画，需引入fx，执行The animate()方法。

需要以动画形式的 show, hide, toggle, 和 fade*()方法，引入fx。

touch

企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听，而会使用tap事件。 tap事件是Zepto自己封装的一个事件, 解决了原生click事件100~300毫秒的延迟问题。

tap

// 务必引入 touch 模块，方可使用 tap
$('button').tap(function () {console.log('clcked button')
})

touch事件传递参数对象

touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指里列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

移动端"点透问题"

当一个元素放覆盖了另一个元素，覆盖的元素监听touch事件,而下面的元素监听click事件，并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。

解决方案是阻止事件扩散：

在touch事件中添加event.preverDefault() 来阻止事件扩散
使用Zepto新版本。
使用Fastclick插件。

swipe

监听滑动事件

四个方向滑动

$("div").swipeLeft(function () {// console.log("向左边轻扫");
});
$("div").swipeRight(function () {// console.log("向右边轻扫");});
$("div").swipeUp(function () {// console.log("向上边轻扫");
});
$("div").swipeDown(function () {// console.log("向下边轻扫");
});

Zepto的基础使用相关推荐

【干货】前端工程与性能优化
视频汇总首页:http://edu.51cto.com/lecturer/index/user_id-4626073.html 作为开发,不仅仅是前端,优化总是你绕不开的事,我们的目标就是要产品变得更 ...
zepto 和jquery_初学者基础：粘性导航，灵活的视频和Zepto
zepto 和jquery 在我们对Zurb Foundation的检查的这一部分中,我们将讨论创建粘性导航的Magellan . 我们将研究可见性类,从右到左的支持,击键,缩略图,灵活的视频以及ze ...
zepto打造一款移动端划屏插件
效果图样式1 样式2 调用正常情况下应该是后台生成的html代码,但还是写了一套操作tab页的方法调用简便如下: <link rel="stylesheet" href ...
零基础的前端开发初学者应如何系统地学习？
网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑.其核心价值在于对用户体验的追求.可以按如下思路学习系统学习: 基础知识: html + css 这部分建 ...
前端基础面试题大全-极乐科技（一）-JS部分
2019独角兽企业重金招聘Python工程师标准>>> #JS部分 ###1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined. ...
黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
zepto的ajax使用,Ajax的实现及使用-zepto
正文之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于 ...
[转载] 使用backbone.js、zepto.js和trigger.io开发HTML5 App
来源:http://mobile.51cto.com/web-343388.htm ---------------------------------------------------------- ...
linux 如何打包分区文件,Linux基础------文件打包解包---tar命令，文件压缩解压---命令gzip，vim编辑器创建和编辑正文件，磁盘分区/格式化，软/硬链接...
作业一: 1)将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group > /1.txt 2)将用户信息数据库文件和用户 ...

Zepto的基础使用

从零开始 Zepto

概述

特点

选择器

事件

动画

touch

tap

touch事件传递参数对象

移动端"点透问题"

swipe

swipe

四个方向滑动

Zepto的基础使用相关推荐

最新文章

热门文章