定义
Zepto是一个轻量级的针对现代高级浏览器的 JavaScript 库, 它和 jquery类似的 api。如果你会用 jquery,那么你也会用 zepto。
与jQuery的区别
1. 相同点: 都是js库,提供了相同的api
2. 不同点:
1) 大小不同: zepto 体积小 轻量级
2) zepto针对移动端 jQuery针对pc端
3) 兼容性: zepto 兼容 高级浏览器(现代浏览器)
jquery 2.0版本之后 兼容高级浏览器
4) zepto 将js文件分为了很多子模块 ,并且提供了专一针对于移动端的touch
5) zepto 没有提供noConflict 方法 ,无法释放$的使用权
6) zepto 中 $.extend() 只能进行浅拷贝或者深拷贝 ,不可以添加静态方法
zepto 没有$.fn.extend方法 ,但是提供了$.fn方法 在zepto 原型添加实例方法
7) 在dom上的不同
width()和height() 方法: zepto包含宽 高、padding、border
jquery只包含 宽度 高度
offset()方法 : zepto包含 left top width(包含width padding border) height
jQuery包含 left top
innerWidth() 和 outerWidth(): jquery包含这两种方法 而 zepto不包含这两种方法
jquery可以获取隐藏元素的宽高 zepto 不可以获取隐藏元素的宽高
touch方法:
tap单点事件 singleTap延迟单点事件 longTap长按时间 doubleTap双击事件
swipeLeft左滑事件 swipeRight右滑事件 swipeUp上划事件 swipeUp下滑事件
$('.box').tap(function(){
console.log('单点事件tap')
})
$('.box').-(function(){
console.log('有延迟的单点事件singleTap')
})
$('.box').doubleTap(function(){
console.log('双击事件doubleTap')
})
$('.box').longTap(function(){
console.log('长按事件longTap')
})
$('.box').swipeLeft(function(){
console.log('左划事件,从右往左划swipeLeft')
})
$('.box').swipeRight(function(){
console.log("右划事件,从左往右划swipeRight")
})
$('.box').swipeUp(function(){
console.log('上划事件,从下往上划swipeUp')
})
$('.box').swipeDown(function(){
console.log("下划事件,从上往下划swipeDown")
})