zepto

为何使用zepto

    zepto主要适用于移动端，所以不用考虑低端浏览器的兼容性问题，因此相较于jQuery有很大的优势。
zepto分为很多模块，要使用哪个模块就需要导入哪个模块。

(https://www.css88.com//doc//zeptojs_api//)

zepto选择器

    zepto选择器与jQuery类似，但是如果要使用高级选择器就需要导入zepto中的selector模块。

<script src="js/selector.js"></script>
<script>
    $("button").click(function() {
        $("div:first").css({
            backgroundColor: "red"
        });
    })
</script>
zepto动画

    在zepto中使用ainimate，需要导入fx.js；使用hidden(),show(),toggle()等方法时，需要导入fx_methods.js。

<script src="js/fx_methods.js"></script>
<script src="js/fx.js"></script>
<script>
    $("button").click(function() {
        $("div").animate({
            marginLeft: 500
        }, 2000)

        // $("div").hide(2000);
        // $("div").show(2000);
        // $("div").toggle(2000);
    })
</script>
zepto tap事件

    移动端中一般很少使用click来监听事件。在移动端中有很多(单击，双击，拖拽，捏合等)事件，所以click在移动端中至少要花100-300毫秒来判断到底是什么事件。而移动端用对性能要求很高，事件响应自然也是越快越好，因此我们在移动端中通常使用tap事件。

    tap事件不是原生的js事件，而是zepto自己封装的事件，解决了click判断事件需要100-300毫秒的问题。(只适用于移动端)

<script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script>
        $("div").tap(function() {
            console.log("被点击了");
        })
    </script>

tap是zepto自己封装的方法，但是也是用原生js实现的。原生js中新增了几个只适用于移动端的事件

  • touchstart：手指按下
  • touchmove：手指移动
  • touchend：手指抬起

移动端touch事件对象中比较重要的三个子对象

  • touches: 当前屏幕上所有手指的列表
  • targetTouches: 保存了元素上所有的手指里列表
  • changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指
利用zepto做一个移动div小练习

下面代码有bug，在下一点击时加上上一次的偏移量就可解决，懒得改了。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 150px auto;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        let startX = 0;
        let startY = 0;
        let more = false;
        let oDiv = document.querySelector("div");
        oDiv.ontouchstart = function(e) {
            // console.log("移动了");
            if (more) {
                return
            }
            startX = e.targetTouches[0].clientX;
            startY = e.targetTouches[0].clientY;
            // console.log(startX, startY);
        }
        oDiv.ontouchmove = function(e) {
            let moveX = e.targetTouches[0].clientX - startX;
            let moveY = e.targetTouches[0].clientY - startY;
            console.log(moveX, moveY);
            oDiv.style.transform = `translate(${moveX}px, ${moveY}px)`;
        }
    </script>
</body>

</html>
posted @ 2021-03-26 13:48  紫槐  阅读(173)  评论(0)    收藏  举报