What are the differences between jQuery and Zepto

Differences: 1. In Zepto, a large amount of jQuery compatible code has been removed for the mobile terminal; 2. The handler function of the load event will not be executed when using jQuery; the handler function of the load event will be executed when using Zepto; 3 , zepto does not define the extend method for the prototype, but jquery does.

The operating environment of this tutorial: windows10 system, jquery2.2.4, this article is applicable to all brands of computers.

The difference between jQuery and Zepto

1. Zepto is more lightweight

2. Zepto is a streamlined version of jQuery, removing a lot of them for mobile terminals jQuery compatible code

3. Some APIs are implemented differently

1). For mobile programs, Zepto has some basic touch events that can be used for touch screen interaction (tap events, swipe event), Zepto does not support IE browser.

2), the difference between DOM operations: jQuery will not take effect when adding id, but Zepto will take effect

(function($) {
     $(function() {
         var $insert = $(&#39;<p>jQuery 插入</p>&#39;, {
             id: &#39;insert-by-jquery&#39;
         });
         $insert.appendTo($(&#39;body&#39;));
     });
})(window.jQuery);   
// <p>jQuery 插入<p>

Zepto(function($) {  
    var $insert = $(&#39;<p>Zepto 插入</p>&#39;, {
        id: &#39;insert-by-zepto&#39;
    });
    $insert.appendTo($(&#39;body&#39;));
});
// <p id="insert-by-zepto">Zepto 插入</p>

3), the difference between event triggering: when using jquery, the load event handler will not Execution; when using zepto, the handler function of the load event will be executed

(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(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), the difference between event delegation: in zepto, all delegated events on the selector are put into a queue in turn, while in jquery Then delegate it into multiple independent events

5), the difference between width() and height(): zepto is determined by the box model (box-sizing), use .width() to return the assigned width, use . css('width') returns the results of border, etc.; jquery ignores the box model and always returns the width/height of the content area (excluding padding and border).

6), the difference between offset(): zepto Return {top,left,width,height}; jquery returns {width,height}. zepto cannot obtain the width and height of hidden elements, jquery can

7), zepto does not define the extend method for the prototype, but jquery has

8), zepto's each method can only traverse the array, not Iterate over JSON objects.

jQuery and Zepto.js look similar on the surface. In fact, some details are very different. Supporting jQuery and Zepto.js at the same time is a thankless task. This should be the reason why Foundation 5 gave up supporting Zepto. reason.

For more programming-related knowledge, please visit: Programming Video Course! !

The above is the detailed content of What are the differences between jQuery and Zepto. For more information, please follow other related articles on the PHP Chinese website!