移动web Zepto.js（移动端的JQuery,封装了移动端的touch事件）
程序员文章站
2022-05-03 18:05:00
...
1、Zepto.js 是移动端的JQuery的模块化(JQuery太大,模块化的Zepto.js就是使用到哪些功能就导入哪些js文件,不会导入整个JQuery)
2、Zepto.js 根据需要,导入多个不同的模块。
demo.html：
<!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>Document</title>
<style type="text/css">
li{
height: 20px; /* 改变高度的动画,必须先有个初始值 */
}
</style>
<!-- zepto的基础模块 必须导入的-->
<script type="text/javascript" src='zepto-master/src/zepto.js'></script>
<!-- 如果使用事件 需要导入event -->
<script type="text/javascript" src='zepto-master/src/event.js'></script>
<!-- 导入 animate的模块 -->
<script type="text/javascript" src='zepto-master/src/fx.js'></script>
<!-- 移动端事件 需要导入touch.js -->
<script type="text/javascript" src='zepto-master/src/touch.js'></script>
<script type="text/javascript">
$(function () {
// 为li标签绑定click事件
// $('li').on('click',function(){
// console.log('123');
// })
$('li').click(function(){ // 单击事件
console.log('捏哈哈');
$('li').css('backgroundColor',"white");
$(this).css('backgroundColor','orange');
$(this).animate({
height:100
},2000,'ease');
}).longTap(function(){ // 移动端 长按事件
$(this).animate({
'backgroundColor':'hotpink'
},500);
}).swipeLeft(function(){
$(this).text('感觉自己萌萌哒');
}).swipeRight(function(){
$(this).text('想的真好');
})
// 移动端双击事件 移动端很少使用双击
// $('li').doubleTap(function(){
// console.log('我被双击了');
// })
})
</script>
</head>
<body>
<ul>
<li>西兰花炒蛋很好吃</li>
<li>西兰花炒蛋很好吃</li>
<li>西兰花炒蛋很好吃</li>
<li>西兰花炒蛋很好吃</li>
</ul>
</body>
</html>上一篇： Zepto中如何实现"变量"的类型判断