JQuery和Zepto的差异(部分)

Posted Viva_nan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery和Zepto的差异(部分)相关的知识,希望对你有一定的参考价值。

1.width()/height()

  • Zepto.js: 由盒模型(box-sizing)决定

jQuery: 忽略盒模型,始终返回内容区域的宽/高(不包含 paddingborder

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: 返回 topleftwidthheight
    • jQuery: 返回 widthheight

$(htmlString, attributes)

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的差异(部分)的主要内容,如果未能解决你的问题,请参考以下文章

zepto和jquery的区别,zepto的不同使用8条小结

移动端日历选择控件(支持Zepto和JQuery)

jquery和zepto的异同

jQuery与Zepto的异同

jQuery与Zepto的异同

zepto