1. Zepto简介

随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native等等。
Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库，它与jquery 有着类似的api。如果你会用 jquery，那么你也会用 zepto。
Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

2. jQuery和Zepto.js的区别在哪里？

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

3. 浏览器兼容

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

4. Zepto初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>#box{width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><div id="box"></div><button id="btn">改变颜色</button><!--<script type="text/javascript" src="js/jquery-3.3.1.js"></script>-->
<script src="js/zepto.js"></script>
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('#box').css({backgroundColor: 'green'});})});
</script>
</body>
</html>

5. 既生瑜何生亮？

zepto主要针对移动端。

6. Zepto官网

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

7. Zepto设计模块

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

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

8. 案例实现：Zepto选择器

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

9. 案例实现：Zepto动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><button id="btn">改变宽度</button><div class="box"></div><!--<script type="text/javascript" src="js/jquery-3.3.1.js"></script>-->
<script src="js/zepto.js"></script>
<script src="js/fx.js"></script>
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('.box').animate({width: '800px'}, 1000)})});
</script>
</body>
</html>

10. 验证动画底层由CSS3实现

基于DOM无法改变颜色，CSS3可以改变颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body><button id="btn">验证</button>
<div class="box"></div><script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!--<script src="js/zepto.js"></script>
<script src="js/fx.js"></script>-->
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('.box').animate({borderRadius: '50%',backgroundColor: 'green'}, 1000)})});
</script>
</body>
</html>

11. tap 和 click 的区别

tap 只作用在移动端，PC端是无效的;
click 在pc端和移动端都是ok的;
但是我们在移动端要用tap，因为 tap 比 click 快200-300ms。
// 禁止触发默认的手势

* { touch-action: none; }

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

12. 验证swipe滑动

10. zepto 和 jquery

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开发；

Zepto：基础学习相关推荐

【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
0基础学好python难不难_零基础学习Python难不难？Python有什么优势？
原标题:零基础学习Python难不难?Python有什么优势? Python是一种计算机程序设计语言.首先,我们普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如下载一个 ...
计算机一级ps2019,2019年计算机一级考试PS基础学习点子：PS菜单中英文对照表.docx...
2019 年计算机一级考试 PS 基础学习点子: PS 菜单中英文对照表 PS菜单中英文对照表一.File New 2.Open 3.Open As 4.Open Recent Close 6.Sa ...
Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
零基础学习java，这些书一定要看!
学习java技术除了看视频,看书也是非常重要的,尤其是零基础同学,本文包含学习Java各个阶段的书籍推荐,史上最全,学习Java,没有书籍怎么行,就好比出征没带兵器一个道理,这些书籍整理出来给大家作为 ...

Zepto：基础学习