Zepto.js

zepto

Zepto 是移动端开发框架，是 jQuery 的轻量级代替品；API 及语句同 jQuery 相似，但文件更小(可压缩至 8KB)。是目前功能完备的库中最小的一个。随着移动端的愈加火爆，目前很多 HTML5 的框架都在支持移动方向，Zepto 就是 jQuery 的移动端版本, 可以看做是一个轻量级的jQuery。*如果你会用jQuery，那么你也会用Zepto*， Zepto的设计目的是提供 jQuery的类似的 API，但并不是 100%覆盖 jQuery 。Zepto 有一个 5-10k 的通用库、下载并快速执行、有一个熟悉通用的 API，所以你能把你主要的精力放到应用开发上。

Zepto.js 中文文档：https://zeptojs.bootcss.com/

、Zepto.js 介绍

1）Zepto.js 特点

1、针对的是移动端

2、轻量级，压缩版本只有 9.6KB

3、语法大部分同 jQuery 一样，学习成本低，上手快

2）jQuery 和 Zepto 的区别在哪里

1、jQuery 更多是在 PC 端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js 则是直接抛弃了低级浏览器的适配问题，显得很轻盈；

2、Zepto.js 在移动端被运用的更加广泛；

3、jQuery 的底层是通过 DOM 来实现效果的，Zepto.js 是用 css3 来实现的；

4、Zepto.js 可以说是轻量级版本的 jQuery

2、zepto模块

为了保持原码的精简，Zepto 默认只加载一些模块，当你需要某些模块时，可以把对应的模块加载进来。

3、zepto的使用

<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/fx.js"></script>
<script>
    $('#box').on('tap', function () {
        console.log('哥们，点我了');

        $(this).animate({
            width: 300,
            height: 300,
            background: 'yellow'
        }, 3000, function () {
            console.log('哥们，我运动完成了');
        })
    });

</script>

4、zepto的特点

1、获取元素宽高

var box = $('#box');

// Zepto 的 width()、height()是根据盒模型决定的，包含 padding 和 border 的值。而jq仅仅返回元还给的宽高
// Zepto 中没有 innerWidth()和 outerWidth()系列

console.log(box.width()); // jq 100   zepto 122
console.log(box.height()); // jq 100   zepto 122

console.log(box.innerWidth()); // jq 120
console.log(box.outerWidth()); // jq 122

2、offset

var box3 = $('.box3');

// jq: {top: 108, left: 88}
// zepto: {left: 88, top: 108, width: 199, height: 100}

// jq的offset只返回元素的位置
// zepto的offset队了返回元素的位置，还返回元素的宽高，但是宽高包含padding+border
console.log(box3.offset());

// 同jq中的position，返回元素离它最近的有定位属性的父级的距离
console.log(box3.position());

3、touch事件

原生事件

touchcancel (事件被打断)

touchend (触摸结束)

touchmove (触摸中)

touchstart (触摸开始)

以下均为zepto模拟出来的移动端事件

var box = $('#box');

// 点击
box.on('tap', function () {
    console.log('tap');
})

// singleTap 和 doubleTap 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)
// 单击
box.on('singleTap', function () {
    console.log('singleTap');
})

// 双击
box.on('doubleTap', function () {
    console.log('doubleTap');
})

// 长按： 当一个元素被按住超过 750ms 触发
box.on('longTap', function (ev) {
    console.log('longTap');
});

// 滑动 ： 当元素被划过(同一个方向滑动距离大于 30px)时触发
box.on('swipe', function () {
    console.log('swipe');
});

box.on('swipeLeft', function () {
    console.log('swipeLeft');
});

box.on('swipeUp', function () {
    console.log('swipeUp');
});

box.on('swipeRight', function () {
    console.log('swipeRight');
});

box.on('swipeDown', function () {
    console.log('swipeDown');
});