The difference between Zepto and jquery, the different use of Zepto 8 summary

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 '] ")

The 2-1.zepto selector has no way to select elements of $ ("div[name!= ' abc ')")

2-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

Reference URL: https://github.com/madrobby/zepto/issues/503

2-3, Zepto in the operation of the DOM selected and checked properties when possible to use the Prop method, the following is the official note:

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

3-1. Get the width of the border triangle

Suppose you draw a small triangle with the following HTML and CSS:

[HTML]View Plaincopy print?

1. <div class= "caret" ></div>   
2. . caret {  
3. &NBSP;&NBSP;WIDTH:&NBSP;0;&NBSP;&NBSP;
4.   height: 0;  
5.   border-width: 0 20px  20px;  
6.   border-color: transparent transparent blue;    
7. &NBSP;&NBSP;BORDER-STYLE:&NBSP;NONE&NBSP;DOTTED&NBSP;SOLID;&NBSP;&NBSP;
8. }   

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, this scenario, JQuery uses. Outerwidth ()/. Outerheight (); Zepto uses. Width ()/. Height ().

3-2.offset ()

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

3-3. Hide elements

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

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

5.Zepto Animate method Parameter Description: Details click- usage of animate in Zepto

6.zepto JSONP callback function name cannot be customized

7.DOM Operational Differences

JQ Code:

[HTML]View Plaincopy print?

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

The ID on the jQuery operation UL will not be added.

Zepto Code:

[HTML]View Plaincopy print?

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

Zepto can add ID on ul.

8. Event triggering differences

JQ Code:

[HTML]View Plaincopy print?

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

The handler function for the Load event does not execute when using JQuery

Zepto Code:

[HTML]View Plaincopy print?

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 function for the Load event is executed when Zepto is used.

The difference between Zepto and jquery, the different use of Zepto 8 summary