The Basics of jQuery

When it comes to client side libraries, jQuery clearly takes the cake. Recent research indicates that jQuery is used on half of all Web sites. There is a good explanation for jQuery’s popularity – it’s extremely simple to use. This article introduces the key concepts behind jQuery, and will get the absolute beginner up and running.

Background

jQuery was created by John Resig, and released in January 2006. jQuery simplifies cross browser JavaScript programming by providing a layer of abstraction on top of native browser APIs. DOM navigation, in particular, is simplified by allowing DOM queries to be made using CSS selector style syntax. This isn’t necessarily a big deal in modern browsers, which support the Selectors API, but older browsers such as IE6 can benefit greatly from jQuery. jQuery also provides abstractions for many other popular features, such as AJAX and animations.

Getting jQuery

jQuery is just a normal JavaScript file, so you can include it using a standard <script> tag. jQuery can be included from the project’s page, or from a variety of content delivery networks (CDNs). The following example shows how jQuery can be included in any HTML document.

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

If you want your site to be totally self-contained, I recommend downloading the code and hosting it on your own servers. jQuery is freely available for download on the project’s home page. The code is conveniently available in both production (minified) and development versions.

The $() Function

One thing that typically stands out to new jQuery developers is the proliferation of dollar signs sprinkled throughout the code. By default, jQuery namespaces all of its methods and properties in the $ variable. The most popular method is jQuery(), which is typically aliased as $(). This method can be used in a variety of ways, but normally it accepts a CSS style selector string which is used to to query the DOM. Any matching nodes are then returned as a collection of jQuery objects.

The following example selects all hyperlinks of class foo. The links are then iterated over, one at a time, using the each() function. each(), takes a callback function as an argument. As each matching element is iterated over, the callback function is invoked with this referencing the current element. The attr() function is then used to retrieve the href attribute from each link.

$("a.foo").each(function() {
  var link = $(this);
  var href = link.attr("href");
  // Use link here
});

The ready() Function

jQuery is also very good at abstracting away events. And, there might not be any event that is more inconsistently implemented than the page load event. For example, some browsers only support the window’s load event, which doesn’t fire until everything has loaded, including images. Better browsers also support the DOMContentLoaded event which fires once the DOM has been parsed, without waiting for images, stylesheets, and other resources.

With jQuery, you don’t have to try to distinguish between the various page load events. Instead, jQuery provides the ready() function. ready() accepts a single argument, a function which executes once the DOM is fully loaded. The following example shows how ready() is used to react to page load events.

$(document).ready(function(){
  // Explore jQuery here
});

Conclusion

This article has explored the very basics of jQuery. Of course, this is just the tip of the iceberg. jQuery’s immense popularity has given rise to an entire ecosystem of books, developers, plugins, and tools. However, I must provide a word of warning to any potential jQuery developers. Because jQuery makes complicated tasks so simple, many developers never bother to learn how things actually work under the hood. This can lead to a false sense of understanding, which is never a good thing for a programmer. I encourage you to read over the jQuery source code – you never know what you might learn.