The difference between Zepto and jquery using grammar

The first is the effect:

jquery has Fadein and fadeout two effects, used to achieve the effect of the fade fade, which is a common effect on the PC side. Then our front-end group of members Mr Huang naturally thought that the mobile phone page can also be more dazzling, so added the login box fade effect. The effect of buffering the user is good.

However, Zepto does not have Fadein and fadeout, how to do? Is it really impossible to satisfy Mr Huang's wishes? No. I'll do it. There is an animated effect (animate) in Zepto, and it's good to use this effect to achieve fade. We refer to the instructions in the Chinese document http://www.html-5.cn/Manual/Zepto/#animate document detailing the animated effects that animate can achieve. Of course, animate is not omnipotent, there are a lot of jquery can do zepto ineffective effect. Of course, in this consideration of the fade effect although beautiful, but on the Android machine, due to the performance of the cause, often lag phenomenon, and because some ROM casually modify the browser native effect, resulting in those dazzling animation looks very awkward and deformed, bloggers in this and Mr Huang decided to abandon the fade, The direct hidden form is more concise and straightforward.

Bizarre Ajax:

Would use jquery to know $.ajax (); This method, which is used to implement asynchronous request data, is used as often as possible. Of course, this is a feature that is just needed in Zepto, and Zepto is almost identical to jquery. Let's write one of the simplest Ajax.

?

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

OK, this is a simple request, PHP is directly dump out the data I passed. Let's take a look at some strange events.

First, the request for jquery.

We clearly see the passing of an array, then we put him in the form of a sketch array should be data[{"name": "Systme", "Hacked": "Systme"}] This is completely no problem.

Let's look at Zepto's Ajax request again.

, see, Subscript 0 No, subscript 0 What does it mean? Let's restore the array data[{"name": "Systme"},{"hacked": "Systme"}], yes, you really did not read, Zepto's Ajax directly changed the original array structure, Problems with parsing arrays occur because of a problem with serialization of Zepto Ajax array. This problem has caused me a lot of trouble, if it is because of this problem let me re-use jquery is not necessary, so the blogger after the discussion with the back end of the siege decided that I passed the string directly to the backend, the back end of the string parsing. At this point, the strange problem solved, but this kind of solution is not perfect, still need to continue to study the principle of its source code implementation.

Bloggers in this has a different solution, we can use pure JS to implement a POST request, Pure JS POST request is not as convenient as $.ajax, in the parameter pass above to use the & connector, we this parameter is actually DATA[0][NAME]=SYSTME &data[0][hacked]=systme this way, we use the Pure JS post to pass the past is OK

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:

?

1	$(‘[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)
JQuery: Ignores the box model, always returns the width/height of the content area (without 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:

?

12345678

1.<div class="caret"></div> 2..caret { 3. width: 0; 4. height: 0; 5. border-width: 0 20px 20px; 6. border-color: transparent transparent blue; 7. border-style: none dotted solid; 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:

?

12345678

1.(function($) { 2. $(function() { 3. var$list = $(‘<ul><li>jQuery 插入</li></ul>‘, { 4. id: ‘insert-by-jquery‘5. }); 6. $list.appendTo($(‘body‘)); 7. }); 8.})(window.jQuery);

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

Zepto Code:

?

123456

1.Zepto(function($) { 2. var$list = $(‘<ul><li>Zepto 插入</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:

?

1234567891011121314

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. }); 7. 8. $script.appendTo($(‘body‘)); 9. 10. $script.on(‘load‘, function() { 11. console.log(‘jQ script loaded‘); 12. }); 13. }); 14.})(window.jQuery);

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

Zepto Code:

?

123456789101112

1.Zepto(function($) { 2. $script = $(‘<script />‘, { 3. src: ‘http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js‘, 4. id: ‘ui-zepto‘5. }); 6. 7. $script.appendTo($(‘body‘)); 8. 9. $script.on(‘load‘, function() { 10. console.log(‘zepto script loaded‘); 11. }); 12.});

The handler function for the Load event is executed when Zepto is used.

The difference between Zepto and jquery using grammar