Zepto

目录

一、Zepto初体验

1.1 什么是Zepto?

1.2 .既然和jQuery差不多, 为什么还需要Zepto?

1.3 官方网址

1.4 Zepto的特点

1.5 Zepto注意点

1.6 示例

二、Zepto选择器

2.1 示例

三、Zepto动画

3.1 zepto动画注意点

3.2 示例

四、Zepto-tap事件

4.1 移动端click事件注意点

4.2 tap事件

4.3 示例

五、移动端Touch事件

5.1 Zepto是如何实现tap事件的?

5.2 移动端Touch事件对象

5.3 移动端手指位置

5.4 移动端点透问题

5.5 Zepto-swipe事件

5.6Zepto实现移动端轮播图


一、Zepto初体验

 

1.1 什么是Zepto?

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库,

它与jQuery有着类似的api, 如果你会用jQuery,那么你也会用Zepto


1.2 .既然和jQuery差不多, 为什么还需要Zepto?

jQuery更多是在PC端被应用,Zepto更多是在移动端被应用

也正是因为jQuery用在PC端, 所以jQuery考虑了很多低级浏览器的的兼容性问题, ,所以代码更多体积更大

也正是因为Zepto用在移动端, 所以Zepto则是直接抛弃了低级浏览器的适配问题 , 所以代码更少体积更小

综上所述: Zepto其实就是专门用于移动端的轻量级的jQuery


1.3 官方网址

英文版:http://zeptojs.com/

中文版:http://www.css88.com/doc/zeptojs_api/


1.4 Zepto的特点

Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,

在使用的过程中我们可以按需导入, 也就是需要什么功能就导入什么模块

Zepto 模块:

moduledefaultdescription
zepto核心模块;包含许多方法
event通过on()& off()处理事件
ajaxXMLHttpRequest 和 JSONP 实用功能
form序列化 & 提交web表单
ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect提供 $.os$.browser消息
fxThe animate()方法
fx_methods以动画形式的 show, hide, toggle, 和 fade*()方法.
assets实验性支持从DOM中移除image元素后清理iOS的内存。
data一个全面的 data()方法, 能够在内存中存储任意对象。
deferred提供 $.Deferredpromises API. 依赖"callbacks" 模块.
当包含这个模块时候,  $.ajax() 支持promise接口链式的回调。
callbacks为"deferred"模块提供 $.Callbacks
selector实验性的支持 jQuery CSS 表达式 实用功能,比如 $('div:first')el.is(':visible')
touch在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。
gesture在触摸设备上触发 pinch 手势事件。
stack提供 andSelf& end()链式调用方法
ios3String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x.


1.5 Zepto注意点

如果是从官方网站下载的, 那么已经包含了默认的一些模块

如果是从github下载的, 那么需要我们自己手动导入每一个模块

当然后续学习了NodeJS后, 我们也可以自己定制


1.6 示例

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: skyblue;
        }
<script src="js/zepto.js"></script>
<script src="js/event.js"></script>
<button>我是按钮</button>
<div></div>
    $("button").click(function () {
        $("div").css({backgroundColor: "red"});
    });


二、Zepto选择器

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

2.1 示例

       *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            margin-bottom: 20px;
        }
        .one{
            background: green;
        }
        #two{
            background: blue;
        }
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/selector.js"></script>
<button>我是按钮</button>
<div></div>
<div class="one"></div>
<div id="two"></div>
    $("button").click(function () {
        // $("div").css({backgroundColor: "yellow"});
        // $(".one").css({backgroundColor: "yellow"});
        // $("#two").css({backgroundColor: "yellow"});
        $("div:first").css({backgroundColor: "yellow"});
    });


三、Zepto动画

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

3.1 zepto动画注意点

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


3.2 示例

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*display: none;*/
        }
    <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>
<button>我是按钮</button>
<div></div>
    $("button").click(function () {
        // $("div").animate({marginLeft: 500}, 2000);
        // $("div").hide(2000);
        // $("div").show(2000);
        $("div").toggle(2000);
    });


四、Zepto-tap事件

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

4.1 移动端click事件注意点

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


4.2 tap事件

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


4.3 示例

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
        }
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <div></div>
    $("div").tap(function () {
        console.log("被点击了");
    });


五、移动端Touch事件

5.1 Zepto是如何实现tap事件的?

虽然tap事件是Zepto自己封装的事件, 但是无论如何封装肯定都是通过原生JS来实现的

在原生的JS中专门为移动端新增了几个事件:

  • touchstart: 手指按下
  • touchmove:  手指在元素上移动
  • touchend :  手指抬起

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
        }
<div></div>
    let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function () {
        console.log("手指按下");
    }
    oDiv.ontouchend = function () {
        console.log("手指抬起");
    }
    oDiv.ontouchmove = function () {
        console.log("手指移动");
    }


5.2 移动端Touch事件对象

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

公共部分:

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 150px;
            height: 150px;
            display: inline-block;
            background: red;
        }
        .box2{
            background: blue;
        }
<div class="box1"></div>
<div class="box2"></div>


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

touches:        当前屏幕上所有手指的列表

targetTouches:  保存了元素上所有的手指里列表

changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

    let oDiv1 = document.querySelector(".box1");
    oDiv1.ontouchstart = function (event) {
        console.log("touches1", event.touches);
        console.log("targetTouches1", event.targetTouches);
    }
    let oDiv2 = document.querySelector(".box2");
    oDiv2.ontouchstart = function (event) {
        console.log("touches2", event.touches);
        console.log("targetTouches2", event.targetTouches);
    }


touches和targetTouches:

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

changedTouches:

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

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


5.3 移动端手指位置

screenX/screenY是相对于屏幕左上角的偏移位

clientX/clientY是相对于可视区域左上角的偏移位

pageX/pageY是相对于内容左上角的偏移位

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 1000px;
            height: 100px;
            margin-left: 50px;
            margin-top: 50px;
            background: linear-gradient(to right, red, green);
        }
<div></div>
    let oDiv = document.querySelector("div");
    oDiv.ontouchstart = function (event) {
        // console.log(event.targetTouches[0]);
        // console.log(event.targetTouches[0].screenX);
        // console.log(event.targetTouches[0].screenY);
        console.log(event.targetTouches[0].clientX); // 11
        console.log(event.targetTouches[0].clientY); // 63
        console.log(event.targetTouches[0].pageX);  // 686
        console.log(event.targetTouches[0].pageY);  // 63
    }

案例:

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
<div></div>
    /*需求: 通过手指拖拽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)`;
    }


5.4 移动端点透问题

1.移动端点透问题

当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件,而下面的元素监听click事件,并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题

2.移动端点透问题出现的原因

当手指触摸到屏幕的时候,系统生成两个事件,一个是touch 一个是click

touch事件先执行,执行完后从文档上消失

click事件有100~300ms延迟, 所以后执行.

但click事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件

3.移动端点透问题解决的几种方案

  1. 在touch事件中添加event.preverDefault(); 阻止事件扩散
  2. 使用Zepto, 但是需要注意老版本的Zepto也会出现点透问题
  3. 使用Fastclick, 最早解决点透问题的插件

        *{
            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;
        }
<div class="click">click</div>
<div class="tap">tap</div>
let oClick = document.querySelector(".click");
let oTap = document.querySelector(".tap");

在touch事件中添加event.preverDefault(); 阻止事件扩散,


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

 使用Zepto, 但是需要注意老版本的Zepto也会出现点透问题,

<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
$(oTap).tap(function () {
        oTap.style.display = "none";
    });
    oClick.onclick = function () {
        console.log("click");
    }

使用Fastclick, 最早解决点透问题的插件,

注意点: 这里的click事件并不是原生的click事件, 是使用的fastclick中的click,这里的click事件已经解决了100~300ms延迟的问题

<script src="js/fastclick.js"></script>
    //使用原生的方法
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    }

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

    oTap.addEventListener("click", function () {
        oTap.style.display = "none";
    });
    oClick.onclick = function () {
        console.log("click");
    }


5.5 Zepto-swipe事件

什么是轻扫事件?

手指快速的往左边滑动/或者右边滑动/或者上边滑动/或者下边滑动

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin-left: 100px;
            margin-top: 100px;
        }
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>
<div></div>
    $("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);
    });

示例:

        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        .box{
            overflow: hidden;
        }
        .box>.box-top{
            height: 50px;
            position: relative;
        }
        .box>.box-top>ul{
            list-style: none;
            width: 100%;
            display: flex;
        }
        .box>.box-top>ul>li{
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex-grow: 1;
            background: #6c6c6c;
        }
        .box>.box-top>ul>.active{
            color: #f40;
            background: #ccc;
        }
        .box>.box-top>.line{
            width: 50%;
            height: 2px;
            background: #f40;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        .box>.box-bottom{
            width: 200%;
            display: flex;
            position: relative;
            top: 0;
            left: 0;
        }
        .box>.box-bottom>ul{
            list-style: none;
            flex-grow: 1;
        }
        .box>.box-bottom>ul>li{
            line-height: 30px;
            border-bottom: 1px solid #ccc;
        }
    <script src="js/zepto.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>
    <script src="js/selector.js"></script>
<div class="box">
    <div class="box-top">
        <ul>
            <li class="active">新闻</li>
            <li>科技</li>
        </ul>
        <p class="line"></p>
    </div>
    <div class="box-bottom">
        <ul class="list1">
            <li>我是新闻1</li>
            <li>我是新闻2</li>
            <li>我是新闻3</li>
            <li>我是新闻4</li>
            <li>我是新闻5</li>
            <li>我是新闻6</li>
            <li>我是新闻7</li>
            <li>我是新闻8</li>
            <li>我是新闻9</li>
            <li>我是新闻10</li>
        </ul>
        <ul class="list2">
            <li>我是军事1</li>
            <li>我是军事2</li>
            <li>我是军事3</li>
            <li>我是军事4</li>
            <li>我是军事5</li>
            <li>我是军事6</li>
            <li>我是军事7</li>
            <li>我是军事8</li>
            <li>我是军事9</li>
            <li>我是军事10</li>
        </ul>
    </div>
</div>
    //将切换的代码全部封装在自定义事件里
    $(".box-top li").on("lwg:click",function () { // on 自定义事件
        $(this).addClass("active").siblings().removeClass("active");
        let currentIndex = $(this).index();
        $(".line").animate({left: currentIndex * $(this).width() + "px"}, 500);
        $(".box-bottom").animate({left: -currentIndex * $(".list1").width() + "px"}, 500);
    });
    
    // 点击切换事件
    $(".box-top li").click(function () {
        $(this).trigger("lwg:click");
    });

    // 清扫事件--左滑
    $(".box").swipeLeft(function () {
        $(".box-top li:last").trigger("lwg:click");
    });
     // 清扫事件--右滑
    $(".box").swipeRight(function () {
        $(".box-top li:first").trigger("lwg:click");
    });


5.6Zepto实现移动端轮播图

大致思路如下:

  • 定义变量保存对当前的索引
  • 定义变量保存图片宽度
  • 定义变量保存最大的索引
  • 监听按钮点击
  • 实现自动轮播
  • 实现轻扫切换

具体请看代码里的详细注释

        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        ul{
            list-style: none;
            width: 500%;
            display: flex;
            justify-content: flex-start;
            position: relative;
            left: 0;
            top: 0;
        }
        ul>li{
            flex: 1;
        }
        ul>li>img{
            width: 100%;
            vertical-align: bottom;
        }
        div>p{
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            /*background: deepskyblue;*/
            /*
            告诉浏览器当前元素不需要接收事件
            注意点: 如果父元素不接收事件, 那么默认子元素也不能接收事件
                    如果子元素需要接收事件, 那么必须单独设置为auto
            */
            pointer-events: none;
        }
        div>p>span{
            display: inline-block;
            width: 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #fff;
            background: rgba(0,0,0,0.3);
            pointer-events: auto;
        }
        ol{
            list-style: none;
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            display: flex;
            justify-content: flex-start;
        }
        ol>li{
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
        }
        ol>.active{
            background: #f40;
        }
    <script src="js/zepto.js"></script>
    <script src="js/selector.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>
<div>
    <ul>
        <li><img src="images/img1.jpg" alt=""></li>
        <li><img src="images/img2.jpg" alt=""></li>
        <li><img src="images/img3.jpg" alt=""></li>
        <li><img src="images/img4.jpg" alt=""></li>
        <li><img src="images/img1.jpg" alt=""></li>
    </ul>
    <p>
        <span class="left-btn">&lt;</span>
        <span class="right-btn">&gt;</span>
    </p>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
    //封装自定义方法
    ;(function($){
        $.extend($.fn, {
            //判断是否在做动画
            isAnimation: function(){
                let time = $("ul").css("transition-duration");
                time = parseFloat(time);
                return time !== 0;
            }
        })
    })(Zepto)
    // 1.定义变量保存对当前的索引
    let currentIndex = 0;

    // 2.定义变量保存图片宽度
    let itemWidth = $("ul>li").width();

    // 3.定义变量保存最大的索引
    let maxIndex = $("ul>li").length - 1;

    // 4.监听按钮点击
    // 4.1 点击左按钮
    $(".left-btn").click(function () {
        //点击的时候关闭自动轮播,点击并切换完后再重新开启自动轮播
        clearInterval(timerId);

        //判断当前是否有动画在执行
        if($(this).isAnimation()){return}

        currentIndex--;

        //判断当前是否是第一张
        if(currentIndex < 0){
            $("ul").css({left: -maxIndex * itemWidth});
            currentIndex = maxIndex - 1;
        }

        // 添加动画
        $("ul").animate({left: -currentIndex * itemWidth}, 500, function () {// 动画完成之后重新开启自动轮播
            autoPlay();
        });

        // 点击指示点,图片调到对应区域
        $("ol>li").eq(currentIndex).addClass("active").siblings().removeClass();
    });

    // 4.2 点击右按钮
    $(".right-btn").click(function () {
        //点击的时候关闭自动轮播,点击并切换完后再重新开启自动轮播
        clearInterval(timerId);

        //判断当前是否有动画在执行
        if($(this).isAnimation()){return}

        currentIndex++;

        //判断当前是否是最后张
        if(currentIndex > maxIndex){
            $("ul").css({left: 0});
            currentIndex = 1;
        }

        // 添加动画
        $("ul").animate({left: -currentIndex * itemWidth}, 500, function () {// 动画完成之后重新开启自动轮播
            autoPlay();
        });

        //
        let index = currentIndex === 4 ? 0 : currentIndex;

        // 点击指示点,图片调到对应区域
        $("ol>li").eq(index).addClass("active").siblings().removeClass();
    });

    /*
    注意点:
    在移动端中是没有移入和移出事件的
    * */
    /*
    let oUl = document.querySelector("ul");
    oUl.onmouseenter = function () {
        console.log("移入");
    }
    oUl.onmouseleave = function () {
        console.log("移出");
    }
    */

    // 5.实现自动轮播
    let timerId = null;
    function autoPlay() {
        timerId = setInterval(function () {
            $(".right-btn").click();
        }, 2000);
    }

    autoPlay();

    //手指按下时轮播停止
    $("ul").get(0).ontouchstart = function () {
        clearInterval(timerId);
    };

    //手指抬起时轮播继续
    $("ul").get(0).ontouchend = function () {
        autoPlay();
    };

    // 6.实现轻扫切换
    $("ul").swipeLeft(function () {
        $(".right-btn").click();
    });

    $("ul").swipeRight(function () {
        $(".left-btn").click();
    });

  • 1
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值