jQuery 与 Zepto 的区别

jQuery 与 Zepto 的区别

• jquery

  定义：

  • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。
  • jQuery设计的宗旨是“write Less，Do More”。
  • 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
  • 核心特性：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

  语言特点：

  • 快速获取 DOM 元素，强大的 css 选择器
  • 提供页面动画效果，如淡入淡出、元素移除等动态特效
  • 创建 ajax 无刷新页面
  • 增强的事件处理，提供了各种页面事件，它的事件处理器消除了各种浏览器兼容性问题
  • 修改网页内容，如更改网页的文本、插入或者翻转网页图像
  • 提供对JavaScript语言的增强，提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作

• Zepto
  定义:

  • Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api
  • Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery

  特点：

  • Zepto是为现代智能手机浏览器推出的Javascript 框架, 有着和jQuery相似的语法。体积小功能齐全，提供了触摸屏事件，不支持IE

• 不同：

  1. DOM 操作：添加id时jquery不会生效，zepto会生效
  2. 事件触发的区别：jquery的load不会执行，zepto的load会执行
  3. 事件委托的区别：

         var $doc = $(document);
         $doc.on('click', '.a', function () {
             alert('a事件');
             $(this).removeClass('a').addClass('b');
         });
         $doc.on('click', '.b', function () {
             alert('b事件');
         });

在Zepto中，当a被点击后，依次弹出了内容为”a事件“和”b事件“，说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发.a上面的委托弹出”a事件“。Zepto中，document上所有的click委托事件都依次放入到一个队列中，点击的时候先看当前元素是不是.a，符合则执行，然后查看是不是.b，符合则执行。而在jQuery中，document上委托了2个click事件，点击后通过选择符进行匹配，执行相应元素的委托事件。

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

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

6.Zepto中没有为原型定义extend方法而jQuery有。

7.Zepto 的each 方法只能遍历数组，不能遍历JSON对象。

8.Zepto在操作dom的selected和checked属性时尽量使用prop方法，在读取属性值的情况下优先于attr。Zepto获取select元素的选中option不能用类似jQuery的方法$('option[selected]'),因为selected属性不是css的标准属性。应该使用$(‘option’).not(function(){ return !this.selected })。

　9.Zepto不支持的选择器：
　

• 二者同时使用产生的冲突：

jquery 用 noConflict 改掉 $ 符
    var jq=$.noConflict();
zepto => window.$$=window.Zepto = Zepto 用$$ 代替zepto里的$