- 簡介
Zepto 是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的 JavaScript 庫， 它與jquery 有著類似的api。 如果你會(huì)用 jquery，那么你也會(huì)用 zepto。
Zepto的設(shè)計(jì)目的是提供 jQuery 的類似的API，但并不是100%覆蓋 jQuery 。Zepto設(shè)計(jì)的目的是有一個(gè)5-10k的通用庫、下載并快速執(zhí)行、有一個(gè)熟悉通用的API，所以你能把你主要的精力放到應(yīng)用開發(fā)上。
- 思考：jQuery和Zepto.js的區(qū)別在哪里？
1）jQuery更多是在PC端被應(yīng)用，因此，考慮了很多低級(jí)瀏覽器的兼容性問題；而Zepto.js則是直接拋棄了低級(jí)瀏覽器的適配問題，顯得很輕盈；
2）Zepto.js在移動(dòng)端被運(yùn)用的更加廣泛；
3）jQuery的底層是通過DOM來實(shí)現(xiàn)效果的， zepto.js 是用css3 來實(shí)現(xiàn)的；
4）Zepto.js可以說是閹割版本的jQuery。
5 ) zepto與jquery主要的區(qū)別是在模塊上的區(qū)別：
http://www.css88.com//doc//zeptojs_api//
zepto默認(rèn)只有基本的模塊，其他功能模塊需要單獨(dú)引用 。
引用的模塊，必須放在zepto的后面，fx.js 和fx_methods.js 他們之間必須是fx_methods.js在fx.js的后面；其他的包之間順序無所謂；
jQuery默認(rèn)是一個(gè)文件中，包含所有的功模塊；
zepto的底層是通過css3 實(shí)現(xiàn)的，jQuery是操作的DOM,所以有些css3的效果，是jquery做不到的；
zepto比jQuery多了更多的移動(dòng)端的 事件的支持，比如說tap， swipe……
zepto的兼容性比jQuery差，因?yàn)閦epto更多的是注重移動(dòng)端和效率，jQuery注重的是兼容性。
注意：zepto上面的動(dòng)畫，不要加太多， 因?yàn)閯?dòng)畫很耗性能，加多了會(huì)很卡，特別是一些webview開發(fā)；
英文版：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使用上的區(qū)別
-
選擇器-模塊 （selector.js框架）
選擇器 $( ' div:eq(1) ' ) :
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
動(dòng)畫-模塊 （fx.js框架）
隱藏toggle-模塊 (fx_methods.js框架，依賴fx.js框架)
toggle的用法 : http://www.w3school.com.cn/jquery/effect_toggle.asp
（切換元素的可見狀態(tài) hide 或者show）
-
Tap事件-模塊
tap 只作用在移動(dòng)端，PC端是無效的;
**click **在pc端和移動(dòng)端都是ok的;
但是我們?cè)谝苿?dòng)端要用tap，因?yàn)?tap 比 click 快200-300ms。
例子，點(diǎn)擊改變顏色：
<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">點(diǎn)擊修改顏色</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滑動(dòng)-模塊
注意： 如果想在移動(dòng)設(shè)備上使用swipe事件，先要清除系統(tǒng)默認(rèn)的手勢事件
( 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;
}
/*清楚系統(tǒng)默認(rèn)的事件*/
*{
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('滑動(dòng)了')
});
$('.box').swipeLeft(function () {
console.log('向左滑動(dòng)了')
});
$('.box').swipeRight(function () {
console.log('向右滑動(dòng)了')
});
$('.box').swipeUp(function () {
console.log('向上滑動(dòng)了')
});
$('.box').swipeDown(function () {
console.log('向下滑動(dòng)了')
});
*/
$('.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>