简介
英文版：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//
-
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>
