zepto
Zepto 是移动端开发框架,是 jQuery 的轻量级代替品;API 及语句同 jQuery 相似,但文件更小(可压缩至 8KB)。是目前功能完备的库中最小的一个。随着移动端的愈加火爆,目前很多 HTML5 的框架都在支持移动方向,Zepto 就是 jQuery 的移动端版本, 可以看做是一个轻量级的jQuery。*如果你会用jQuery,那么你也会用Zepto*, Zepto的设计目的是提供 jQuery的类似的 API,但并不是 100%覆盖 jQuery 。Zepto 有一个 5-10k 的通用库、下载并快速执行、有一个熟悉通用的 API,所以你能把你主要的精力放到应用开发上。
Zepto.js 中文文档:https://zeptojs.bootcss.com/
1)Zepto.js 特点
1、针对的是移动端
2、轻量级,压缩版本只有 9.6KB
3、语法大部分同 jQuery 一样,学习成本低,上手快
2)jQuery 和 Zepto 的区别在哪里
1、jQuery 更多是在 PC 端被应用,因此,考虑了很多低级浏览器的的兼容性问题;而Zepto.js 则是直接抛弃了低级浏览器的适配问题,显得很轻盈;
2、Zepto.js 在移动端被运用的更加广泛;
3、jQuery 的底层是通过 DOM 来实现效果的,Zepto.js 是用 css3 来实现的;
4、Zepto.js 可以说是轻量级版本的 jQuery
2、zepto模块
为了保持原码的精简,Zepto 默认只加载一些模块,当你需要某些模块时,可以把对应的模块加载进来。
3、zepto的使用
<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/fx.js"></script>
<script>
$('#box').on('tap', function () {
console.log('哥们,点我了');
$(this).animate({
width: 300,
height: 300,
background: 'yellow'
}, 3000, function () {
console.log('哥们,我运动完成了');
})
});
</script>
1、获取元素宽高
var box = $('#box');
// Zepto 的 width()、height()是根据盒模型决定的,包含 padding 和 border 的值。而jq仅仅返回元还给的宽高
// Zepto 中没有 innerWidth()和 outerWidth()系列
console.log(box.width()); // jq 100 zepto 122
console.log(box.height()); // jq 100 zepto 122
console.log(box.innerWidth()); // jq 120
console.log(box.outerWidth()); // jq 122
var box3 = $('.box3');
// jq: {top: 108, left: 88}
// zepto: {left: 88, top: 108, width: 199, height: 100}
// jq的offset只返回元素的位置
// zepto的offset队了返回元素的位置,还返回元素的宽高,但是宽高包含padding+border
console.log(box3.offset());
// 同jq中的position,返回元素离它最近的有定位属性的父级的距离
console.log(box3.position());
原生事件
touchcancel (事件被打断)
touchend (触摸结束)
touchmove (触摸中)
touchstart (触摸开始)
以下均为zepto模拟出来的移动端事件
var box = $('#box');
// 点击
box.on('tap', function () {
console.log('tap');
})
// singleTap 和 doubleTap 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)
// 单击
box.on('singleTap', function () {
console.log('singleTap');
})
// 双击
box.on('doubleTap', function () {
console.log('doubleTap');
})
// 长按: 当一个元素被按住超过 750ms 触发
box.on('longTap', function (ev) {
console.log('longTap');
});
// 滑动 : 当元素被划过(同一个方向滑动距离大于 30px)时触发
box.on('swipe', function () {
console.log('swipe');
});
box.on('swipeLeft', function () {
console.log('swipeLeft');
});
box.on('swipeUp', function () {
console.log('swipeUp');
});
box.on('swipeRight', function () {
console.log('swipeRight');
});
box.on('swipeDown', function () {
console.log('swipeDown');
});