Zepto.js Note before use

api:http://www.css88.com/doc/zeptojs_api/

First, the recommendation: Do not download from the official website, but from Github download the source code after you build a version, so you can choose the appropriate module. For example, I picked the module is so few:

• Polyfill,zepto,detect,event,ajax,form,fx These 7 are the modules included in the Standard Edition
• fx_methods with this module, several methods such as. Show () hide () can support animations, such as.show(‘fast‘)
• Data provides complete support for the. Data () method, stored as a memory object like JQuery
• Assets Remove the IMG element and do some special processing to clean up the memory
• selector more selector support, which will be mentioned later
• Touch Event support, such as tap events

Second, do not use the Click event, tap instead

This estimate has been widely known because the Click event has 200~300 Ms Latency, and in order to respond faster, it is best to use the tap event provided by Zepto
If you don't believe it, you can test it with the following code

var t1,t2;
$ (' #id '). Tap (function () {
T1 = Date.now ();
});
$ (' #id '). Click (function () {
T2 = Date.now ();
alert (T2-T1);
});

Iii. zepto support for CSS selectors
Solemn reminder,: Text:checkbox:first and so on in JQuery is a very common selector, zepto do not support!
For the simple reason, JQuery supports CSS selectors through its own sizzle engine, and Zepto is a Document.queryselectorall interface that is provided directly through the browser.
This interface only supports standard CSS selectors, and those mentioned above belong to the jQuery selector extension, so take a closer look at this page and notice the selectors.

Of course, there is good news, the above mentioned selector module, if there is this module, can support the partial jQuery selector extension, listed as follows:

: Visible:hidden
: selected:checked
:p arent
: First:last:eq
: Contains:has
Dimension calculation of elements
First Zepto No. innerheight (). Outerwidth () etc. four methods, secondly, its. Height ()/.width () method is also imperfect, for display:none elements, the calculated aspect are 0
This is no problem in jquery, because jquery sets its CSS style to position for this element: "Absolute", Visibility: "Hidden", Display: "Block"
After calculating aspect and then recovering, see https://github.com/jquery/jquery/blob/master/src/css.js#L460
If you encounter this special situation, you can refer to JQuery to write a similar method

Pitfalls of the. Prop () method
Once I'm going to put a text box as read-only and write a line like $ (' #text '). Prop (' ReadOnly ', true) The result is not working.
Looking for a long while to find that the correct wording is such $ (' #text '). Prop (' ReadOnly ', true), if you can't see the difference between the two, then quietly prompted you: pay attention to the case!
Turn over the relevant document, the original read-only property of the correct spelling is really readOnly, but in jQuery inside a piece of code can work properly
So to JQuery source inside find only found, there is such a https://github.com/jquery/jquery/blob/master/src/attributes.js#L466

Jquery.each ([
"TabIndex",
"ReadOnly",
"MaxLength",
"CellSpacing",
"CellPadding",
"RowSpan",
"ColSpan",
"Usemap",
"Frameborder",
"Contenteditable"
], function () {
jquery.propfix[this.tolowercase ()] = this;
});
As you can see from here, the maturity of jQuery is hard to surpass because he has spoiled us all ...
Given the simplicity of the code, I had the audacity to copy it and give Zepto a pull request, and if you like this brain-free usage, you can comment on the support (remember in English)

animation effects for. Show ()
If there is no Fx_mehods module, the. Show () method does not support animation, but with this module, animation support is a little bit of a problem, such as a piece of HTML

<div style= "Background:black;opacity:0.7;display:none" >
Test
</div>
If you call $ (' div '). Show (' Fast '), then what you see when the animation is finished is not a translucent element, but a full black opaque
Because the Zepto. Show () animation is implemented simply, without a wide variation, instead of increasing the transparency from 0 to 1, so that the original set of transparency on the element is replaced.
In this case, you can use the. FadeIn () method instead. Show ()

Zepto.js Note before use