This article, as well as a follow-up article coming next week, are excerpts from Chapter 2 of the new SitePoint book, jQuery: Novice to Ninja, by Earle Castledine and Craig Sharkie. You can grab the entirety of Chapter 2, as well as Chapters 1 and 7 and the complete code archive for the entire book for free here. Together, these two articles constitute an introduction to jQuery for designers who’ve only ever worked with CSS and HTML.
If you’ve been wanting to learn the basics of jQuery and start adding some dynamic interactions to your website, this is the place to start. If you’d like to follow along with the code in this article, download the sample, which includes all of the code examples from the book.
“In phase two, we are going to want to harness the social and enable Web 2.0 community-based, crowd-sourced, Ajax, um, interactions,” says our new client. “But for now we just need some basic stuff changed on our site.
Our client is launching a startup called StarTrackr! It uses GPS and RFID technology to track popular celebrities’ exact physical location—then sells that information to fans. It’s been going great guns operating out of a friend’s local store, but now they’re taking the venture online.
“Can you do it? Here’s a list that needs to be live by Friday, close of business.”
You survey the list. By amazing coincidence you notice that all of the requests can be implemented using jQuery. You look at your calendar. It’s Friday morning. Let’s get started!
The first task on the list is to add a simple JavaScript alert when the existing site loads. This is to let visitors know that StarTrackr! is not currently being sued for invasion of privacy (which was recently implied in a local newspaper).
Sure, we could use plain old JavaScript to do it, but we know that using jQuery will make our lives a lot easier—plus we can learn a new technology as we go along! We already saw the anatomy of a jQuery statement in Chapter 1; now let’s look at the steps required to put jQuery into action: we wait until the page is ready, select our target, and then change it.
You may have probably guessed that jQuery can be more complicated than this—but only a little! Even advanced effects will rely on this basic formula, with multiple iterations of the last two steps, and perhaps a bit of JavaScript know-how. For now, let’s start nice and easy.
Before we can interact with HTML elements on a page, those elements need to have been loaded: we can only change them once they’re already there. In the old days of JavaScript, the only reliable way to do this was to wait for the entire page (including images) to finish loading before we ran any scripts.
Fortunately for us, jQuery has a very cool built-in event that executes our magic as soon as possible. Because of this, our pages and applications appear to load much faster to the end user:
Example 1. chapter_02/01_document_ready/script.js
$(document).ready(function() { alert('Welcome to StarTrackr! Now no longer under police …');});
The important bits here (highlighted in bold) say, “When our document is ready, run our function.” This is one of the most common snippets of jQuery you’re likely to see. It’s usually a good idea to do a simple alert test like this to ensure you’ve properly included the jQuery library—and that nothing funny is going on.
Almost everything you do in jQuery will need to be done after the document is ready—so we’ll be using this action a lot. It will be referred to as the document-ready event from now on. Every example that follows in this book, unless otherwise stated, needs to be run from inside the document-ready event. You should only need to declare it once per page though.
The document-ready idiom is so common, in fact, that there’s a shortcut version of it:
$(function() { alert('Ready to do your bidding!'); });
If you’d like to use the shortcut method, go ahead! The expanded version is arguably a better example of self-documenting code; it’s much easier to see at a glance exactly what’s going on—especially if it’s buried in a page of another developer’s JavaScript!
At a cursory glance, the document-ready event looks much removed from the structure we encountered back in our jQuery anatomy class, but on closer inspection we can see that the requisite parts are all accounted for: the selector is document; the action is ready; and the parameter is a function that runs some code (our alert).
Earle CastledineSporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. As co-creator of the client-side opus TurnTubelist, as well as countless web-based experiments, Earle recognizes the Internet not as a lubricant for social change but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies.
