Shulou(Shulou.com)06/02 Report--

This article shows you what the 18 surprises of reading the jQuery source code refer to. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

I love jQuery, and although I consider myself a senior JavaScript developer, I have never tried to read the source code of jQuery from beginning to end, until now. Here are some of the things I learned along the way:

Note: I use the $.fn.method () syntax to denote a method that calls a set of matching elements. For example, when I say $.fn.addClass, it means the use of $('div') .addClass (' blue') or $('a.active`) .addClass (' in-use'). Fn is the prototype of the jQuery wrapper element.

1. Weight of Sizzle: Sizzle is the selector engine used by jQuery to find elements in DOM, based on CSS selector. It is it that converts $('div.active') into an operable array of elements. I know Sizzle accounts for a sizeable part of jQuery, but its sheer size still scares me. It is undoubtedly the largest feature in jQuery in terms of number of lines. I estimate that it accounts for 22% of the total code base, while the second largest feature, $. Ajax, accounts for only 8%.

2. $.grep: this method is similar to Underscore's _. Filter. Take two arguments, an array of elements and a function, execute the function on each element in turn, and return an array of elements with an execution result of true.

3. Bubbling prohibition: jQuery explicitly forbids bubbling of load events. Internally, jQuery passes in a special noBubble: true tag in all load events, so the image.load event does not bubble onto the window and mistakenly trigger the window.load event.

4. Default animation speed: jQuery animates elements by changing style attributes quickly and continuously. Each small change is called a tick. The default animation speed is to run tick every 13 milliseconds. To change the speed, you can rewrite jQuery.fx.interval to the integer you want.

5. Fn.addClass can accept functions: we usually provide $. Fn.addClass with a string containing the class name to create the element. But it can also accept a function. This function must return a string with multiple class names separated by spaces. There is also a colored egg, which takes the index of the matched element as an argument, and you can use this feature to construct an intelligently changed class name.

6. Fn.removeClass is the same: as above, it can also accept a function. This function also automatically receives the index of the element.

7.: empty pseudo selector: can be easily used to match childless elements.

8.: lt and: gt pseudo selector: they match the element based on its index in the matching set. For example, $('div:gt (2)') returns all div except the first three (starting with 0). If you pass in a negative number, it will count backwards and start at the end.

9. $(document). The promise of ready (): jQuery seems to be using its own stuff. Internally, the trusted $(document). Ready () uses a jQuery delay to determine when the DOM is fully loaded.

10. $. Type: you must be proficient in using typeof to determine data types, but did you know that jQuery provides a .type () method? The jQuery version is smarter than the original version. For example, typeof (new Number (3)) returns object, while $.type (new Number (3)) returns number. Update: as ShirtlessKirk pointed out in the comment, $. Type returns the .valueof () property of its object. So it is more accurate to say that $. Type tells you the type of return value of an object.

11. $.fn.queue: you can view the effect queue of an element through $('div'). Queue (), and you can easily see how many effects the element has left. More useful is that you can directly manipulate the queue to add effects. Excerpts from jQuery documents:

$(document.body) .click (function () {$("div") .show ("slow") .animate ({left: "+ = 200"}, 2000) .queue (function () {$(this) .addClass (" newcolor ") .dequeue () ) .animate ({left: "- = 200,500) .queue (function () {$(this). RemoveClass (" newcolor "). Dequeue ();}) .slideUp ();})

twelve。 Disabled elements do not trigger click events: jQuery does not execute click events for disabled elements by default, and with this optimization, you don't have to check it again with your own code.

13. $. Fn.on can accept objects: did you know that $. Fn.on can accept an object to connect more than one event at a time? Examples of jQuery documents:

On ({click: function () {$(this) .toggleClass ("active");}, mouseenter: function () {$(this) .addClass ("inside");}, mouseleave: function () {$(this) .removeClass ("inside");}})

14. $.camelCase: this useful method converts a hyphen string into a hump string.

15. $.active: the call to $. Active returns the number of XHR (XML Http Request) queries. It can be used to manually set the concurrency limit for AJAX requests.

16. $.fn.parentsUntil / $.fn.nextUntil / $.fn.roomUntil: I am familiar with .browse (), .next (), and .prev (), but I don't know there are other methods. They match all parents / next / previous elements until (until) encounters an element that meets the termination criteria.

17. $. Fn.clone parameter: when you clone an element with .clone (), you can use true as the parameter to clone the element's data attributes (data attributes) and events.

18. More $. Fn.clone parameters: in addition to the above method, you can also pass an additional true parameter to clone the data properties and events of all the children of the element. This is called "deep cloning". The default value of the second parameter is the same as * * (* * default false). So when the * parameter is true and you want the second parameter to be true, you can completely ignore the second parameter.

The above is what the 18 surprises of jQuery source code refer to. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.