zepto.js

https://zeptojs.com/
https://github.com/madrobby/zepto
http://www.wenshuai.cn/Manual/Zepto/
https://www.css88.com/doc/zeptojs_api/

1. 什么是jQuery和Zepto.js?
   Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery

• 1.1 随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native Weex等等。
• 1.2 Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zepto。
• 1.3 Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

2. jQuery和Zepto的区别在哪里？

• 2.1jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；
• 2.2Zepto.js在移动端被运用的更加广泛；
• 2.3jQuery的底层是通过DOM来实现效果的， zepto.js 是用css3 来实现的；
• 2.4Zepto.js可以说是轻量级版本的jQuery。

3. zepto框架是一个模块化的框架, 将不同的功能封装到了不同的模块中
   这样做的好处也是为了瘦身, 让我们使用起来更加轻量级

• 如果是从github下载的代码, 那么必须一个一个的引入
• 如果是从官网链接下载的代码, 就已经包含了官网所述的默认模块了

4. 动画模块

• 动画模块需要先引入fx.js

• 但是需要支持其他常用方法时，需要引入fx_methods.js

5. 点击事件

• 无论是PC端还是移动端都支持click的事件，而且不仅仅是jQuery和zepto支持，原生JS的也支持。

$("div").click(function () {
    console.log("被点击了");
});

var oDiv = document.querySelector("div");
oDiv.onclick = function () {
     console.log("被点击了");
}  

• 但是在企业开发中, 如果是要在移动端监听点击事件,一般情况下不会使用onclick事件来监听
• 因为移动端支持的手势比较多(点击/双击/拖拽/捏合/轻扫....), 所以移动端在监听click事件的时候会有100~300ms的延迟(系统需要等待判断是否是双击...等)
• 在移动端的网页中几乎不会用到双击, 而且移动端对响应的速度要求也很高
• 在移动端如果需要监听单击事件, 那么请使用tap事件
• tap事件是zepto自己封装的, 不是系统自带的，需要引入touch.js

$("div").tap(function () {
     console.log("被点击了");
});

6. swipe事件

• 事件是指手指在元素上滑动

7. 移动端默认事件

• 例子：在移动端，左右滑动的时候就是有默认的事件的，比如切屏等。。。

        *{
            margin: 0;
            padding: 0;
            /*
            默认情况下移动端的元素就支持某些事件
            但是在企业开发中, 一般情况下我们都是需要使用自己的事件,
            而不是系统自带的事件
            如果不清除系统自带的事件,
            那么就有可能会导致我们添加的事件和系统添加的事件冲突
            */
            touch-action: none;
        }