JQuery source code analysis-detailed explanation of jQuery's cycle techniques, jquery source code

JQuery source code analysis-detailed explanation of jQuery's cycle techniques, jquery source code

JQuery's source code has many tips worth learning. This article collects various traversal techniques and scenarios in jQuery. The specific analysis is as follows:

// Simple for-in (event) for (type in events) {}// cache the length attribute to avoid searching for the length attribute every time, the traversal speed is slightly improved // but the performance is significantly improved when HTMLCollection is traversed, because every time you access the HTMLCollection attributes, HTMLCollection will internally match all nodes for (var j = 0, l = handlers. length; j <l; j ++) {}// if no subscript is compared, the system checks whether the element is true (forced type conversion) var elem; for (var I = 0; elems [I]; I ++) {elem = elems [I]; //...} // traverses the dynamic array (event) and cannot cache the length attribute. Before j ++, execute j -- to ensure that some array elements cannot be traversed due to the error of the array bottom mark (j = 0; j <eventType. length; j ++) {eventType. splice (j --, 1) ;}for (var I = 1; I <results. length; I ++) {if (results [I] = results [I-1]) {results. splice (I --, 1) ;}// Minimize the number of traversal times (events) during iteration. If you can know where to start traversing, here is pos for (j = pos | 0; j <eventType. length; j ++) {}// reverse traversal (event) reduces the number of characters: cyclic condition judgment, merge I auto-subtraction and I values, and browser optimization is performed in reverse traversal, slightly higher traversal speed for (var I = this. props. length, prop; I;) {prop = this. props [- -I]; event [prop] = originalEvent [prop];} // reverse traversal. This is a regular example. browser optimization will be performed in reverse order to slightly increase the traversal speed. for (j = tbody. length-1; j> = 0; -- j) {if (jQuery. nodeName (tbody [j], "tbody ")&&! Tbody [j]. childNodes. length) {tbody [j]. parentNode. removeChild (tbody [j]) ;}// you can directly determine the element (selector) for (I = 0; checkSet [I] without determining the subscript. = Null; I ++) {if (checkSet [I] & (checkSet [I] = true | checkSet [I]. nodeType = 1 & Sizzle. contains (context, checkSet [I]) {results. push (set [I]) ;}}for (; array [I]; I ++) {ret. push (array [I]);} // do not judge the subscript. Retrieve the element and then determine the element (selector) for (var I = 0; (item = curLoop [I])! = Null; I ++) {}// traverse the DOM sub-element for (node = parent. firstChild; node = node. nextSibling) {if (node. nodeType = 1) {node. nodeIndex = ++ count ;}/// dynamically traverse the DOM sub-element (DOM traversal). The dir parameter indicates the direction attribute of the element, such as parentNode, nextSibling, previussibling, lastChild, and firstChild for (; cur = cur [dir]) {if (cur. nodeType = 1 & ++ num = result) {break ;}/// while check subscript I var I = promiseMethods. length; while (I --) {obj [promiseMethods [I] = deferred [promiseMethods [I];} // while check element while (type = types [I ++]) {}// while traverses the dynamic array (AJAX), always gets the first element, check whether it is equal to the special value. If it is equal, it is removed from the array header until an element is not equal or the array is empty while (dataTypes [0] = "*") {dataTypes. shift (); if (ct = undefined) {ct = s. mimeType | jqXHR. getResponseHeader ("content-type") ;}// while traverses the dynamic array (asynchronous Queue), always gets the first element until the array is empty, or the element while (callbacks [0]) {callbacks. shift (). apply (context, args);} // while.exe calls regexp.exe c (AJAX), whether to repeatedly call exec than re. test, String. the reason for more powerful match is that each call sets the lastIndex attribute to the character position after matching the string while (match = rheaders.exe c (responseHeadersString) {responseHeaders [match [1]. toLowerCase ()] = match [2]; // store the response header in responseHeaders in key-value format}

I hope this article will help you with jQuery's WEB programming.

Jquery source code analysis

The understanding of objects and prototypes will be very helpful.
But it is better to look at the source code after getting familiar with jquery, which will be helpful for understanding and easy to understand.

It is better to look at $. fn. init from the core of jquery and then look at other $. extend.

For Loop in jquery

No problem with Program Logic
However, the animation effect of js is obviously related to setTimeout setInterval.
The actual effect of this loop is that 10 fadeTo statements are executed at the same time.

You should do this.
Var I = 0;
Function aa (){
$ ("# Box"). fadeTo ("slow", 0, fucntion (){
A ++;
Aa ();
});
}