jquery和zepto有什么區別

本篇內容主要講解“jquery和zepto有什么區別”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jquery和zepto有什么區別”吧!

jquery和zepto是不一樣的。二者雖然都是JavaScript庫，但是有區別：1、Dom操作添加id時，jquery不會生效，而Zepto會生效；2、jquery不會執行load事件的處理函數，zepto會執行load事件的處理函數。

本教程操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。

jquery和zepto一樣嗎

jquery和zepto是不一樣的

jquery：

jQuery 是一個簡潔而快速的 JavaScript 庫，可用于簡化事件處理，HTML 文檔遍歷，Ajax 交互和動畫，以便快速開發網站。jQuery 簡化了 HTML 的客戶端腳本，從而簡化了 Web 2.0 應用程序的開發。

jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

zepto:

Zepto是一個輕量級的、專門為現代智能手機瀏覽器推出的JavaScript庫，它的文件大小只有10K左右，兼容現代高級瀏覽器，主要用于移動端的開發，它有著與jQuery類似的API。就像zepto官網說的如果你會使用jQuery，那你也會用zepto。

相同點：

Zepto最初是為移動端開發的庫，是jQuery的輕量級替代品，因為它的API和jQuery相似，而文件更小。

Zepto最大的優勢是它的文件大小，只有8k多，是目前功能完備的庫中最小的一個，盡管不大，Zepto所提供的工具足以滿足開發程序的需要。

大多數在jQuery中·常用的API和方法Zepto都有，Zepto中還有一些jQuery中沒有的。

另外，因為Zepto的API大部分都能和jQuery兼容，所以用起來極其容易，如果熟悉jQuery，就能很容易掌握Zepto。

你可用同樣的方式重用jQuery中的很多方法，也可以方面地把方法串在一起得到更簡潔的代碼，甚至不用看它的文檔。

不同點：

1、IE瀏覽器的支持

針對移動端程序，Zepto有一些基本的觸摸事件可以用來做觸摸屏交互（tap事件、swipe事件），Zepto是不支持IE瀏覽器的，這不是Zepto的開發者Thomas Fucks在跨瀏覽器問題上犯了迷糊，而是經過了認真考慮后為了降低文件尺寸而做出的決定，就像jQuery的團隊在2.0版中不再支持舊版的IE（6 7 8）一樣。

因為Zepto使用jQuery句法，所以它在文檔中建議把jQuery作為IE上的后備庫。那樣程序仍能在IE中，而其他瀏覽器則能享受到Zepto在文件大小上的優勢，然而它們兩個的API不是完全兼容的，所以使用這種方法時一定要小心，并要做充分的測試。

2、Dom操作的區別：添加id時jQuery不會生效而Zepto會生效。

jQuery操作的 ul 上的 id 不會被添加。

(function($) {
  $(function() {
    var $list = $('<ul><li>jQuery 插入</li></ul>', {
      id: 'insert-by-jquery'
    });
    $list.appendTo($('body'));
  });})(window.jQuery);
Zepto 可以在 ul 上添加 id。
Zepto(function($) {
  var $list = $('<ul><li>Zepto 插入</li></ul>', {
    id: 'insert-by-zepto'
  });
  $list.appendTo($('body'));
});

3、事件觸發的區別：

使用jquery時load事件的處理函數不會執行；

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

使用zepto時load事件的處理函數會執行

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

4、width()和height()的區別：

Zepto由盒模型(box-sizing)決定，用.width()返回賦值的width，用.css('width')返回加border等的結果；jQuery會忽略盒模型，始終返回內容區域的寬/高(不包含padding、border)。

5、offset()的區別：

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

6、Zepto無法獲取隱藏元素寬高，jQuery 可以。

7、Zepto中沒有為原型定義extend方法而jQuery有。

8、Zepto 的each 方法只能遍歷 數組，不能遍歷JSON對象。

到此，相信大家對“jquery和zepto有什么區別”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！