Zepto

2016-08-11

Zepto 官方文档

一. 概述

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。

二. 下载 Zepto

  1. 打开cdn链接
  2. 搜索 zepto
  3. 复制 <script> 标签

    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script> //开发版
    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js"></script> //生成版

三. Zepto 优点

  1. Zepto 是为现代智能手机浏览器推出的Javascript框架，有着独特的手指的触摸事件（tap、swipe…），且不再支持IE浏览器。
  2. 压缩后的 Zepto.min.js 大小只有21K， 使用服务器端压缩后大小只有5~10K，非常的小,功能很齐全,兼容现代高级浏览器。
  3. 轻量，极大的减轻了整个app的负载。

四. Zepto 和 Jquery 区别：

  1. Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery
  2. Zepto的设计目的是提供 jquery 的类似的API，但并不是100%覆盖 jquery
  3. Zepto.js语法和jquery起码百分之90相似，主要做移动端框架，和jquery mobile是一个类型的概念.

    jQuery电脑专用 （但他又开发出了jquery-mobile,专门用于手机）。

  4. Zepto.js 的底层是通过css3 来实现的，jQuery的底层是通过DOM来实现效果的

五. Zepto与jquery使用上的区别

（一）. Zepto 属性

zepto在操作dom的selected和checked属性时尽量使用prop方法
读取或设置DOM元素的属性值，它在读取属性值的情况下，优于attr.

（二）. Zepto移动端事件

  1. swipe，

  2. swipeLeft,

  3. swipeRight,

  4. swipeUp,

  5. swipeDown,

  6. tap, singeTap, doubleTap, longTap

    例子

    1
    2
    3
    4
    $('#items li').swipe(function(){
        $('.delete').hide()
        $('.delete', this).show()
    })
    1
    2
    3
    $('.delete').tap(function(){
        $(this).parent('li').remove()
    })

注意：

  1. 如果想在移动设备上使用swipe事件，先要清除系统默认的手势事件,清楚系统默认的事件 
    1
    2
    3
    *{
    touch-action: none;//清除系统默认的手势事件
    }
  2. tap只作用在移动端，PC端是无效的
    click在pc端和移动端都是ok的
    但是我们在移动端要用tap，因为 tap 比 click 快200-300ms。

（三）. 触发事件的区别

使用jquery 时，load 事件的处理函数不会执行，使用zepto时 load事件的处理函数会执行

jquery 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function($) { 
  $(function() {     
    $script = $('<script />', { 
      src: 'http://cdn.xxx', 
      id: 'ui-jquery' 
    }); 
   
    $script.appendTo($('body')); 
   
    $script.on('load', function() { 
      console.log('jQ script loaded'); 
    }); 
  }); 
})(window.jQuery);

Zepto 代码

1
2
3
4
5
6
7
8
9
10
11
12
Zepto(function($) {   
  $script = $('<script />', { 
    src: 'http://cdn.xxx', 
    id: 'ui-zepto' 
  }); 
   
  $script.appendTo($('body')); 
   
  $script.on('load', function() { 
    console.log('zepto script loaded'); 
  }); 
});

（四）. DOM 操作区别

添加id时，jquery 不会生效 而Zepto会生效

jquery 代码

1
2
3
4
5
6
7
8
(function($) { 
  $(function() { 
    var $list = $('<ul><li>jQuery 插入</li></ul>', { 
      id: 'insert-by-jquery' 
    }); 
    $list.appendTo($('body')); 
  }); 
})(window.jQuery);

Zepto 代码

1
2
3
4
5
6
Zepto(function($) {   
  var $list = $('<ul><li>Zepto 插入</li></ul>', { 
    id: 'insert-by-zepto' 
  }); 
  $list.appendTo($('body')); 
});

更多内容请参考链接

六. Zepto和jquery可以同时使用吗 ?

一般情况下，我们在选择这类库的时候都 只用一个，要么jquery,要么Zepto
但是遇到某些特殊情况时，需要引入某个插件，可能会出现两个共用，这时需要对这两个库进行一些处理。

  • 方法一：
    声明下 var jq=$.noConflict();
    这样就可以用jq代替jquery的$

  • 方法二：
    window.$$ = window.Zepto = Zepto;
    这样就可以用$$替代zepto

CATALOG