JQuery和Zepto的差异（部分）

1.width()/height()

• Zepto.js: 由盒模型（box-sizing）决定

jQuery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding、border）

jQuery 官方的说明：

Note that .width() will always return the content width, regardless of the value of the CSS box-sizingproperty. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css("width") rather than .width().

解决方式就是在 jQuery 中使用 .css(‘width‘)，而不是 .width()。

这点上 jQuery 的处理方式是值得商榷的，比如下面的例子，$(‘.box‘).css(‘height‘) 仍然返回 20px，这不是扯蛋么：

<style> ?.box { ???box-sizing: border-box; ???padding: 10px; ???height: 0; ?}</style><div class="box"></div>

边框三角形宽高的获取

假设用下面的 HTML 和 CSS 画了一个小三角形：

<div class="caret"></div>

.caret { ?width: 0; ?height: 0; ?border-width: 0 20px 20px; ?border-color: transparent transparent blue; ?border-style: none dotted solid;}

• jQuery 使用 .width() 和 .css(‘width‘) 都返回 0，高度也一样；
• Zepto 使用 .width() 返回 40，使用 .css(‘width‘) 返回 0px。

所以，这种场景，jQuery 使用 .outerWidth()/.outerHeight()；Zepto 使用 .width()/.height()。

2.offset()

• • Zepto.js: 返回 top、left、width、height
  • jQuery: 返回 width、height

$(htmlString, attributes)

• jQuery 文档
• Zepto 文档)

DOM 操作区别

$(function() { ?var $list = $(‘<ul><li>jQuery 插入</li></ul>‘, { ???id: ‘insert-by-jquery‘ ?}); ?$list.appendTo($(‘body‘));});

jQuery 操作 ul 上的 id 不会被添加；Zepto 可以在 ul 上添加 id。

事件触发区别

$script = $(‘<script />‘, { ?src: ‘http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js‘, ?id: ‘ui-jquery‘});$script.appendTo($(‘body‘));$script.on(‘load‘, function() { ?console.log(‘jQ script loaded‘);});

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

JQuery和Zepto的差异（部分）

原文地址：https://www.cnblogs.com/vivaxiaonan/p/9131934.html