subject: Why Use jQuery? [print this page] Why Use jQuery? Why Use jQuery?
More developers are looking at Javascript to add interactivity to their web sites. This is largely due to the popularity of the web 2.0 paradigm and Ajax as well as Apple's rejection of Flash on its mobile browsers. Developing interactivity with Javascript has traditionally been challenging as the various browsers exposed their DOM differently. Javascript libraries were soon developed to hide the underlying details of cross-browser support and to simplify writing Javascript for interactivity. Today the leading Javascript library is jQuery. There are a number of compelling reasons to use jQuery in order to make your pages interactive.
Better Response Times
jQuery can make your pages far more responsive. The traditional method of waiting until a page is ready to begin running a script is to use window.onload. The problem with the window.onload function is that your browser will wait until the page, including all external resources, loads. If you have videos or flash files linked to your page, this can cause a considerable delay before your script will execute. jQuery, on the other hand, uses the (document).ready() utility function to determine when to begin executing scripts. This function waits only until the DOM is loaded which means that your web pages will be more responsive.
Unobtrusive Javascript
Another reason to use jQuery is to build unobtrusive Javascript. Unobtrusive Javascript is simply the separation of behavior from structure, just as CSS allowed for the separation of style from structure. In traditional Javascript, it was not uncommon to include code for behaviors in the HTML code. jQuery has a full event model that allows DOM elements to fire events which scripts can listen for. This allows the behavior of your elements to be removed from the HTML that defines their structure.
HTML Elements
jQuery also makes it very easy to select HTML elements to manipulate. It does this by wrapping the DOM model so that you can use selectors that are very much like the selectors used to style elements with CSS. For example, the selector "p a" in CSS would apply a style to all links that are contained within a paragraph tag. In jQuery, $("p a").hide() will hide all links contained within a paragraph tag. The ability to select elements the same way that CSS does makes it much easier to learn jQuery.
Element Chain
jQuery functions return the elements selected. This means that you can chain jQuery functions in order to perform multiple operations on selected elements without having to reselect them. For example, to hide all divs with the class "HideMe" and then add the class "Hidden", you would use the following code:
$(".HideMe").hide().addClass("Hidden");
This chaining also makes jQuery scripts shorter in terms of lines of code. Most of the jQuery functions will act on all the elements selected which saves the need to write code to iterate over each element and perform an action.
Extensibility
Finally, jQuery is extensible. There is a robust system for writing plugins to help jQuery do more. Many new developers write plugins from the onset. There are also a wide variety of exiting plugins for jQuery which make it trivial to develop interactive galleries, product catalogs and more.
jQuery is an excellent library for building interactive web pages. It makes it easy to create unobtrusive Javascript and to select elements in the same fashion you already select them with CSS. It's ability to be extended makes it even more powerful. This is why jQuery is the most popular Javascript library today.
