https://zeptojs.com/
https://github.com/madrobby/zepto
http://www.wenshuai.cn/Manual/Zepto/
https://www.css88.com/doc/zeptojs_api/
- 什么是jQuery和Zepto.js?
Zepto就是jQuery的移動(dòng)端版本, 可以看做是一個(gè)輕量級(jí)的jQuery
- 1.1 隨著移動(dòng)端的愈加火爆跪者，目前很多HTML5的框架都在支持移動(dòng)方向，比如：Vue.js，zepto.js，React Native Weex等等尝江。
- 1.2 Zepto 是一個(gè)輕量級(jí)的針對(duì)現(xiàn)代高級(jí)瀏覽器的 JavaScript 庫(kù)， 它與jquery 有著類似的api漱牵。 如果你會(huì)用 jquery戳杀，那么你也會(huì)用 zepto。
- 1.3 Zepto的設(shè)計(jì)目的是提供 jQuery 的類似的API卡乾，但并不是100%覆蓋 jQuery 翼悴。Zepto設(shè)計(jì)的目的是有一個(gè)5-10k的通用庫(kù)、下載并快速執(zhí)行幔妨、有一個(gè)熟悉通用的API鹦赎，所以你能把你主要的精力放到應(yīng)用開(kāi)發(fā)上。
- jQuery和Zepto的區(qū)別在哪里误堡？
- 2.1jQuery更多是在PC端被應(yīng)用古话，因此，考慮了很多低級(jí)瀏覽器的的兼容性問(wèn)題锁施；而Zepto.js則是直接拋棄了低級(jí)瀏覽器的適配問(wèn)題陪踩，顯得很輕盈；
- 2.2Zepto.js在移動(dòng)端被運(yùn)用的更加廣泛悉抵；
- 2.3jQuery的底層是通過(guò)DOM來(lái)實(shí)現(xiàn)效果的肩狂， zepto.js 是用css3 來(lái)實(shí)現(xiàn)的；
- 2.4Zepto.js可以說(shuō)是輕量級(jí)版本的jQuery姥饰。
- zepto框架是一個(gè)模塊化的框架, 將不同的功能封裝到了不同的模塊中
這樣做的好處也是為了瘦身, 讓我們使用起來(lái)更加輕量級(jí)
<!--引入核心模塊傻谁；包含許多jQuery中常見(jiàn)方法-->
<script src="js/zepto.js"></script>
<!--引入zepto事件模塊, 包含了常見(jiàn)的事件方法on/off/click ...-->
<script src="js/event.js"></script>
<!--引入zepto高級(jí)選擇器模塊, 包含了jQuery中的高級(jí)選擇器-->
<script src="js/selector.js"></script>
- 如果是從github下載的代碼, 那么必須一個(gè)一個(gè)的引入
- 如果是從官網(wǎng)鏈接下載的代碼, 就已經(jīng)包含了官網(wǎng)所述的默認(rèn)模塊了
- 動(dòng)畫(huà)模塊
- 動(dòng)畫(huà)模塊需要先引入fx.js
<!--引入zepto動(dòng)畫(huà)模塊,-->
<script src="js/fx.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").animate({marginLeft: "500px"}, 10000);
});
});
</script>
- 但是需要支持其他常用方法時(shí)，需要引入fx_methods.js
<!--引入zepto動(dòng)畫(huà)模塊的常用方法-->
<script src="js/fx_methods.js"></script>
<script>
$(function () {
$("button").click(function () {
// $("div").hide(1000);
// $("div").show(1000);
$("div").toggle(1000);
});
});
</script>
- 點(diǎn)擊事件
- 無(wú)論是PC端還是移動(dòng)端都支持click的事件列粪，而且不僅僅是jQuery和zepto支持审磁，原生JS的也支持。
$("div").click(function () {
console.log("被點(diǎn)擊了");
});
var oDiv = document.querySelector("div");
oDiv.onclick = function () {
console.log("被點(diǎn)擊了");
}
- 但是在企業(yè)開(kāi)發(fā)中, 如果是要在移動(dòng)端監(jiān)聽(tīng)點(diǎn)擊事件,一般情況下不會(huì)使用onclick事件來(lái)監(jiān)聽(tīng)
- 因?yàn)橐苿?dòng)端支持的手勢(shì)比較多(點(diǎn)擊/雙擊/拖拽/捏合/輕掃....), 所以移動(dòng)端在監(jiān)聽(tīng)click事件的時(shí)候會(huì)有100~300ms的延遲(系統(tǒng)需要等待判斷是否是雙擊...等)
- 在移動(dòng)端的網(wǎng)頁(yè)中幾乎不會(huì)用到雙擊, 而且移動(dòng)端對(duì)響應(yīng)的速度要求也很高
- 在移動(dòng)端如果需要監(jiān)聽(tīng)單擊事件, 那么請(qǐng)使用tap事件
- tap事件是zepto自己封裝的, 不是系統(tǒng)自帶的岂座，需要引入touch.js
<!--引入zepto的移動(dòng)端事件模塊-->
<script src="js/touch.js"></script>
$("div").tap(function () {
console.log("被點(diǎn)擊了");
});
- swipe事件
- 事件是指手指在元素上滑動(dòng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>zepto-swipe事件</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background: red;
}
</style>
<script src="js/zepto.js"></script>
<script src="js/event.js"></script>
<script src="js/touch.js"></script>
<script src="js/fx.js"></script>
</head>
<body>
<div></div>
<script>
/*
swipe: 事件是指手指在元素上滑動(dòng)
*/
// $("div").swipe(function () {
// console.log("滑動(dòng)事件");
// });
$("div").swipeLeft(function () {
// console.log("左滑動(dòng)");
$(this).animate({left: "0px"}, 1000);
});
$("div").swipeRight(function () {
// console.log("右滑動(dòng)");
$(this).animate({left: "100px"}, 1000);
});
$("div").swipeUp(function () {
// console.log("上滑動(dòng)");
$(this).animate({top: "0px"}, 1000);
});
$("div").swipeDown(function () {
// console.log("下滑動(dòng)");
$(this).animate({top: "100px"}, 1000);
});
</script>
</body>
</html>
- 移動(dòng)端默認(rèn)事件
- 例子：在移動(dòng)端态蒂，左右滑動(dòng)的時(shí)候就是有默認(rèn)的事件的，比如切屏等掺逼。吃媒。。
*{
margin: 0;
padding: 0;
/*
默認(rèn)情況下移動(dòng)端的元素就支持某些事件
但是在企業(yè)開(kāi)發(fā)中, 一般情況下我們都是需要使用自己的事件,
而不是系統(tǒng)自帶的事件
如果不清除系統(tǒng)自帶的事件,
那么就有可能會(huì)導(dǎo)致我們添加的事件和系統(tǒng)添加的事件沖突
*/
touch-action: none;
}
