Are jquery and zepto the same?-Front-end Q&A-php.cn

Are jquery and zepto the same?

WBOY

Release： 2022-04-15 11:02:30

Original

2380 people have browsed it

jquery and zepto are different. Although both are JavaScript libraries, there are differences: 1. When the Dom operation adds an id, jquery will not take effect, but Zepto will take effect; 2. jquery will not execute the processing function of the load event, while zepto will execute the processing function of the load event. .

Are jquery and zepto the same?

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

Are jquery the same as zepto

jquery and zepto are different

##jquery：

jQuery is a concise and fast JavaScript library that can be used to simplify event handling, HTML document traversal, Ajax interaction and animation for rapid website development. jQuery simplifies client-side scripting of HTML, thereby simplifying the development of Web 2.0 applications.

The purpose of jQuery design is "write Less, Do More", which means writing less code and doing more things. It encapsulates common JavaScript function codes, provides a simple JavaScript design pattern, and optimizes HTML document operations, event processing, animation design and Ajax interaction.

zepto:

Zepto is a lightweight JavaScript library specially launched for modern smartphone browsers. Its file size Only about 10K, compatible with modern advanced browsers, mainly used for mobile development, it has an API similar to jQuery. As the zepto official website says, if you can use jQuery, then you will also use zepto.

Same points:

Zepto was originally a library developed for mobile and is a lightweight alternative to jQuery because of its API Similar to jQuery, but smaller file size.

The biggest advantage of Zepto is its file size, which is only over 8k. It is the smallest among the currently fully functional libraries. Although it is not large, the tools provided by Zepto are sufficient to meet the needs of developing programs.

Most of the commonly used APIs and methods in jQuery are available in Zepto, and there are some in Zepto that are not found in jQuery.

In addition, because most of Zepto's APIs are compatible with jQuery, it is extremely easy to use. If you are familiar with jQuery, you can easily master Zepto.

You can reuse many methods in jQuery in the same way, and you can also string methods together to get more concise code, without even looking at its documentation.

Differences:

1. IE browser support

For mobile programs , Zepto has some basic touch events that can be used for touch screen interaction (tap events, swipe events). Zepto does not support IE browser. This is not because Zepto developer Thomas Fucks is confused about cross-browser issues, but It is a decision made after careful consideration to reduce file size, just like the jQuery team no longer supports older versions of IE (6 7 8) in version 2.0.

Because Zepto uses jQuery syntax, it recommends using jQuery as a fallback library on IE in its documentation. That way the program can still run in IE, and other browsers can enjoy the file size advantage of Zepto. However, the APIs of the two are not fully compatible, so be careful and do sufficient research when using this method. test.

2. The difference between Dom operations: jQuery will not take effect when adding id, but Zepto will take effect.

The id on the ul of the jQuery operation will not be added.

(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;));
});

Copy after login

3. Differences in event triggering:

The handler function of the load event will not be executed when using jquery;

(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);

Copy after login

The load event occurs when using zepto The processing function will execute

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;);
    });});

Copy after login

4, the difference between width() and height():

Zepto is determined by the box model (box-sizing), using .width () returns the assigned width, and uses .css('width') to return the result of adding border, etc.; jQuery will ignore the box model and always return the width/height of the content area (excluding padding and border).

5. The difference between offset():

Zepto returns {top, left, width, height}; jQuery returns {width, height}.

6. Zepto cannot obtain the width and height of hidden elements, but jQuery can.

7. Zepto does not define the extend method for the prototype but jQuery does.

8. Zepto's each method can only traverse arrays, not JSON objects.