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的移动端版本, 可以看做是一个轻量级的jQuery
- 1.1 随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native Weex等等。
- 1.2 Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zepto。
- 1.3 Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。
- jQuery和Zepto的区别在哪里？
- 2.1jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；
- 2.2Zepto.js在移动端被运用的更加广泛；
- 2.3jQuery的底层是通过DOM来实现效果的， zepto.js 是用css3 来实现的；
- 2.4Zepto.js可以说是轻量级版本的jQuery。
- zepto框架是一个模块化的框架, 将不同的功能封装到了不同的模块中
这样做的好处也是为了瘦身, 让我们使用起来更加轻量级
<!--引入核心模块；包含许多jQuery中常见方法-->
<script src="js/zepto.js"></script>
<!--引入zepto事件模块, 包含了常见的事件方法on/off/click ...-->
<script src="js/event.js"></script>
<!--引入zepto高级选择器模块, 包含了jQuery中的高级选择器-->
<script src="js/selector.js"></script>
- 如果是从github下载的代码, 那么必须一个一个的引入
- 如果是从官网链接下载的代码, 就已经包含了官网所述的默认模块了
- 动画模块
- 动画模块需要先引入fx.js
<!--引入zepto动画模块,-->
<script src="js/fx.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").animate({marginLeft: "500px"}, 10000);
});
});
</script>
- 但是需要支持其他常用方法时，需要引入fx_methods.js
<!--引入zepto动画模块的常用方法-->
<script src="js/fx_methods.js"></script>
<script>
$(function () {
$("button").click(function () {
// $("div").hide(1000);
// $("div").show(1000);
$("div").toggle(1000);
});
});
</script>
- 点击事件
- 无论是PC端还是移动端都支持click的事件，而且不仅仅是jQuery和zepto支持，原生JS的也支持。
$("div").click(function () {
console.log("被点击了");
});
var oDiv = document.querySelector("div");
oDiv.onclick = function () {
console.log("被点击了");
}
- 但是在企业开发中, 如果是要在移动端监听点击事件,一般情况下不会使用onclick事件来监听
- 因为移动端支持的手势比较多(点击/双击/拖拽/捏合/轻扫....), 所以移动端在监听click事件的时候会有100~300ms的延迟(系统需要等待判断是否是双击...等)
- 在移动端的网页中几乎不会用到双击, 而且移动端对响应的速度要求也很高
- 在移动端如果需要监听单击事件, 那么请使用tap事件
- tap事件是zepto自己封装的, 不是系统自带的，需要引入touch.js
<!--引入zepto的移动端事件模块-->
<script src="js/touch.js"></script>
$("div").tap(function () {
console.log("被点击了");
});
- swipe事件
- 事件是指手指在元素上滑动
<!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: 事件是指手指在元素上滑动
*/
// $("div").swipe(function () {
// console.log("滑动事件");
// });
$("div").swipeLeft(function () {
// console.log("左滑动");
$(this).animate({left: "0px"}, 1000);
});
$("div").swipeRight(function () {
// console.log("右滑动");
$(this).animate({left: "100px"}, 1000);
});
$("div").swipeUp(function () {
// console.log("上滑动");
$(this).animate({top: "0px"}, 1000);
});
$("div").swipeDown(function () {
// console.log("下滑动");
$(this).animate({top: "100px"}, 1000);
});
</script>
</body>
</html>
- 移动端默认事件
- 例子：在移动端，左右滑动的时候就是有默认的事件的，比如切屏等。。。
*{
margin: 0;
padding: 0;
/*
默认情况下移动端的元素就支持某些事件
但是在企业开发中, 一般情况下我们都是需要使用自己的事件,
而不是系统自带的事件
如果不清除系统自带的事件,
那么就有可能会导致我们添加的事件和系统添加的事件冲突
*/
touch-action: none;
}
网友评论