为何使用zepto
zepto主要适用于移动端，所以不用考虑低端浏览器的兼容性问题，因此相较于jQuery有很大的优势。
zepto分为很多模块，要使用哪个模块就需要导入哪个模块。
zepto选择器
zepto选择器与jQuery类似，但是如果要使用高级选择器就需要导入zepto中的selector模块。
<script src="js/selector.js"></script>
<script>
$("button").click(function() {
$("div:first").css({
backgroundColor: "red"
});
})
</script>
zepto动画
在zepto中使用ainimate，需要导入fx.js；使用hidden(),show(),toggle()等方法时，需要导入fx_methods.js。
<script src="js/fx_methods.js"></script>
<script src="js/fx.js"></script>
<script>
$("button").click(function() {
$("div").animate({
marginLeft: 500
}, 2000)
// $("div").hide(2000);
// $("div").show(2000);
// $("div").toggle(2000);
})
</script>
zepto tap事件
移动端中一般很少使用click来监听事件。在移动端中有很多(单击，双击，拖拽，捏合等)事件，所以click在移动端中至少要花100-300毫秒来判断到底是什么事件。而移动端用对性能要求很高，事件响应自然也是越快越好，因此我们在移动端中通常使用tap事件。
tap事件不是原生的js事件，而是zepto自己封装的事件，解决了click判断事件需要100-300毫秒的问题。(只适用于移动端)
<script src="js/zepto.js"></script>
<script src="js/event.js"></script>
<script src="js/touch.js"></script>
<script>
$("div").tap(function() {
console.log("被点击了");
})
</script>
tap是zepto自己封装的方法，但是也是用原生js实现的。原生js中新增了几个只适用于移动端的事件
- touchstart：手指按下
- touchmove：手指移动
- touchend：手指抬起
移动端touch事件对象中比较重要的三个子对象
- touches: 当前屏幕上所有手指的列表
- targetTouches: 保存了元素上所有的手指里列表
- changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指
利用zepto做一个移动div小练习
下面代码有bug，但是目前没有找到原因，因此我一般都是写原生js或者jQuery。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/zepto.js"></script>
<script src="js/event.js"></script>
<script src="js/touch.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: red;
margin: 150px auto;
}
</style>
</head>
<body>
<div></div>
<script>
let startX = 0;
let startY = 0;
let more = false;
let oDiv = document.querySelector("div");
oDiv.ontouchstart = function(e) {
// console.log("移动了");
if (more) {
return
}
startX = e.targetTouches[0].clientX;
startY = e.targetTouches[0].clientY;
// console.log(startX, startY);
}
oDiv.ontouchmove = function(e) {
let moveX = e.targetTouches[0].clientX - startX;
let moveY = e.targetTouches[0].clientY - startY;
console.log(moveX, moveY);
oDiv.style.transform = `translate(${moveX}px, ${moveY}px)`;
}
</script>
</body>
</html>
