[TOC]
# Zepto 框架
**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//](http://www.css88.com//doc//zeptojs_api//)
* zepto默認只有**5個基本的模塊**，其他功能模塊需要**單獨引用** 。
* 引用的模塊，必須放在zepto的后面，`fx.js 和fx_methods.js`他們之間必須是fx\_methods.js在fx.js的后面；其他的包之間順序無所謂；
* jQuery默認是一個文件中，**包含所有zepto中的功模塊**；
* zepto的底層是通過**css3** 實現的，jQuery是操作的DOM,**所以**有些css3的效果，是jquery做不到的；
* zepto比jQuery多了更多的**移動端**的 事件的支持，比如說**tap， swipe**……
* zepto的兼容性比jQuery差，因為zepto更多的是**注重移動端和效率**，jQuery注重的是**兼容性**。
> 注意：zepto上面的動畫，不要加太多， 因為動畫很耗性能，加多了會很卡，特別是一些webview開發；
英文版：[http://zeptojs.com//](http://zeptojs.com//)
中文版：[http://www.css88.com//doc//zeptojs\_api//](http://www.css88.com//doc//zeptojs_api//)
github : [https://github.com/madrobby/zepto](https://github.com/madrobby/zepto)
## zepto兼容的瀏覽器
> Safari 6+
> Chrome 30+
> Firefox 24+
> iOS 5+ Safari
> Android 2.3+ Browser
> Internet Explorer 10+
## 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>
```
## zepto與jquery使用上的區別
注意：**zepto**與**jquery**主要的區別是在**模塊**上的區別：[http://www.css88.com//doc//zeptojs\_api//](http://www.css88.com//doc//zeptojs_api//)
### 1.選擇器-模塊
選擇器$( ' div:eq(1) ' ) : [http://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp](http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp)
閉包的好處：[http://blog.csdn.net/vuturn/article/details/43055279](http://blog.csdn.net/vuturn/article/details/43055279)
例子：點擊改第二個顏色
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-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要放在zepto后面-->
<script src="js/selector.js"></script>
<script>
$(function () {
/*點擊改第二個顏色*/
$('#btn').on('click',function () {
$('div:eq(1)').css({
backgroundColor:'green',
});
});
});
</script>
</body>
</html>
```
### 2.動畫-模塊-animate
例子：點擊改變寬度
```
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-zepto動畫</title>
<style>
div {
width: 200px;
height: 200px;
background: skyblue;
}
</style>
<!--<script src="js/jquery-1.7.2.min.js"></script>-->
<script src="js/zepto.js"></script>
<script src="js/fx.js"></script>
</head>
<body>
<button>d點擊</button>
<div></div>
<script>
$(function () {
$('button').click(function () {
$('div').animate({width: 400, background: 'gold'}, 5000);
// $('div').animate({background:'gold'},5000);
});
})
</script>
</body>
</html>
~~~
```
### 3.隱藏toggle-模塊
```
~~~
<!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/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滑動-模塊-animate
注意: 如果想在移動設備上使用swipe事件，先要**清除系統默認的手勢事件：touch-action: none**，如果沒有清楚系統默認的事件可能swiper事件不會回調和tap事件觸發多次。
```
<!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>
```
# Zepto實現tab效果am
## 1.新建一個項目
~~~
<!--引入zepto-->
<script src="js/zepto.min.js"></script>
<!--引入touch-->
<script src="js/touch.js"></script>
~~~
## 2.搭建布局
~~~
<!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">
? ?<!--
? ? ? ?告訴ie瀏覽器使用最新的解析器解析
? ?-->
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<title>Title</title>
</head>
<body>
? ?<div class="box">
? ? ? ?<!--頭部-->
? ? ? ?<ul class="header">
? ? ? ? ? ?<li class="current">新聞</li>
? ? ? ? ? ?<li>科技</li>
? ? ? ?</ul>
?
? ? ? ?<!--線條-->
? ? ? ?<span class="line"></span>
?
? ? ? ?<!--內容-->
? ? ? ?<div class="list">
? ? ? ? ? ?<div class="list1">
? ? ? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>新聞內容新聞內容</li>
? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ?<a href="javascript:;">查看更多...</a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="list2">
? ? ? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ? ? ?<li>科技內容新聞內容</li>
? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ?<a href="javascript:;">查看更多...</a>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
<!--引入zepto-->
<script src="js/zepto.min.js"></script>
<!--引入touch-->
<script src="js/touch.js"></script>
</body>
</html>
~~~
執行的效果：
## 3.添加默認的樣式
~~~
*{
? ? ? ? ? .....
? ? ? ? ? ?/*清除系統的觸摸事件*/
? ? ? ? ? ?touch-action: none;
? ? ? ? ? ?/*盒子大小的計算方式*/
? ? ? ? ? ?/*box-sizing: border-box;*/
? ? ? }
? ? ? ?/*box里面的盒子要移動，移動要用到定位*/
? ? ? ?.box{
? ? ? ? ? ?position: relative;
? ? ? }
~~~
## 4.頭部的樣式-40-16
## 5.線條樣式-37-3
> 線條span通過定位來改變標簽類型，不然寬高不起作用
## 6.內容樣式
1.list 整個列表的樣式
2.列表中ul 和 li的樣式
3.查看更多a標簽樣式
## 7.點擊實現切換-tap
### 1.監聽頭部的點擊事件
~~~
$(function () {
? ? ? //1.頭部的點擊事件
? ? ? $('.header li').tap(function () {
? ? ? ? ? //2.拿到點擊的索引
? ? ? ? ? ?var index=$(this).index();
? ? ? ? ? ?alert(index);
? ? ? });
? })
~~~
### 2.點擊實現切換-css
#### 1.文字的切換
~~~
? $(function () {
? ? ? ?//1.頭部的點擊事件
? ? ? ?$('.header li').tap(function () {
? ? ? ? ? ?//2.拿到點擊的索引
? ? ? ? ? ?var index=$(this).index();
// ? ? ? ? ? alert(index);
?
? ? ? ? ? ?$(this).addClass('current')
? ? ? ? ? ? ? ?/*同級節點，清除樣式*/
? ? ? ? ? ? ? .siblings().removeClass('current');
? ? ? });
? })
~~~
#### 2.線條的移動
~~~
$('.line').css({
? ? ? ? ? ? ? ?transform:'translateX('+ index * 100 +'%)', ?// 相對自身移動100%
? ? ? ? ? ? ? ?transition:'all 0.35s linear',
})
~~~
3.內容的移動
~~~
$('.list').css({
? ? ? ? ? ? ? ?transform:'translateX('+ -index * 50 +'%)', ? // 相對自身移動50%
? ? ? ? ? ? ? ?transition:'all 0.35s linear',
})
~~~
## 8.滑動實現切換
### 1.監聽左滑動和右滑
### 2.處理左滑-css
~~~
? ? ? ?//2.監聽頁面的滑動
? ? ? ?$('.list').swipeLeft(function () {
? ? ? ? ? ?//2.拿到點擊的索引
? ? ? ? ? ?var index=1;
// ? ? ? ? ? alert(index);
? ? ? ? ? ?//3.文字改色
? ? ? ? ? ?$('.header li').eq(index).addClass('current')
? ? ? ? ? ? ? ?/*同級節點，清除樣式*/
? ? ? ? ? ? ? .siblings().removeClass('current');
? ? ? ? ? ?//4.線條移動
? ? ? ? ? ?$('.line').css({
? ? ? ? ? ? ? ?transform:'translateX('+ index * 100 +'%)',
? ? ? ? ? ? ? ?transition:'all 0.35 linear',
? ? ? ? ? })
?
? ? ? ? ? ?//5.內容移動
? ? ? ? ? ?$('.list').css({
? ? ? ? ? ? ? ?transform:'translateX('+ -index * 50 +'%)',
? ? ? ? ? ? ? ?transition:'all 0.35 linear',
? ? ? ? ? })
? ? ? })
~~~
### 5.處理右滑-css
