learning jQuery Source Code (v1.6.2)

By its name, jQuery, we can learn something. 'j' means javascript. 'Query' tells us what this library can do or what it is good at. An interesting question is why jQuery becomes so popular even it comes after some other mature javascript libraries like YUI, prototype?

To answer this question, we better open our memory and think what we usually use javascript to do in web development. Mostly, we do these things: 1. search DOM element using getElementById. Once we get the DOM element, we get its value or set its value; 2. Set DOM element's content by setting innerHTML; 3. DOM elemnt event listening, such as 'click'; 4. Using AJAX to get data from backend and update DOM elements' content; 5. Update DOM elements' CSS value.

So most of our tasks are related to DOM elements and these tasks can be divided into two groups: 1. Search/query DOM elements; 2. DOM elements manipulation.

For javascript gurus, writting 'document.getElementById' or 'document.getElementsByTagName' may not be a problem.  Manipulating DOM elements is not hard either. But crossing browsers like IE, mozilla could be a headache to every javascript developer. jQuery doesn't try to do everything. It simply makes DOM manipulation easier and crossing browsers less painful.

We can see the whole jQuery code is wrapped into a self executing function (or immediate function). The obvious benefit of doing this is no global variables would be left behind. So you don't have to wrroy that your library code(temporary variables) may accidently pollute the global space. We can see "window" is passed into this self invoking function as a parameter. In browser environment, window is the top level global object. Everything else are actually properties of window object.

code 1:

(function( window, undefined ) {

...

})(window);

Inside the immediate function, we find another immediate function. This function returns a value to the jQuery variable.

code 2:

var jQuery = (function() {

...

})();

We know that jQuery is the single object we can use straightaway (How about "$"? Well $ is exactly the jQuery object). We can see the last line in code 1:

(function( window, undefined ) {

...

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

})(window);

This creates two global objects: jQuery and $. They both refers to a single identical object. So once we include jQuery library, we can use either jQuery or $ to invoke other methods.

Continue looking through code 2:

var jQuery = (function() {

var jQuery = function( selector, context ) {

                                return new jQuery.fn.init( selector, context, rootjQuery );

                },

...

})();

Don't get confused. The second " var jQuery" is simply another local variable. Note that it is inside the immediate function scope? If this can make you clear, you can imagine the code is:

var jQuery = (function() {

var localJquery = function( selector, context ) {

                                ...

                },

...

})();

Next time, we will look through this jQuery.fn.init( selector, context, rootjQuery ) function.