The difference between zepto and jquery: The difference between zepto and zepto uses 8 Summary, zeptojquery

The difference between zepto and jquery: The difference between zepto and zepto uses 8 Summary, zeptojquery

When talking about the cause of a strange event, we naturally think of the difference between the two.

The first is the effect:

In jquery, there are two effects: fadeIn and fadeOut, which are used to achieve the effect of fade-out. This is naturally a common effect on the PC end. Then Mr Huang, a member of our front-end group, naturally thinks that the mobile phone page can also be more dazzling, so he adds the gradual effect of the login box. The buffering effect for users is good.

However, zepto does not contain fadeIn or fadeOut. What should I do? Is it true that Mr Huang's wish cannot be fulfilled? No. I will do it. There is an animation effect (animate) in zepto. it is good to use this effect to achieve gradual hiding. We reference the instructions in the Chinese documents in the http://www.html-5.cn/Manual/Zepto/#animate documentation in detail to introduce the animation effects of animation. Of course, animate is not omnipotent, and there are also many zepto effects that jquery can do. Of course, although the gradient effect is pretty, on Android machines, due to performance reasons, choppy often occurs, and some ROM can modify the browser's native effect at will, as a result, the dazzling animations look awkward and malformed. After discussing this with Mr Huang, the blogger decided to abandon the gradually hidden form, and the directly hidden form was more concise and clear.

Weird ajax:

Jquery knows $. ajax (). This method is used to implement asynchronous data requests. Of course, this is also a new feature in zepto, and zepto is used almost the same as jquery. Let's write the simplest ajax.

$.ajax('test.php',{"data":[{"name":"systme","hacked":"systme"}]},function(){alert("ok")});

OK, it is such a simple request. php directly dumps the data I uploaded. Let's take a look at what went wrong.

First, jquery requests.

We can clearly see that an array is passed in, so we should sketch it in the form of data [{"name": "Me", "hacked ": "commit me.

Let's take a look at zepto's ajax request.

Let's take a look. The subscript 0 is gone, and the subscript 0 is gone. What does it mean. Let's restore the array data [{"name": "mongome" },{ "hacked": "mongome"}]. That's right. You really didn't see it wrong, zepto ajax directly changes the original array structure. the serialization of arrays by zepto ajax causes array parsing problems. This problem has brought me a lot of trouble. If this problem makes it unnecessary for me to use jquery again, after discussing with the back-end attacker, the blogger decided to directly transfer the string to the backend, And the backend parses the string. At this point, the strange problem is solved, but this solution is not perfect. We need to continue to study the implementation principle of its source code.

The blogger has another solution here. We can use pure js to implement a post request. The post request of pure js is not like $. ajax is so convenient. The & connector must be used for parameter passing. Our parameter is actuallyData [0] [name] = mongome & data [0] [hacked] = mongomeIn this way, we can use the post File of pure js to upload it.

1. The Zepto object cannot customize events.

For example, run $ ({}). bind ('cust ', function (){});
Result: TypeError: Object has no method 'addeventlistener'
The solution is to create a node that is out of the Document Stream as the event object:

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

 

2. selector expression of Zepto: the value in [name = value] must be enclosed by double quotation marks "or single quotation marks ".

Example: $ ('[data-userid = 123123123]')
Result: Error: SyntaxError: DOM Exception 12

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

 

2-1.zepto selector cannot select $ ("div [name! = 'Abc'] ") Element

 

2-2.zepto: The method $ ('option [selected] ') similar to jq cannot be used to obtain the selected option of a select element, because the selected attribute is not a standard attribute of css.

$ ('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
However, you can use $ this. find ("option: not (: disabled)") to obtain elements with the disabled attribute in the select statement. Because disabled is a standard attribute

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

 

 

2-3. zepto tries to use the prop method when operating dom's selected and checked attributes. The following is an official description:

 

3. zepto is written according to the standard browser. Therefore, only width () and height () are provided for the node size method, saving innerWidth (), innerHeight (), outerWidth (), outerHeight ()

Zepto. js: determined by the box-sizing Model
JQery: Ignore the box model and always return the width/height of the content area (excluding padding and border). The solution is to use. css ('width') instead of. width ().

 

 

3-1. Retrieve the width of the border triangle

Suppose a small triangle is drawn using the following HTML and CSS:

 

 

[Html]View plain copy print?

1. <Div class = "caret"> </div>
2. . Caret {
3. Width: 0;
4. Height: 0;
5. Border-width: 0 20px 20px;
6. Border-color: transparent blue;
7. Border-style: none dotted solid;
8. }

JQuery returns both. width () and. css ('width'), and the height is the same;
Zepto returns with. width (), and uses. css ('width') to return 0px.
Therefore, in this scenario, jQuery uses. outerWidth ()/. outerHeight (); Zepto uses. width ()/. height ().

 

 

3-2.offset ()

Zepto. js: returns top, left, width, and height.
JQuery: returns width and height.

 

 

 

3-3. Hide Elements

Zepto. js: the width and height cannot be obtained;
JQuery: available.

 

 

4. The each method of Zepto can only traverse arrays, but cannot traverse JSON objects.

 

5. Zepto's animate method parameter description: click details-> zepto's animate usage

 

 

6. The jsonp callback function name of zepto cannot be customized.

 

7. DOM operation differences

Jq code:

[Html]View plain copy 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. });
8. }) (Window. jQuery );

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

 

Zepto code:

[Html]View plain copy 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. Differences between event triggers

Jq code:

[Html]View plain copy print?

1. (Function ($ ){
2. $ (Function (){
3. $ Script = $ ('<script/> ',{
4. Src: 'http: // cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js ',
5. Id: 'ui-jquery'
6. });
8. $ Script. appendTo ($ ('body '));
10. $ Script. on ('load', function (){
11. Console. log ('jq script loaded ');
12. });
13. });
14. }) (Window. jQuery );

When jQuery is used, the load event handler does not execute

 

Zepto code:

[Html]View plain copy 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. });
7. $ Script. appendTo ($ ('body '));
9. $ Script. on ('load', function (){
10. Console. log ('zepto script loaded ');
11. });
12. });

When Zepto is used, the load event processing function is executed.