The differences between Zepto and jquery and the difference between Zepto use 8 summary _jquery

The first is the effect:

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

But what if there are no Fadein and fadeout in the Zepto? Is it really impossible to satisfy Mr Huang's wishes? No. I will do it. There is an animation effect (animate) in the Zepto, it is 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 animation effects animate can achieve. Of course animate is not omnipotent, there are a lot of jquery can do zepto powerless effect. Of course, in this consideration of the fading effect though beautiful, but on the Android machine, due to the performance of the reasons, often the phenomenon of cotton, and because some ROM casually modify the original browser effect, resulting in those dazzling animation looks very awkward and abnormal, bloggers in this and Mr Huang after the decision to discard the fade, The direct hidden form is more concise and straightforward.

Bizarre Ajax:

You will know $.ajax () with jquery, this method is used to implement asynchronous request data, use to be frequent. Of course, this is a just-needed feature in Zepto, and Zepto is almost exactly the same way as jquery. Let's write the simplest Ajax.

OK, this is a simple request, PHP side is directly dump out of my pass data. Let's take a look at some strange events that have occurred.

First, jquery's request.

We see very clearly that the passing is an array, then we sketch him the array form should be data[{"name": "Systme", "Hacked": "Systme"}] this is perfectly fine.

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

, look, subscript 0 is gone, subscript 0 does not mean anything. Let's restore the array data[{"name": "Systme"},{"hacked": "Systme"} ", yes, you're really right, zepto Ajax directly changed the original array structure, There is a problem with the serialization of the Zepto Ajax arrays, resulting in an unresolved array problem. This problem has caused me a lot of trouble, if it is because this problem let me reuse jquery is not necessary, so, the blogger in discussions with the back-end siege after the decision I this direct string to the backend, by the back-end of the string parsing. At this point, the bizarre problem solved, but such a solution is not perfect, but also need to continue to study the implementation of its source code principle.

Bo Master here has a different solution, we can use pure JS to achieve a POST request, Pure JS POST request is not as convenient as $.ajax, in the parameter pass above to use & connectors, we this parameter is actually DATA[0][NAME]=SYSTME &data[0][hacked]=systme this way, we use the Pure JS Post 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 detached from the document stream as the event object:

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

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

For example execution: $ (' [data-userid=123123123] ')

Results: Error:SyntaxError:DOM Exception 12

Solution:

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

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

2-2.zepto the Select option for the SELECT element cannot use a similar JQ method $ (' option[selected] ') because the selected property is not a standard property of the CSS

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 getting an element with the disabled attribute in the Select can be used $this. Find ("Option:not (:d isabled)") because disabled is a standard property

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

2-3. Zepto to use the prop method when manipulating Dom selected and checked properties, the following is an official description:

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

Zepto.js: Decided by box model (box-sizing)
JQuery: Ignores the box model and always returns the width/height (not including padding, border) of the content area by using. css (' width ') instead of. Width ().

3-1. The border triangle width height obtains

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

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; 

JQuery uses. Width () and. css (' width ') to return, the same height;

Zepto uses. Width () to return, using. css (' width ') to return 0px.

So, this scenario, JQuery uses. Outerwidth ()/. Outerheight (); Zepto use. Width ()/. Height ().

3-2.offset ()

Zepto.js: Back to Top, left, width, height
JQuery: Back to width, height

3-3. Hide elements

Zepto.js: Unable to gain width and height;

JQuery: can be obtained.

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

5.Zepto Animate method Parameter description: Details click->

The usage of animate in Zepto

6.zepto JSONP callback function name cannot be customized

7.DOM Operational 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.}); 

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

Zepto Code:

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

Zepto can be added to the UL ID.

8. Event triggering difference

JQ Code:

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. 
$script. On (' Load ', function () { 
console.log (' JQ script Loaded '); 
.}); 
13.}); 

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

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}); 
6. 
7 $script. Appendto ($ (' body ')); 
8. 
9. $script. On (' Load ', function () { 
console.log (' zepto script Loaded '); 
11.}); 

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