zepto

定义

        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")

            })