Shulou(Shulou.com)05/31 Report--

This article is mainly about "what's the difference between jquery and zepto". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what's the difference between jquery and zepto?"

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

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

Is 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 for HTML, thus simplifying the development of Web 2.0 applications.

JQuery is designed to be "write Less,Do More", which advocates writing less code and doing more. It encapsulates the common functional code of JavaScript, provides a simple JavaScript design pattern, and optimizes HTML document operation, event handling, animation design and Ajax interaction.

Zepto:

Zepto is a lightweight JavaScript library designed specifically for modern smartphone browsers. Its file size is only about 10K. It is compatible with modern advanced browsers and is mainly used for mobile development. It has API similar to jQuery. As the zepto website says, if you can use jQuery, you will also use zepto.

Similarities:

Zepto was originally developed as a library for mobile and is a lightweight alternative to jQuery because its API is similar to jQuery and its files are smaller.

The biggest advantage of Zepto is its file size, which is only more than 8k, which is the smallest of the fully functional libraries at present. Although not large, the tools provided by Zepto are sufficient to meet the needs of development programs.

Most of the API and method Zepto commonly used in jQuery are available, and there are also some in Zepto that are not found in jQuery.

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

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

Differences:

1. IE browser support

For mobile applications, Zepto has some basic touch events that can be used to do touch screen interaction (tap events, swipe events). Zepto does not support IE browsers. This is not because Thomas Fucks, the developer of Zepto, made a confusion on cross-browser issues, but made a decision to reduce the file size after careful consideration, just like the team of jQuery no longer supports the old version of IE (67.8) in version 2.0.

Because Zepto uses jQuery syntax, it recommends jQuery as a backup library on IE in the documentation. In that way, the program can still be in IE, while other browsers can enjoy the advantage of Zepto in file size, but their API is not fully compatible, so be careful and do adequate testing when using this method.

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

The id on the ul of the jQuery operation is not added.

(function ($) {$(function () {var $list = $('jQuery insert', {id: 'insert-by-jquery'}); $list.appendTo ($(' body'));});}) (window.jQuery); Zepto can add id to ul. Zepto (function ($) {var $list = $('Zepto insert', {id: 'insert-by-zepto'}); $list.appendTo ($(' body'));})

3. The difference between event triggers:

The handler for the load event does not execute when using jquery

(function ($) {$(function () {$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)

When using zepto, the handler for the load event executes

Zepto (function ($) {$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. The difference between width () and height ():

Zepto is determined by the box model (box-sizing), returns the assigned width with .width (), and the result with border with .css ('width'); jQuery ignores the box model and always returns the width / height of the content area (excluding padding, border).

5. The difference of offset ():

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

6. Zepto cannot get the width and height of hidden elements. JQuery can.

7. There is no extend method defined for the prototype in Zepto, but jQuery does.

8. The each method of Zepto can only traverse arrays, not JSON objects.

At this point, I believe you have a deeper understanding of "what's the difference between jquery and zepto". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.