Zepto.js框架
- 简介
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开发；
英文版：http://zeptojs.com//
中文版：http://www.css88.com//doc//zeptojs_api//
github : https://github.com/madrobby/zepto
-
zepto兼容的浏览器
Safari 6+ Chrome 30+ Firefox 24+ iOS 5+ Safari Android 2.3+ Browser Internet Explorer 10+ -
zepto与jquery使用上的区别
-
选择器-模块 （selector.js框架）
选择器 $( ' div:eq(1) ' ) :
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
-
动画-模块 （fx.js框架）
-
隐藏toggle-模块 (fx_methods.js框架，依赖fx.js框架)
toggle的用法 : http://www.w3school.com.cn/jquery/effect_toggle.asp
（切换元素的可见状态 hide 或者show）
-
Tap事件-模块
tap 只作用在移动端，PC端是无效的;
**click **在pc端和移动端都是ok的;
但是我们在移动端要用tap，因为 tap 比 click 快200-300ms。
例子，点击改变颜色：
<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>
- swipe滑动-模块
注意： 如果想在移动设备上使用swipe事件，先要清除系统默认的手势事件
( touch-action:none )
<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>
