Zepto-基础

最新推荐文章于 2021-09-28 20:56:56 发布

小蚂蚁有力量

最新推荐文章于 2021-09-28 20:56:56 发布

阅读量498

点赞数

一、1. Zepto是什么?

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto;
既然和jQuery差不多, 为什么还需要Zepto?
2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；
也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大；
也正是因为Zepto用在移动端, 所以Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小；
2.2综上所述: Zepto其实就是专门用于移动端的轻量级的jQuery;
官方网址:
英文版：http://zeptojs.com/
中文版：http://www.css88.com/doc/zeptojs_api/
找到github下载按钮，进入页面下载后，在下列地址中找到zepto.js，导入HTML文件中；
路径： \zepto-master\zepto-master\src
Zepto的特点
Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中, 在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块；
Zepto注意点
如果是从官方网站下载的, 那么已经包含了默认的一些模块；
如果是从github下载的, 那么需要我们自己手动导入每一个模块；
当然后续学习了NodeJS后, 我们也可以自己定制；

例：点击按钮改变背景颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-zepto初体验</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
    <!--<script src="js/jquery-3.1.1.js"></script>-->
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>  // 在对应下载文件中有这个文件
</head>
<body>
<button>我是按钮</button>
<div></div>
<script>
$("button").click(function () {
        $("div").css({backgroundColor: "red"});
    });
</script>
</body>

二、zepto选择器

Zepto选择器：
Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能；
如果想使用高级的选择器必须还要引入高级选择器模块；

三、zepto动画

1.zepto动画：
Zepto是模块化开发的, zepto.js核心模块中只包含了基础功能，如果想使用动画必须引入动画模块；

2.zepto动画注意点：
由于zepto是一个轻量级的针对现代高级浏览器的 JavaScript库
不需要兼容低级浏览器, 所以zepto中的动画是通过CSS3属性来实现动画的
而jQuery中是通过DOM来实现动画的

<head>
    <meta charset="UTF-8">
    <title>03-zepto动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*display: none;*/
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/fx.js"></script>   //  含有动画模块
    <script src="js/fx_methods.js"></script> // 以动画形式的 show, hide, toggle, 和 fade*()方法.
    <!--<script src="js/jquery-3.1.1.js"></script>-->

</head>
<body>

<button>我是按钮</button>
<div></div>
<script>

  $("button").click(function () {
        // $("div").animate({marginLeft: 500}, 2000);
        // $("div").hide(2000);
        // $("div").show(2000);
        $("div").toggle(2000);  // 显示与隐藏的切换
    });
</script>
</body>

四、Zepto-tap事件

1.无论PC端还是移动端都支持click事件，而且不仅仅是jQuery和Zepto支持, 原生的JS也支持；

2.移动端click事件注意点：
在企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听，因为移动端的事件很多(单击/双击/轻扫/捏合/拖拽等等)；
所以如果通过click来监听,系统需要花费100~300毫秒判断到底是什么事件，而移动端对事件的响应速度要求很高, 事件响应越快用户体验就越好，所以如果需要在移动端监听点击事件, 那么请使用tap事件；

3.tap事件
tap事件是Zepto自己封装的一个事件, 解决了原生click事件100~300毫秒的延迟问题

<head>
    <meta charset="UTF-8">
<!--在移动端中，需要导入到文件   快捷键：meta：vp-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
        }
    </style>
    <!--<script src="js/jquery-3.1.1.js"></script>-->
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>  // 导入touch 文件


</head>

<body>
<div></div>
<script>
$("div").tap(function () {
        console.log("被点击了");
    });
</script>
</body>

五、移动端Touch事件

1.Zepto是如何实现tap事件的?
虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的
在原生的JS中专门为移动端新增了几个事件
touchstart: 手指按下
touchmove: 手指在元素上移动
touchend : 手指抬起

2.注意点:
这几个事件只支持移动端, 不支持PC端

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-移动端Touch事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
<script>

let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function () {
        console.log("手指按下");
    }
    oDiv.ontouchend = function () {
        console.log("手指抬起");
    }
    oDiv.ontouchmove = function () {
        console.log("手指移动");
    }
</script>
</body>

六、移动端Touch事件对象

1.Touch事件对象
移动端的touch事件也是一个事件, 所以被触发的时候系统也会自动传递一个事件对象给我们

2.移动端touch事件对象中比较重要的三个子对象
touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指里列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

touches和targetTouches
如果都是将手指按到了同一个元素上, 那么这两个对象中保存的内容是一样的；
如果是将手指按到了不同的元素上, 那么这个两个对象中保存的内容不一样；
touches保存的是所有元素中的手指, 而targetTouches保存的是当前元素中的手指；

changedTouches
在ontouchstart中保存的是刚刚新增的手指；
在ontouchend中保存的是刚刚离开的手指；

let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
        console.log("按下", event.changedTouches);
    }
    oDiv1.ontouchend = function (event) {
        console.log("抬起", event.changedTouches);
    }

七、移动端Touch事件位置

手指的位置
1.screenX/screenY是相对于屏幕左上角的偏移位
2.clientX/clientY是相对于可视区域左上角的偏移位
3.pageX/pageY是相对于内容左上角的偏移位

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-移动端手指位置练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
<script>
    /*需求: 通过手指拖拽div*/
    let oDiv = document.querySelector("div");
    let startX = 0;
    let startY = 0;
    let flag = false;
    oDiv.ontouchstart = function (event) {
        if(flag){return}
        flag = true;
        startX = event.targetTouches[0].clientX;
        startY = event.targetTouches[0].clientY;
    }
    oDiv.ontouchmove = function (event) {
        let moveX = event.targetTouches[0].clientX;
        let moveY = event.targetTouches[0].clientY;
        let offsetX = moveX - startX;
        let offsetY = moveY - startY;
        oDiv.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
    }
</script>
</body>

八、移动端点透问题

移动端点透问题
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件，而下面的元素监听click事件；
并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题；
移动端点透问题出现的原因
2.1当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click
2.2touch事件先执行, 执行完后从文档上消失
2.3click事件有100~300ms延迟, 所以后执行
2.4但click事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件
移动端点透问题解决方案
1.1在touch事件中添加 event.preverDefault();阻止事件扩散
1.2使用Zepto, 但是需要注意老版本的Zepto也会出现点透问题
1.3使用Fastclick, 最早解决点透问题的插件


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-移动端点透问题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            text-align: center;
            font-size: 40px;
        }
        .click{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 100px;
        }
        .tap{
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 150px;
        }
    </style>
</head>
<body>
<div class="click">click</div>
<div class="tap">tap</div>
<script>

let oClick = document.querySelector(".click");
    let oTap = document.querySelector(".tap");

    oTap.ontouchstart = function (event) {
        this.style.display = "none";
        event.preventDefault(); //  阻止事件扩散
    }
    oClick.onclick = function () {
        console.log("click");
    }
</script>
</body>

九、滑动事件(Swipe)

1.什么是轻扫事件?
手指快速的往左边滑动 /或者右边滑动 /或者上边滑动 /或者下边滑动

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12-zepto-滑动事件</title>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      div{
          width: 100px;
          height: 100px;
          background: red;
          margin-left: 100px;
          margin-top: 100px;
      }
  </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>

$("div").swipeLeft(function () {
      // console.log("向左边轻扫");
      $(this).animate({marginLeft: "0"}, 2000);
  });
  $("div").swipeRight(function () {
      // console.log("向右边轻扫");
      $(this).animate({marginLeft: "100px"}, 2000);
  });
  $("div").swipeUp(function () {
      // console.log("向上边轻扫");
      $(this).animate({marginTop: "0"}, 2000);
  });
  $("div").swipeDown(function () {
      // console.log("向下边轻扫");
      $(this).animate({marginTop: "100px"}, 2000);
  });
</script>
</body>

-End

小蚂蚁有力量

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Zepto-基础

一、1. Zepto是什么?Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，它与jQuery有着类似的api, 如果你会用jQuery，那么你也会用Zepto既然和jQuery差不多, 为什么还需要Zepto?2.1jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的...
复制链接

扫一扫