The definitions of some of the terms used in the jQuery documentation do not agree with the definitions used in the JavaScript documentation. Some people will tell you that this isn’t a problem since the terms used by the jQuery community are more descriptive of the actual meaning of the language and better than the ones used in the JavaScript documentation. However, when you are trying to understand your code, not understanding these differences can result in total confusion.

I am going to describe how some of these concepts work in both the jQuery world and the JavaScript world. To start off with, we are going to look at a page  that uses some special JavaScript to display the contents of objects. The first thing to understand is that your browser has multiple window objects since you can open multiple windows. Global functions, objects, and values are stored as properties of the window object. In this way, the document object in JavaScript normally refers to the global document object, which is also defined as window.document. The location object is defined as window.location, the screen object is window.screen, but when people refer to the jQuery object, they do not mean window.jQuery. (If you want window.jQuery, refer to it as the global jQuery object.)

In the web page referenced above you will see three main columns. The first column shows the properties of the global jQuery object (window.jQuery). The second column shows the properties of the object returned by window.jQuery(‘p’) and the properties of the object window.jQuery.fn. When you call the jQuery function, the first thing that it does is to create a copy of the window.jQuery.fn object. It then looks at the arguments of the function (‘p’ in this case) and creates a list of elements matching the criteria (in this case, all elements having p tags). The elements are attached to the object using numbers as the keys, the value of the length property is set to the number of elements, and the selector property is set to the parameter for the function. After this is done, the function returns the object to the calling routines.

The window.jQuery object is actually a function object, which means that it contains the source code for a function in addition to the other properties. The source code for the jQuery function and the jQuery.fn.init function (called by jQuery) are shown at the bottom of the page. Don’t worry if you have problems understanding it.