踩坑——关于zepto与jQuery之间的区别分析

一、导语

众所周知，其实zepto就是精简版的jquery，在其上面增加了移动端的适配性和相关的事件方法，基本上一个项目在zepto和jquery之间转换是比较平滑的，但是两者之间其实有不少坑需要特别注意，本文就这些坑做了一些分析。

二、主要区别

• 兼容性区别：

  针对移动端程序，Zepto 有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe 事件），Zepto 是不支持 IE 浏览器的。

• dom操作区别：

  添加 id 时 jQuery 不会生效，而 Zepto 会生效；
  示例：

(function($) {
        $(function() {
          var $insert = $("<p>jQuery 插入</p>", {
            id: "jquery"
          });
          $insert.appendTo($("body"));
        });
      })(window.jQuery);

      Zepto(function($) {
        var $insert = $("<p>Zepto 插入</p>", {
          id: "zepto"
        });
        $insert.appendTo($("body"));
      });

• 事件触发区别：

  使用 jQuery 时 load 事件的处理函数不会执行；使用Zepto 时 load 事件的处理函数会执行

• 事件委托区别：

  zepto 中，选择器上所有的委托事件都依次放入到一个队列中，而在 jquery 中则委托成独立的多个事件

• width()和 height()的区别：

  • jQuery 会忽略盒模型，始终返回内容区域的宽/高(不包含 padding、
    border)
  • Zepto 由盒模型(box-sizing)决定，用.width()返回赋值的 width，用.css('width')返回加 border 等的结果

• offset()的区别：

  Zepto 返回{top,left,width,height}；jQuery 返回{top,left}

• Zepto 无法获取隐藏元素宽高，而 jQuery 可以。

• Zepto 在操作 dom 的 selected 和 checked 属性时尽量使用 prop 方法，在读取属性值的情况下优先于 attr。

• Zepto 相对于 jQuery 来说是有许多选择不支持的，比如：
  （1） 基本伪类选择器：first、:even 、:odd 、:eq(index) 、:gt(index)、
  :last 、:lt(index)、:header 等。
  （2）内容伪类：:contains(text) 、:empty、 :has(selector)、 :parent 等。
  （3）可见性伪类：:hidden 、:visible 等。
  （4）属性选择器：[attribute!=value] 等。
  （5）表单伪类： :input、:text、 :password、 :radio、 :checkbox、
  :submit、:image、:reset、:button、:file、:hidden 等。
  （6）表单对象属性：:selected 等。