美文网首页WebUI/插件库
移动类库：Zepto.js

移动类库：Zepto.js

作者: CodeMT | 来源:发表于2019-09-27 09:59 被阅读0次

    简介

    英文版：http://zeptojs.com//
    中文版：http://www.css88.com//doc//zeptojs_api//
    GitHub：https://github.com/madrobby/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.js的区别在哪里？

    （1）jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；

    （2）Zepto.js在移动端被运用的更加广泛；更注重在移动端的使用

    （3）jQuery的底层是通过DOM来实现效果的，zepto.js 是用css3来实现的；

    （4）Zepto.js可以说是阉割版本的jQuery。

    （5）zepto与jquery主要的区别是在模块上的区别：http://www.css88.com//doc//zeptojs_api//

    image
    • zepto默认只有基本的模块，其他功能模块需要单独引用。
    • 引用的模块，必须放在zepto的后面，fx.js 和fx_methods.js他们之间必须是fx_methods.js在fx.js的后面；其他的包之间顺序无所谓；
    • jQuery默认是一个文件中，包含所有的功模块；
    • zepto的底层是通过css3实现的，jQuery是操作的DOM,所以有些css3的效果，是jquery做不到的；
    • zepto比jQuery多了更多的移动端的 事件的支持，比如说tap， swipe……
    • zepto的兼容性比jQuery差，因为zepto更多的是注重移动端和效率，jQuery注重的是兼容性。

    注意：zepto上面的动画，不要加太多， 因为动画很耗性能，加多了会很卡，特别是一些webview开发；

    2 zepto兼容的浏览器

    • Safari 6+
    • Chrome 30+ 对谷歌较为友好
    • Firefox 24+
    • iOS 5+ Safarii ios的支持版本也比较早
    • Android 2.3+ Browser,注意支持Android的版本比较早
    • Internet Explorer 10+ 对ie不太友好

    Zepto初体验

    • 例如：点击改颜色

    点击修改颜色\

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width:200px;
      height:200px;
      background-color:red;
    }
  </style>
</head>

<body>
<button id= "btn" >点击改颜色< /button >
<div class = "box" > </div>

<!-- 引入jq -->
<!-- <script src="js/jquery-3.2.0.js"> < /script >--> 
<!-- 引入zepto --> 
<script src= "js/zepto.min. Js" > < / script > 
<script> 
  $(function () {
    $('#btn') on (' click ', function () {
      $('.box').css({
        backgroundColor: 'green',
      })
    })
  }) 
</script> 
</body> 
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>

<body>
  <button class="btn"> 点击改颜色</button>
  <div class="box"></div>

<!--引入jq-->
<!--<script src="js/jquery—3.2.0.js"></script>-->
<!--引入zepto-->
<script src="js/zepto.min.js"></script>

<script>
  $(function(){
    $('#btn').on('click',function () {
      $('.box').css({
        backgroundColor:'green',
      })
    })
  })
</script>
</body>
</html>

    3.zepto与jquery使用上的区别

    注意： zepto与jquery主要的区别是在模块上的区别：http://www.css88.com//doc//zeptojs_api//

    1.选择器-模块

    选择器$( ' div:eq(1) ' ) :http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

    • 例子：点击改第二个颜色
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{ 
      width: 200px;
      height: 200px;
      background-color: red; 
    }
  </style>
</head>
<body>

<button id="btn">点击改颜色</button>
<div class="box"></div>
<!--引入jq-->
<!--<script src="js/jquery—3.2.0.js"></script>-->
<!--引入zepto-->
<script src="js/zepto.min.js"></script>
<script>
  $(function () {
    $('#btn').on('click',function () {
      $('.box').css({
        backgroundColor:'green',
      })
    })
  })
</script>
</body>
</html>

    3.zepto与jquery使用上的区别

    注意： zepto与jquery主要的区别是在模块上的区别：http://www.css88.com//doc//zeptojs_api//

    1.选择器-模块

    选择器$( ' div:eq(1) ' ) :http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

    • 例子：点击改第二个颜色
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      backgroun-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>

<button id="btn">点击改第二个颜色</button>
<div>1</div>
<div>2</div>

<!--引入jq-->
<!--<script src="js/jquery-3.2.0.js"></script>-->
<!--引入zepto-->
<script src="js/zepto.min.js"></script>
<!--selector要放在zepot后面-->

    2.动画-模块

    • 例子：点击改变宽度

    3.隐藏toggle-模块

    toggle的用法 :http://www.w3school.com.cn/jquery/effect_toggle.asp

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum—scale=1.0">
  <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px; 
      background-color: red;
    }
  </style>
</head>
<body>
  <button id="box">来回切换隐藏</button>
  <div class="box"></div>

<!--<script src="js/jquery--3.2.0.js"></script>-->
<script src="js/zepto.min.js"></script>
<script src="js/fx.js"></script>
<script src="js/fx_methods.js"></script>
<script>
  $(function () {
    $('#btn').on('click',function () {
       $('.box').toggle(1000);
     })
  })
</script>
</body>
</html>

    4.Tap事件-模块

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

    • 例子，点击改变颜色：
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum—scale=1.0">
  <title>Title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
<button id="btn">点击修改颜色</button>
<div class="box"></div>
<!--<script src="js/jquery-3.2.0.js"></script>-->
<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
  $(function () {
    /**
    $('#btn').on('click',function () {
      $('.box').css({
        backgroundColor:'green',
      })
    })
    */
  $('#btn').tap(function () {
    $('. box'). css ({
      backgroundColor:'green',
    })
  }).
})
</script>
</body>
</html>

    5.swipe滑动-模块

    注意： 如果想在移动设备上使用swipe事件，先要清除系统默认的手势事件清楚系统默认的事件这是第一件事就这样做
    *{touch-action: none;//清除系统默认的手势事件}

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 30px;
      top: 30px; 
    }
    /*清除系统默认事件*/
   *{
      /*touch—action: none;*/
    }
  </style>
</head>
<body>
  <div class="box"></div>

<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/fx.js"></script>
<script>
  $(function () {
    $('.box').swipe(function () {
      console. log('滑动了')
    });

    $('.box').swipeleft(function () {
      console. log('向左滑动了')
    });

    $('.box').swipeRight(function () {
      console.log('向右滑动了')
    });

    $('.box').swipeUp(function () {
      console. log('向上滑动了')
    });

    $('.box').swipeDown(function () {
      console. log('向下滑动了')
    });

    $('.box').swipeleft(function () {
      $(this).animate({
        left:0,
      })
    });

    $('.box').swipeRight(function () {
      $(this).animate({
        left: '200px',
      })
    });

    $('.box').swipeUp(function () {
      $(this).animate({ 
        top:0,
      })
    });

    $('.box').swipeDown(function () {
      $(this).animate({
        top: '200px',
      })
    };

})
</script>
</body>
</html>

    相关文章

      网友评论

        本文标题：移动类库：Zepto.js

        本文链接：https://www.haomeiwen.com/subject/kznhyctx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        WebUI/插件库

        关于我们|服务条款|联系我们|移动类库：Zepto.js|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！