【Zepto笔记】Zepto.js

最新推荐文章于 2024-05-09 09:42:13 发布

萌宅鹿同学

最新推荐文章于 2024-05-09 09:42:13 发布

阅读量1.1k

点赞数 1

分类专栏： # jQuery笔记文章标签： jQuery Zepto.js JavaScript

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100116240

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Zepto.js

Zepto 简介
jQuery 与 Zepto 的区别
关于浏览器兼容
既然有了JQuery，为什么要Zepto呢
Zepto 设计模块
Zepto 案例
验证Zepto特效基于CSS3
Zepto 针对移动端的模块
Zepto 综合案例

jQuery笔记目录

Zepto 简介

随着移动端的愈加火爆，目前很多 HTML5 的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native 等等。

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库，它与jquery 有着类似的api。如果你会用 jquery，那么你也会用 zepto。

Zepto 的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto 设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以能把你主要的精力放到应用开发上。

jQuery 与 Zepto 的区别

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

关于浏览器兼容

Safari 6+
Chrome 30+
Firefox 24+
iOS 5+ Safari
Android 2.3+ Browser
Internet Explorer 10+

既然有了JQuery，为什么要Zepto呢

jQuery 更多针对的是对PC端低版本浏览器的兼容，而 Zepto 针对移动端，将 jQuery 中冗余的部分去除，对移动端进行优化。所以说，会了 jQuery ，Zepto 会上手的很快。

Zepto 设计模块

Zepto 为了保持足够的轻量和效率，只保留了默认的最基本的功能，其他的功能，如果有需要，只要再次引入就可以了；

注意：jQuery的底层是通过DOM来实现效果的， zepto 是用css3 来实现的。

在这里插入图片描述

Zepto 案例

选择器案例

Zepto 的核心包中只保留了默认的最基本的功能，如果需要其他功能，需要再次引用，例如要使用 selector 就需要再次引入 selector 模块。

Zepto 的使用方式与 jQuery 完全一样，主要是引入的库不同，jQuery是直接引入 jQuery库，Zepto 根据自己需要的功能引入相应的库，运行效率更高，适合移动版开发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
<body>
<button id="btn">改变第二个标签的颜色</button>
<div></div>
<div></div>
<!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>--> <!-- JQuery 模块--
<script src="lib/zepto.js"></script>
<script src="lib/selector.js"></script><!--引入 selector 模块-->
<script type="text/javascript">
    $(function () {
        $('#btn').on('click', function () {
            $('div:eq(1)').css({
                backgroundColor: 'red'
            });
        });
    });
</script>
</body>
</html>

运行效果：点击按钮，第二个标签颜色变红。

在这里插入图片描述

动画案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
<body>
<button id="btn">改变宽度</button>
<div class="box"></div>

<!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>-->
<script src="lib/zepto.js"></script>
<script src="lib/fx.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn').on('click', function () {
            $('.box').animate({
                width:'800px'
            }, 800)
        });
    });
</script>
</body>
</html>

运行效果：点击按钮，标签宽度发生改变。
在这里插入图片描述

动画案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>
<body>
<button id="btn">改变宽度</button>
<div class="box"></div>

<!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>-->
<script src="lib/zepto.js"></script>
<script src="lib/fx.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn').on('click', function () {
            $('.box').animate({
                width:'800px',
            }, 800)
        });
    });
</script>
</body>
</html>

运行效果：点击按钮，实现显示/隐藏的切换。

验证Zepto特效基于CSS3

jQuery 无法修改背景颜色，而 Zepto 可以，因为 background-color 是 CSS3 的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 200px;
            background-color: red;
        ;
        }
    </style>
</head>
<body>
    <button id="btn">验证</button>
    <p></p>
    <div class="box"></div>
<!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>--> 
<script src="lib/zepto.js"></script>
<script src="lib/fx.js"></script>
<script src="lib/fx_methods.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn').on('click', function () {
            $('.box').animate({
                'border-radius': '50%',
                'background-color':'green' // jQuery 无法修改背景颜色，Zepto 可以
            }, 2000)
        })
    });
</script>

</body>
</html>

运行效果：可以看见，使用 Zepto 改变的都是 CSS3 的属性。
在这里插入图片描述

Zepto 针对移动端的模块

使用移动端需要添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

禁止触发默认的手势

* { touch-action: none; }

tap() 和 click() 的区别

tap 只作用在移动端，PC端是无效的;
click 在 pc 端和移动端都是 ok 的;
但是我们在移动端要用 tap，因为 tap 比 click 快 200-300ms。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">改变颜色</button>
    <div id="box"></div>
<script src="lib/zepto.js"></script>
<script src="lib/touch.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btn').tap(function () {
            $('#box').css({
                backgroundColor: 'green'
            });
        });
    });
</script>
</body>
</html>

运行效果：如图切换到移动端，点击按钮改变颜色。
在这里插入图片描述

swipe() 演示

swipe() 用法演示：

$($box).swipe(function () { // 只要滑动，都能监听
    console.log('滑动了!');
});
$($box).swipeLeft(function () { // 监听左滑动
    // console.log('左滑动了!');
    $(this).animate({
        left:'20px'
    },1000)
});
$($box).swipeRight(function () { // 监听右滑动
    // console.log('右滑动了!');
    $(this).animate({
        left:'220px'
    },1000)
});
$($box).swipeUp(function () { // 监听上滑动
    // console.log('上滑动了!');
    $(this).animate({
        top:'220px'
    },1000)
});
$($box).swipeDown(function () { // 监听下滑动
    // console.log('下滑动了!');
    $(this).animate({
        top:'520px'
    },1000)
});

完整案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        *{
            /*清除默认的手势*/
            touch-action: none;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;

            position: absolute;
            left: 50px;
            top: 80px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
<script type="text/javascript" src="lib/zepto.js"></script>
<script src="lib/touch.js"></script>
<script src="lib/fx.js"></script>

<script type="text/javascript">
    $(function () {
        var $box = $('.box');
        $($box).swipe(function () { // 只要滑动，都能监听
            console.log('滑动了!');
        });
        $($box).swipeLeft(function () { // 监听左滑动
            // console.log('左滑动了!');
            $(this).animate({
                left:'20px'
            },1000)
        });
        $($box).swipeRight(function () { // 监听右滑动
            // console.log('右滑动了!');
            $(this).animate({
                left:'220px'
            },1000)
        });
        $($box).swipeUp(function () { // 监听上滑动
            // console.log('上滑动了!');
            $(this).animate({
                top:'220px'
            },1000)
        });
        $($box).swipeDown(function () { // 监听下滑动
            // console.log('下滑动了!');
            $(this).animate({
                top:'520px'
            },1000)
        });

    });
</script>

</body>
</html>

运行效果：实现滑动效果，可以上下左右滑动 div。
在这里插入图片描述

Zepto 综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            touch-action: none;
            box-sizing: border-box;
        }

        .box{
            /*定位约束*/
            position: relative;
        }

        .head{
            width: 100%;
            height: 40px;
            background-color: #ccc;
        }

        .head li{
            width: 50%;
            height: 40px;
            float: left;

            /*伸缩布局*/
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
        }

        .head li.current{
            color: #e9232c;
        }

        .line{
            width: 50%;
            height: 3px;
            background-color: #e9232c;
            position: absolute;
            left: 0;
            top: 37px;
        }

        .list{
            width: 200%;
            overflow: hidden;
        }

        .list>div{
            width: 50%;
            float: left;
        }

        .list>div ul{
            padding: 10px;
        }

        .list>div ul li{
            line-height: 36px;
            border-bottom: 1px solid #ccc;
        }

        .more{
            width: 100%;
            text-decoration: none;

            display: flex;
            justify-content: center;
            align-items: center;
            color: #000;
        }

    </style>
</head>
<body>
   <div class="box">
       <!--头部-->
       <ul class="head">
           <li class="current">新闻</li>
           <li>科技</li>
       </ul>
       <!--线条-->
       <span class="line"></span>
       <!--中间内容-->
       <div class="list">
           <div class="list1">
               <ul>
                   <li>撩课新闻撩课新闻撩课1</li>
                   <li>撩课新闻撩课新闻撩课2</li>
                   <li>撩课新闻撩课新闻撩课3</li>
                   <li>撩课新闻撩课新闻撩课4</li>
                   <li>撩课新闻撩课新闻撩课5</li>
               </ul>
               <a href="#" class="more">查看更多...</a>
           </div>
           <div class="list2">
               <ul>
                   <li>撩课科技撩课科技1</li>
                   <li>撩课科技撩课科技2</li>
                   <li>撩课科技撩课科技3</li>
                   <li>撩课科技撩课科技4</li>
                   <li>撩课科技撩课科技5</li>
               </ul>
               <a href="#" class="more">查看更多...</a>
           </div>
       </div>
   </div>

<script type="text/javascript" src="lib/zepto.js"></script>
<script src="lib/touch.js"></script>
<script type="text/javascript">
   $(function () {
       // 1.1 获取tap事件
       $('.head li').tap(function () {
           // 1.1.1 获取索引
           var index = $(this).index();
           // 1.1.2 改变选中的样式
           $(this).addClass('current').siblings().removeClass('current');
           // 1.1.3 处理线条的样式
           $('.line').css({
              transform: 'translateX(' + index * 100 + '%)',
              transition: 'all 0.25s linear'
           });
           // 1.1.4 处理列表的滚动
           $('.list').css({
               transform: 'translateX(' + -index * 50 + '%)',
               transition: 'all 0.25s linear'
           });
       });

       // 1.2 监听左滑动和右滑动
       var $list = $('.list');
       $list.swipeLeft(function () {
           dealWithSwipe(1);
       });

       $list.swipeRight(function () {
           dealWithSwipe(0);
       });

       function dealWithSwipe(index) {
           // 1.1.1 改变选中的样式
           $('.head li').eq(index).addClass('current').siblings().removeClass('current');
           // 1.1.2 处理线条的样式
           $('.line').css({
               transform: 'translateX(' + index * 100 + '%)',
               transition: 'all 0.25s linear'
           });
           // 1.1.3 处理列表的滚动
           $('.list').css({
               transform: 'translateX(' + -index * 50 + '%)',
               transition: 'all 0.25s linear'
           });
       }
   });
</script>
</body>
</html>

运行效果：
在这里插入图片描述

萌宅鹿同学

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Zepto笔记】Zepto.js

Zepto.jsZepto 简介jQuery 与 Zepto 的区别关于浏览器兼容既然有了JQuery，为什么要Zepto呢Zepto 设计模块Zepto 案例选择器案例动画案例动画案例2验证Zepto特效基于CSS3Zepto 针对移动端的模块tap() 和 click() 的区别swipe()Zepto 简介随着移动端的愈加火爆，目前很多 HTML5 的框架都在支持移动方向，比如：Vue....
复制链接

扫一扫