The difference between jquery and Zepto

1. zepto objects cannot customize events

For example, execute: $ ({}). bind (' Cust ', function () {});
Results: Typeerror:object has no method ' AddEventListener '
The workaround is to create a node that is out of the document flow as the event object :

For example: $ ('). bind (' Cust ', function () {});

2.zepto selector expression: [Name=value] value must be enclosed in double quotation marks "or single quotes"

For example execution: $ (' [data-userid=123123123] ')
Results: Error:SyntaxError:DOM Exception 12

Workaround: $ (' [data-userid= ' 123123123] "') or $ (" [data-userid= ' 123123123 '] ")

(1)the Zepto selector has no way to select the element of $ ("div[name!= ' abc ')")

(2) zepto the option to get the SELECT element cannot be used in a method like JQ $ (' option[selected] ') because the selected property is not a standard property of CSS

You should use $ (' option '). Not (function () {return!this.selected})
For example: JQ: $this. Find (' option[selected] '). attr (' data-v ') * 1
Zepto: $this. Find (' option '). Not (function () {return!this.selected}). attr (' data-v ') * 1
But fetching elements with the disabled attribute in select can be used $this. Find ("Option:not (:d isabled)") because disabled is a standard attribute

3.Zepto is written according to the standard browser, so the method for node size only provides width () and height (), eliminating the innerwidth (), Innerheight (), Outerwidth (), Outerheight ()

Zepto.js: Determined by the box model (box-sizing)
Jqery: Ignores the box model, always returns the width/height of the content area (not including padding, border) The solution is to use. css (' width ') instead of. Width ().

(1) Width and height of the border triangle get

JQuery uses. Width () and. css (' width ') to return, and the height is the same;
Zepto returns using. Width () and returns 0px using. css (' width ').
So,JQuery uses. Outerwidth ()/. Outerheight (); Zepto uses. Width ()/. Height () .

(2) offset ()

Zepto.js: Returns top, left, width, height
JQuery: return width, height

(3) Hidden elements

Zepto.js: Unable to obtain wide height;
JQuery: can be obtained.

4. Each method of Zepto can only traverse an array and cannot traverse a JSON object

5.Zepto JSONP callback function name cannot be customized

6. Dom Operation differences

JQ Code

1. (function ($)  {  
2.   $ (function ()  {  
3.     var $list =  $ (' <ul><li>jquery  insert </li ></ul> ', {   
4.       id:  ' Insert-by-jquery '   
5.      });   
6.      $list. AppendTo ($ (' body '));   
7. &NBSP;&NBSP;});   
8. }) (Window.jquery);  

Zepto Code

1. Zepto (function ($) {
2. var $list = $ ('<ul><li>zepto insert </li></ UL> ', {
3. ID: ' Insert-by-zepto '
4. });
5. $list. AppendTo ($ (' body '));
6. });

jQuery operation on UL ID will not be added, Zepto can add ID on UL

7. Event triggering differences

JQ Code

2. (function ($) {
4. $ (function () {
6. $script = $ ('<script /> ', {
8. SRC: ' http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js ',
10. ID: ' Ui-jquery '
12. });
16. $script. AppendTo ($ (' body '));
20. $script. On (' Load ', function () {
22. Console.log (' JQ script loaded ');
24. });
26. });
28. }) (Window.jquery);

Zepto Code

1. zepto (function ($)  {    
2.    $script = $ (' <script  /> ',  {  
3.     src:  ' Http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js ',   
4.     id:  ' Ui-zepto '   
5. &NBSP;&NBSP;});   
6.   
7.    $script. AppendTo ($ (' body '));  
8.   
9.    $script. On (' Load ',  function ()  {  
10.     console.log (' zepto script loaded ');   
11. &NBSP;&NBSP;});   
12. });  

The handler for the Load event does not execute when using jquery, and the handler function for the Load event when using Zepto executes

The difference between jquery and Zepto