JQuery_ Novice to Ninja - Earle Castledine [11]
Sorry, this field must be filled in!
Please try again
In this example, multiple elements on the same page are classified as a “warning.” Any CSS applied to the warning class will apply to both elements. Multiple class attributes on the same element (when they’re required) are separated by spaces.
When you write your CSS, you can hook elements by id with a hash symbol, or by class with a period:
#footer { border: 2px solid black }
.warning { color: red }
These CSS rules will give a black border to the element with an id of footer, and ensure that all elements with a class of warning will be displayed in red text.
When it comes time to write some jQuery, you will find that knowing about CSS selectors and the DOM is important: jQuery uses the same syntax as CSS for selecting elements on the page to manipulate. And once you’ve mastered selecting, the rest is easy—thanks to jQuery!
If You Choose to Accept It …
jQuery is a stable and mature product that’s ready for use on web sites of any size, demonstrated by its adoption by some of the veritable giants of the Internet. Despite this, it’s still a dynamic project under constant development and improvement, with each new version offering up performance boosts and clever additional functionality. There’s no better time than now to start learning and using jQuery!
As we work through the book you’ll see that there’s a lot of truth in the jQuery motto, “write less, do more.” It’s an easy and fun library with a gentle learning curve that lets you do a lot of cool stuff with very little code. And as you progress down the path to jQuery ninja-hood, we hope you’ll also acquire a bit of respect for and understanding of JavaScript itself.
In the Chapter 2, we’ll dive into jQuery and start using it to add some shine to our client’s web site. Speaking of our client, it’s time we met him …
Chapter 2
Selecting, Decorating, and Enhancing
“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.
Making Sure the Page Is Ready
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