Getting Started with jQuery

February 5, 2009 — 6 Comments
This entry is part 1 of 7 in the series Introduction to jQuery

For some time now I’ve been meaning to write about jQuery, an increasingly popular JavaScript framework. There are a number of JavaScript frameworks available, all with their own strengths and weaknesses, so I don’t want to suggest that jQuery is the best one, but it does have its advantages. In particular, I like:

  • that there’s only one file to include in a page
  • how simple DOM (Document Object Model) references are, as manipulating the DOM is such a large part of Rich Internet Applications
  • the unobtrusive JavaScript approach

If you’re not familiar with this last concept, it involves keeping the JavaScript together, in the page’s HEAD, separate from the HTML. Pretty much anytime you separate X from Y (data from presentation, HTML from PHP, CSS markup from HTML, etc.), it’s a good thing. At the very least, abiding by unobtrusive JavaScript makes editing JavaScript easier. (There’s more to unobtrusive JavaScript than just this but…)

In this first post on jQuery, I’ll just discuss how to prepare a page to use jQuery. Over the next few days, subsequent posts will demonstrate more complex applications of jQuery.

To start, download the latest production version of jQuery from the Web site. When you click on the link, you’ll be taken to a page at Google code. The downloaded file will be something like jquery-1.3.1.min.js (the “min” part means it’s been minified for better performance; if you open up the file in a text editor or IDE, you’ll see how the code is all smushed together). The HTML page has to include the jQuery JavaScript file, as you would any other external JavaScript document:

<script src="jquery-1.3.1.min.js" type="text/javascript" charset="utf-8" />

Next up, when it comes to manipulating the Document Object Model, you have to execute some code after the DOM has fully loaded. Although you want to put the JavaScript into the HEAD of the page, the DOM elements won’t be known until the full HTML has been read by the browser. In standard JavaScript, you’d do something like this:

window.onload = function() {
    // Do whatever.
}

(Or you’d identify the function to be called when the window has loaded.). In jQuery, you do the same thing by calling the ready() method on the document:

$(document).ready(function() {
    // Do whatever.
});

This syntax is a bit strange, so I’ll explain. The $(document) part is an identifier, one that specifically refers to the document. On the document object, the ready() method is called. This method takes one argument: the function to be called when the document becomes ready. In this code, an anonymous function is defined. Anonymous functions in JavaScript are quite common; they have no names, are defined in situations where a function’s name or definition is expected as an argument, and they are never called directly (because they have no name). The last line of that code first closes the function definition, then the parentheses for the ready() method, then the semicolon terminates the line.

Because having JavaScript do something after the page has loaded is so fundamental, the $(document).ready(function… code is normally abbreviated to just:

$(function() {
    // Do whatever.
});

So to wrap up this post, just to show you the simple mechanics of using jQuery, the example will generate an alert after the page has loaded:

$(function() {
    alert('So far, so good');
});

The focus in this article has really been a basic introduction to jQuery, specifically how to use it in a Web page. Later posts (to be linked here once created) will use jQuery for more interesting purposes. In the meantime, you may want to read Sitepoint’s interview with jQuery’s creator, John Resig, and bookmark Visual jQuery, an excellent resource for the jQuery framework (although it won’t mean much to you now).

If you enjoyed this post, then please consider following me using your favorite social media, the RSS feed, and/or by subscribing to my newsletter. Or go crazy, and buy one or more of my books . Thanks!

6 responses to Getting Started with jQuery

  1. Perfect timing Larry!

    I’ve just started looking at jQuery myself. Good intro and looking forward to the next instalment.

    • Thanks for the feedback, Rob. I was hoping to get three installments out on jQuery this week but… I should get the next one in a day or two (actually using jQuery for some simple stuff). It’s an interesting framework, though. They’ve done some very smart things behind the scenes which I’ll discuss in time.

  2. Ditto Rob’s perfect timing comment. I’ve spent the last several days digging into jQuery. Am most impressed — after being JavaScript gun-shy for years. Hope you write a small book about it. Love your books.

    • Thanks, Anna Belle, for the comment and the nice words on my books. I’m hoping to add at least four more posts on jQuery over the next two weeks.

  3. Larry? Is the book out yet? (smile) Just found your site today, (the forums actually first, I registered…but haven’t posted yet…as first thing I did was go order a book) while hunting down a problem that’s been eating at me for a few weeks. Since the beginning of this year, I have accumulated 7 books, but none of them have been authored by you? More to come on this story, but thank’s for the site…(and insights), as I have actually spent about 2 hours here…and that’s a lot for a 50 year old, old school paper tape programmer…

Comments are great, but I'd strongly prefer any requests for assistance get made in the support forums. Thanks!