共计 2517 个字符，预计需要花费 7 分钟才能阅读完成。
Zepto 的介绍
什么是 Zepto
zepto 是轻量级的 JavaScript 库，专门为移动端定制的框架。
与 jquery 有着类似的 API，俗称：会 jquery 就会用 zepto
zepto 的特点
-
针对移动端
-
轻量级，压缩版本只有 8kb 左右
-
响应，执行快
-
语法、API 大部分同 jquery 一样，学习难度低，上手快。
-
目前 API 完善的框架中体积最小的一个
相关网址
Zepto 与 jQuery 的前世今生
相同点
-
都是优秀的 js 函数库
-
语法、API 大部分都一样（zepto 是按照 jquery 的思路来设计的）
-
Zepto 相当于 jQuery 的子集
-
同 jQuery 一样，都是以
$符号为核心函数。
不同点
Zepto 的初体验
（1）Zepto 库的下载：
我们去官网下载 Zepto 的开发版本zepto.js：
官网里，还有这样一张图：
上图的意思是：
-
最前面打钩的那五个 api，已经包含在
zepto.js文件里了； -
后面没有打钩的那些 api，如果需要用它们，必须单独下载响应的文件。
比如说，移动端的 touch 事件是很常见的，我们可以将 touch.js 这个文件下载，稍后用。
（2）代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#btn {
width: 200px;
height: 200px;
background: pink;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="btn"> 我是 div</div>
<script src="libs/zepto1.2.0.js"></script>
<script src="libs/touch.js"></script>
<script>
$(function () {$('#btn').on('touchstart', function () {alert('hello world');
});
});
</script>
</body>
</html>
上方代码实现的效果是，当手在 div 上滑动时，就会弹出 alert 窗。可以看出，这里面代码的写法和 jQuery 是一致的。
注意，我们要将浏览器切换到手机模式，才能看到 touchstart 事件的效果；否则，在浏览器上点来点去，是没有反应的。
Zepto 和 jQuery 相同的 api
意思是，jQuery 和 Zepto 有哪些共同点。
jQuery 的主要特性
下面来讲一下 jQuery 的主要特性（jQuery 的核心函数$、jQuery 对象），它们对 Zepto 来说，同样适用。
1、jQuery 的核心函数$:
作为函数使用（参数）：
-
function
-
html 字符串
-
DOM code
-
选择器字符串
作为对象调用(方法)：
-
$.ajax() $.get() $.post()
-
$.isArray() $.each() $.isFunction() $.trim()
2、jQuery 对象：
概念：jquery 核心函数 $()调用返回的对象就是 jquery 对象的数组（可能有只有一个）。
使用列举：
-
addClass()
-
removeClass()
-
show()
-
find()
代码举例
1、$.each()方法举例：（遍历数组）
<script src="libs/zepto-1.2.0.js"></script>
<script src="libs/zepto-1.2.0.js"></script>
<script>
var arr = [2, 4, 6, 8];
$.each(arr, function (index, item) {console.log(index, item);
});
</script>
打印结果：
2、append()举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<script src="libs/zepto-1.2.0.js"></script>
<script src="libs/touch.js"></script>
<script>
$('.box1').on('touchstart', function () {$('.box1').append('<p> 我是新添加的元素 </p>');
});
</script>
</body>
</html>
上方代码实现的效果是：每次，当手在 box1 上滑动时，会在 box1 中新添加一个元素。
4、find()方法举例：
$('.box1').on('touchstart', function () {console.log('touch');
$(this).find('p').css('background', 'red');
});
代码解释：找到 box1 中的 p 标签，给 p 标签设置背景色。
注意，代码里的 $(this).find() 相当于this.find，只不过 this 没有 find 方法，而 $ 有 find 方法。
5、show()方法举例：
$(`.box1`).on('touchstart', function () {$('.box2').show();});
假设 box2 一开始是隐藏的，事件中，让 box2 显示出来。
