This chapter covers
15jQuery fundamentals
First, $.fn.disable means that we’re extending the $ wrapper with a method named disable. Inside that function, the this keyword is the collection of wrapped DOM elements that are to be operated upon.
Then, the each() method of this wrapper is called to iterate over each element in the wrapped collection. We’ll be exploring this and similar methods in greater detail in chapter 3. Inside of the iterator function passed to each(), this is a reference to the specific DOM element for the current iteration. Don’t be confused by the fact that this resolves to different objects within the nested functions. After writing a few extended functions, it becomes natural to remember that this refers to the function context of the current function. (The appendix is also there to explain the JavaScript concept of the this keyword.)
For each element, we check whether the element has a disabled attribute, and if it does, we set it to true. We return the result of the each() method (the wrapper) so that our brand new disable() method will support chaining, like many of the native jQuery methods. We’ll be able to write
$("form#myForm input.special").disable().addClass("moreSpecial");
From the point of view of our page code, it’s as though our new disable() method was built into the library itself! This technique is so powerful that most new jQuery users find themselves building small extensions to jQuery almost as soon as they start to use the library.
Moreover, enterprising jQuery users have extended jQuery with sets of useful func-tions that are known as plugins. We’ll be talking more about extending jQuery in this way in chapter 7.
Testing for existence
You might have seen this common idiom for testing the existence of an item:
if (item) {
//do something if item exists }
else {
//do something if item doesn't exist }
The idea here is that if the item doesn’t exist, the conditional expression will evaluate to false.
Although this works in most circumstances, the framers of jQuery feel that it’s a bit too sloppy and imprecise and recommend the more explicit test used in the
$.fn.disable example:
if (item == null) ...
This expression will correctly test for null or undefined items.
For a full list of the various coding styles recommended by the jQuery team, visit the jQuery documentation page at http://docs.jquery.com/JQuery_Core_Style_Guidelines.
16 CHAPTER 1 Introducing jQuery
Before we dive into using jQuery to bring life to our pages, you may be wondering if we’re going to be able to use jQuery with Prototype or other libraries that also use the $ shortcut. The next section reveals the answer to this question.
1.3.6 Using jQuery with other libraries
Even though jQuery provides a set of powerful tools that will meet most of our needs, there may be times when a page requires that multiple JavaScript libraries be employed. This situation could come about when we’re transitioning an application from a previously employed library to jQuery, or we might want to use both jQuery and another library on our pages.
The jQuery team, clearly revealing their focus on meeting the needs of their user community rather than any desire to lock out other libraries, have made provisions for allowing jQuery to cohabitate with other libraries.
First, they’ve followed best-practice guidelines and have avoided polluting the global namespace with a slew of identifiers that might interfere not only with other libraries, but also with names we might want to use on our pages. The identifier jQuery and its alias $ are the limit of jQuery’s incursion into the global namespace.
Defining the utility functions that we referred to in section 1.3.2 as part of the jQuery namespace is a good example of the care taken in this regard.
Although it’s unlikely that any other library would have a good reason to define a global identifier named jQuery, there’s that convenient but, in this particular case, pesky $ alias. Other JavaScript libraries, most notably the Prototype library, use the $ name for their own purposes. And because the usage of the $ name in that library is key to its operation, this creates a serious conflict.
The thoughtful jQuery authors have provided a means to remove this conflict with a utility function appropriately named noConflict(). Anytime after the conflicting libraries have been loaded, a call to
jQuery.noConflict();
will revert the meaning of $ to that defined by the non-jQuery library.
We’ll cover the nuances of using this utility function in chapter 7.
1.4 Summary
We’ve covered a great deal of material in this whirlwind introduction to jQuery, in preparation for diving into using jQuery to quickly and easily enable the development of next-generation web applications.
jQuery is generally useful for any page that needs to perform anything but the most trivial of JavaScript operations, but it’s also strongly focused on enabling page authors to employ the concept of Unobtrusive JavaScript within their pages. With this approach, behavior is separated from structure in the same way that CSS separates style from structure, achieving better page organization and increased code versatility.
Despite the fact that jQuery introduces only two new names in the JavaScript namespace—the self-named jQuery function and its $ alias—the library provides a
17 Summary
great deal of functionality by making that function highly versatile, adjusting the oper-ation that it performs based upon the parameters passed to it.
As we’ve seen, the jQuery() function can be used to do the following:
Select and wrap DOM elements to be operated upon by wrapper methods
Serve as a namespace for global utility functions
Create DOM elements from HTML markup
Establish code to be executed when the DOM is ready for manipulation
jQuery behaves like a good on-page citizen not only by minimizing its incursion into the global JavaScript namespace, but also by providing an official means to reduce that minimal incursion in circumstances when a name collision might still occur—namely when another library, such as Prototype, requires use of the $ name.
How’s that for being user friendly?
In the chapters that follow, we’ll explore all that jQuery has to offer us as develop-ers of rich internet applications. We’ll begin our tour in the next chapter as we learn how to use jQuery selectors to quickly and easily identify the elements that we wish to act upon.
18