Zepto的基础使用

从零开始 Zepto

概述

1. Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，和jQuery类似。

2. jQuery更多是在PC端被应用，Zepto 更多是在移动端被应用；Zepto 体积更小

3. 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事件触发后覆盖的元素就消失了, 那么就会出现点透问题。

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

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

swipe

swipe

监听滑动事件

四个方向滑动

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