zepto.js

2018-11-28 本文已影响0人亨锅锅

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

什么是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，所以你能把你主要的精力放到应用开发上。

jQuery和Zepto的区别在哪里？

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

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

    <!--引入核心模块；包含许多jQuery中常见方法-->
    <script src="js/zepto.js"></script>
    <!--引入zepto事件模块, 包含了常见的事件方法on/off/click ...-->
    <script src="js/event.js"></script>
    <!--引入zepto高级选择器模块, 包含了jQuery中的高级选择器-->
    <script src="js/selector.js"></script>

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

动画模块

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

<!--引入zepto动画模块,-->
<script src="js/fx.js"></script>
<script>
    $(function () {
        $("button").click(function () {
            $("div").animate({marginLeft: "500px"}, 10000);
        });
    });
</script>

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

<!--引入zepto动画模块的常用方法-->
<script src="js/fx_methods.js"></script>

<script>
    $(function () {
        $("button").click(function () {
            // $("div").hide(1000);
            // $("div").show(1000);
            $("div").toggle(1000);
        });
    });
</script>

点击事件

无论是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

<!--引入zepto的移动端事件模块-->
<script src="js/touch.js"></script>

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

swipe事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zepto-swipe事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 100px;
            top: 100px;
            background: red;
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>

</head>
<body>
<div></div>

<script>
    /*
    swipe: 事件是指手指在元素上滑动
     */
    // $("div").swipe(function () {
    //     console.log("滑动事件");
    // });
    $("div").swipeLeft(function () {
        // console.log("左滑动");
        $(this).animate({left: "0px"}, 1000);
    });
    $("div").swipeRight(function () {
        // console.log("右滑动");
        $(this).animate({left: "100px"}, 1000);
    });
    $("div").swipeUp(function () {
        // console.log("上滑动");
        $(this).animate({top: "0px"}, 1000);
    });
    $("div").swipeDown(function () {
        // console.log("下滑动");
        $(this).animate({top: "100px"}, 1000);
    });
</script>
</body>
</html>

移动端默认事件

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

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

zepto.js

猜你喜欢

热点阅读