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).
