移动类库：Zepto.js

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

移动类库：Zepto.js
zepto实现fadeIn,fadeOut和fadeToggle
Zepto的使用
Zepto.js移动端的小型jQuery
移动Web
百度touch.js：Web移动端touch点击事件解决方案
11-移动端开发教程-zepto.js入门教程
jQuery与Zepto的异同
web js 库 jQuery、Zepto、AgileLite
Zepto.js从hello world开始

简介

英文版：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
简介英文版：http://zeptojs.com//中文版：http://www.css88.com//doc/...
zepto实现fadeIn,fadeOut和fadeToggle
Zepto.JS是移动端常用的JavaScript类库，它不仅实现了jQuery中大部分的功能，而且文件大小只有2...
Zepto的使用
1.简介随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，R...
Zepto.js移动端的小型jQuery
Zepto.js移动端的小型jQuery >JQ怎么用它就怎么用，但是还是有一些区别的，Zepto更适合移动端的开...
移动Web
基础JS Zepto.js：Zepto.js中文API： UI FrozenUI:jndroid:Javascri...
百度touch.js：Web移动端touch点击事件解决方案
百度touch.js可以说是Web移动端touch点击事件不错的解决方案，搭配zepto.js或者jQuery使用...
11-移动端开发教程-zepto.js入门教程
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库，它与jquery有着类似的api。如果你...
jQuery与Zepto的异同
相同点 Zepto.js号称移动版的jQuery，两者的API及其相似。zepto文件更加小，只有8k多，如果熟悉...
web js 库 jQuery、Zepto、AgileLite
基础库 zepto 中文官网优点：体积小、加载速度快。 Zepto.js 是专门为现代智能手机浏览器推出的 ...
Zepto.js从hello world开始
Zepto.js从hello world开始 code：