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

3、事件觸發的區別：

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

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

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

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

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影片教學

#

以上是jquery和zepto一樣嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！