【Zepto笔记】Zepto.js
2024-04-28 19:43:42
Zepto.js
- Zepto 简介
- jQuery 与 Zepto 的区别
- 关于浏览器兼容
- 既然有了JQuery，为什么要Zepto呢
- Zepto 设计模块
- Zepto 案例
- 选择器案例
- 动画案例
- 动画案例2
- 验证Zepto特效基于CSS3
- Zepto 针对移动端的模块
- 禁止触发默认的手势
- tap() 和 click() 的区别
- swipe() 演示
- Zepto 综合案例
jQuery笔记目录
Zepto 简介
随着移动端的愈加火爆，目前很多 HTML5 的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native 等等。
Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库， 它与jquery 有着类似的api。 如果你会用 jquery，那么你也会用 zepto。
Zepto 的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto 设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以能把你主要的精力放到应用开发上。
jQuery 与 Zepto 的区别
- jQuery 更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而 Zepto.js 则是直接抛弃了低级浏览器的适配问题，显得很轻盈。
- Zepto.js 在移动端被运用的更加广泛。
- jQuery 的底层是通过DOM来实现效果的， zepto.js 是用 css3 来实现的。
- Zepto.js 可以说是阉割版本的 jQuery。
关于浏览器兼容
- Safari 6+
- Chrome 30+
- Firefox 24+
- iOS 5+ Safari
- Android 2.3+ Browser
- Internet Explorer 10+
既然有了JQuery，为什么要Zepto呢
jQuery 更多针对的是对PC端低版本浏览器的兼容，而 Zepto 针对移动端，将 jQuery 中冗余的部分去除，对移动端进行优化。所以说，会了 jQuery ，Zepto 会上手的很快。
Zepto 设计模块
Zepto 为了保持足够的轻量和效率，只保留了默认的最基本的功能，其他的功能，如果有需要，只要再次引入就可以了；
注意：jQuery的底层是通过DOM来实现效果的， zepto 是用css3 来实现的。
Zepto 案例
选择器案例
Zepto 的核心包中只保留了默认的最基本的功能，如果需要其他功能，需要再次引用，例如要使用 selector 就需要再次引入 selector 模块。
Zepto 的使用方式与 jQuery 完全一样，主要是引入的库不同，jQuery是直接引入 jQuery库，Zepto 根据自己需要的功能引入相应的库，运行效率更高，适合移动版开发。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: green;margin: 10px;}</style>
</head>
<body>
<button id="btn">改变第二个标签的颜色</button>
<div></div>
<div></div>
<!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>--> <!-- JQuery 模块--
<script src="lib/zepto.js"></script>
<script src="lib/selector.js"></script><!--引入 selector 模块-->
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('div:eq(1)').css({backgroundColor: 'red'});});});
</script>
</body>
</html>
运行效果：点击按钮，第二个标签颜色变红。
动画案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: green;margin: 10px;}</style>
</head>
<body>
<button id="btn">改变宽度</button>
<div class="box"></div><!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>-->
<script src="lib/zepto.js"></script>
<script src="lib/fx.js"></script>
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('.box').animate({width:'800px'}, 800)});});
</script>
</body>
</html>
运行效果：点击按钮，标签宽度发生改变。
动画案例2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;background-color: green;margin: 10px;}</style>
</head>
<body>
<button id="btn">改变宽度</button>
<div class="box"></div><!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>-->
<script src="lib/zepto.js"></script>
<script src="lib/fx.js"></script>
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('.box').animate({width:'800px',}, 800)});});
</script>
</body>
</html>
运行效果：点击按钮，实现 显示/隐藏 的切换。
验证Zepto特效基于CSS3
jQuery 无法修改背景颜色，而 Zepto 可以，因为 background-color 是 CSS3 的属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 100px;height: 200px;background-color: red;;}</style>
</head>
<body><button id="btn">验证</button><p></p><div class="box"></div>
<!--<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>-->
<script src="lib/zepto.js"></script>
<script src="lib/fx.js"></script>
<script src="lib/fx_methods.js"></script>
<script type="text/javascript">$(function () {$('#btn').on('click', function () {$('.box').animate({'border-radius': '50%','background-color':'green' // jQuery 无法修改背景颜色，Zepto 可以}, 2000)})});
</script></body>
</html>
运行效果：可以看见，使用 Zepto 改变的都是 CSS3 的属性。
Zepto 针对移动端的模块
使用移动端需要添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
禁止触发默认的手势
* { touch-action: none; }
tap() 和 click() 的区别
tap 只作用在移动端，PC端是无效的;
click 在 pc 端和移动端都是 ok 的;
但是我们在移动端要用 tap，因为 tap 比 click 快 200-300ms。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>#box {width: 200px;height: 200px;background-color: red;}</style>
</head>
<body><button id="btn">改变颜色</button><div id="box"></div>
<script src="lib/zepto.js"></script>
<script src="lib/touch.js"></script>
<script type="text/javascript">$(function () {$('#btn').tap(function () {$('#box').css({backgroundColor: 'green'});});});
</script>
</body>
</html>
运行效果：如图切换到移动端，点击按钮改变颜色。
swipe() 演示
swipe() 用法演示：
$($box).swipe(function () { // 只要滑动，都能监听console.log('滑动了!');
});
$($box).swipeLeft(function () { // 监听左滑动// console.log('左滑动了!');$(this).animate({left:'20px'},1000)
});
$($box).swipeRight(function () { // 监听右滑动// console.log('右滑动了!');$(this).animate({left:'220px'},1000)
});
$($box).swipeUp(function () { // 监听上滑动// console.log('上滑动了!');$(this).animate({top:'220px'},1000)
});
$($box).swipeDown(function () { // 监听下滑动// console.log('下滑动了!');$(this).animate({top:'520px'},1000)
});
完整案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><style>*{/*清除默认的手势*/touch-action: none;}.box{width: 100px;height: 100px;background-color: red;position: absolute;left: 50px;top: 80px;}</style>
</head>
<body><div class="box"></div>
<script type="text/javascript" src="lib/zepto.js"></script>
<script src="lib/touch.js"></script>
<script src="lib/fx.js"></script><script type="text/javascript">$(function () {var $box = $('.box');$($box).swipe(function () { // 只要滑动，都能监听console.log('滑动了!');});$($box).swipeLeft(function () { // 监听左滑动// console.log('左滑动了!');$(this).animate({left:'20px'},1000)});$($box).swipeRight(function () { // 监听右滑动// console.log('右滑动了!');$(this).animate({left:'220px'},1000)});$($box).swipeUp(function () { // 监听上滑动// console.log('上滑动了!');$(this).animate({top:'220px'},1000)});$($box).swipeDown(function () { // 监听下滑动// console.log('下滑动了!');$(this).animate({top:'520px'},1000)});});
</script></body>
</html>
运行效果：实现滑动效果，可以上下左右滑动 div。
Zepto 综合案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>*{margin: 0;padding: 0;list-style: none;touch-action: none;box-sizing: border-box;}.box{/*定位约束*/position: relative;}.head{width: 100%;height: 40px;background-color: #ccc;}.head li{width: 50%;height: 40px;float: left;/*伸缩布局*/display: flex;justify-content: center;align-items: center;font-size: 18px;font-weight: bold;}.head li.current{color: #e9232c;}.line{width: 50%;height: 3px;background-color: #e9232c;position: absolute;left: 0;top: 37px;}.list{width: 200%;overflow: hidden;}.list>div{width: 50%;float: left;}.list>div ul{padding: 10px;}.list>div ul li{line-height: 36px;border-bottom: 1px solid #ccc;}.more{width: 100%;text-decoration: none;display: flex;justify-content: center;align-items: center;color: #000;}</style>
</head>
<body><div class="box"><!--头部--><ul class="head"><li class="current">新闻</li><li>科技</li></ul><!--线条--><span class="line"></span><!--中间内容--><div class="list"><div class="list1"><ul><li>撩课新闻撩课新闻撩课1</li><li>撩课新闻撩课新闻撩课2</li><li>撩课新闻撩课新闻撩课3</li><li>撩课新闻撩课新闻撩课4</li><li>撩课新闻撩课新闻撩课5</li></ul><a href="#" class="more">查看更多...</a></div><div class="list2"><ul><li>撩课科技撩课科技1</li><li>撩课科技撩课科技2</li><li>撩课科技撩课科技3</li><li>撩课科技撩课科技4</li><li>撩课科技撩课科技5</li></ul><a href="#" class="more">查看更多...</a></div></div></div><script type="text/javascript" src="lib/zepto.js"></script>
<script src="lib/touch.js"></script>
<script type="text/javascript">$(function () {// 1.1 获取tap事件$('.head li').tap(function () {// 1.1.1 获取索引var index = $(this).index();// 1.1.2 改变选中的样式$(this).addClass('current').siblings().removeClass('current');// 1.1.3 处理线条的样式$('.line').css({transform: 'translateX(' + index * 100 + '%)',transition: 'all 0.25s linear'});// 1.1.4 处理列表的滚动$('.list').css({transform: 'translateX(' + -index * 50 + '%)',transition: 'all 0.25s linear'});});// 1.2 监听左滑动和右滑动var $list = $('.list');$list.swipeLeft(function () {dealWithSwipe(1);});$list.swipeRight(function () {dealWithSwipe(0);});function dealWithSwipe(index) {// 1.1.1 改变选中的样式$('.head li').eq(index).addClass('current').siblings().removeClass('current');// 1.1.2 处理线条的样式$('.line').css({transform: 'translateX(' + index * 100 + '%)',transition: 'all 0.25s linear'});// 1.1.3 处理列表的滚动$('.list').css({transform: 'translateX(' + -index * 50 + '%)',transition: 'all 0.25s linear'});}});
</script>
</body>
</html>
运行效果：
【Zepto笔记】Zepto.js相关推荐
- 前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
- 网易云课堂Nodejs笔记（js Function，css，写法)
网易云课堂Nodejs笔记(js Function,css) CSS position ---网页定位 margin ---元素外边距 padding ---元素内边距 nth-child()选择器 ...
- TS学习笔记04 JS创建对象的方式
TS学习笔记04 JS创建对象的方式 首先我们回顾下JS中创建对象的方式 比如说我按照下面的创建了两个对象分别为stu1和stu2,比如说我现在想给这两个对象都添加一个新的方法,但是这两个对象 ...
- html js 设置样式,原生js设置样式 笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性 用J ...
- html5读取剪切板 内容,实践笔记：js解析剪切板里的excel内容
这次记录的是昨晚一个想法:把excel内容复制到剪切板并转成自己想要的json格式,核心是要把excel内容转json,这部分主要看excel的格式和json如何业务的映射,不展开.倒是通过实践,收获 ...
- js学习笔记2 -- js使用方法
js学习笔记2 -- js使用方法 方法一,使用外部js文件(推荐使用) 方法二,写在script标签中 方法三,写到标签的onclick属性中 方法四,使用超链接 方法一,使用外部js文件(推荐使用 ...
- Buffalo 学习笔记- buffalo.js 源代码注释(一)
Buffalo 学习笔记- buffalo.js 源代码注释(一) 注: 如果转载 请注明 原文地址: http://blog.csdn.net/jianglike18/archive/2009/04 ...
- 笔记：JS仿excel十进制和26进制转换算法
笔记:JS仿excel十进制和26进制转换算法 引子:看过这篇文章用C#实现的十进制和26进制转换算法,觉得在前端以后会用到,遂改写出Javacript的写法. 十进制转26进制: function ...
- 为什么会有jQuery、Dojo、Ext、Prototype、YUI、Zepto这么多JS包？
目前流行的JS框架很多Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx 等.当然还有很多我都不熟悉的 ...
最新文章
- CSS之布局（盒子的尺寸）
- amos看拟合度在哪里看_小程序开发公司哪里强？看这几点
- Swift游戏开发实战教程（大学霸内部资料）
- python【力扣LeetCode算法题库】169 多数元素
- DHCP Client 无法启动 拒绝访问
- java dictionary遍历_C# Dictionary 的几种遍历方法
- zigbee cc2530 灌电流 拉电流 上拉电阻
- 【Ubuntu-opencv3.4.0-Error】对‘cv::Mat::updateContinuityFlag()’未定义的引用
- ifconfig相关
- python中文视频教程-中谷教育python中文视频教程（全38集）
- 今天开始每天一点ffmpeg知识。千里之行 。
- java泛型范围_Java泛型类型中的通配符参数在其范围内的正式条件是什么？
- HTTP协议的工作原理
- 简单快捷 Lambda数组打印
- 京香julia_百度百科
- 项目、习惯以及Todolist的区别
- 《左手数据，右手图表》
- Linux网络编程——千峰物联网笔记
- OGNL学习笔记-OGNL基础
- 关于“幽灵架构”的补充说明3：为什么不会产生“循环引用”