jQuery for Designers

If you've got a good understand of CSS selectors, then you're already familiar with how to query the DOM.

Background

CSS1

jQuery uses CSS1, 2 and parts of CSS3 at the heart of all it's queries, just in the same way you would use CSS to target an element or group of elements to style.

In CSS, to hide an element we could use:

.hidden { display: none; }

Using jQuery we can achieve the same effect by finding all the elements whose class is hidden and hiding them like this:

$('.hidden').hide();

Equally to target an ID, in CSS we use:

#header { display: none; }

Which is this in jQuery:

$('#header').hide();

CSS2

More complicated CSS selectors can be used using CSS2. Here we are styling all links that have an attribute of type="application/pdf" with a nice little icon, and doing something cool when they click on the link.

a[type="application/pdf"] { 
  background-image: url(/images/pdf.gif);
  padding-left: 20px;
}

$('a[type="application/pdf"]').click(doSomethingCool);

CSS3

Taking the above example further with CSS3 is easy. Let's assume the markup already exists, and we want to find all the anchors that link to pdfs:

a[href$=".pdf"] { 
  background-image: url(/images/pdf.gif);
  padding-left: 20px;
}

$('a[href$=".pdf"]').click(doSomethingCool);

You should check the full jQuery selector documentation for which CSS3 selectors are supported.

Example

So you've got your built web page, fully styled and there's no interaction layered on yet. Using these CSS selectors we can target elements and hook actions.

In this simple example we have a registration form. We have terms and conditions that if the user wants to read, they'll slide out to be shown.

The terms are both linked to and hidden on the page. If the user clicks on the link and JavaScript is enabled, we'll handle the click action ourselves by sliding the text in to view.

$(document).ready(function () { // when the DOM is ready do:
    $('A.reveal').click(function () {
        $('#terms').slideDown();
        return false; // don't follow the default link action
    });
});

This code breaks down as follows:

$(document).ready(function () {

Run the JavaScript in this (anonymous) function when the document has loaded.

$('A.reveal').click(function () {

Find all the anchors with the class 'reveal' and hook a click event.

$('#terms').slideDown();

When the user clicks, find the element whose id is 'terms' and fire the slideDown animation. You should note that these effects are smart enough to know whether the target element is already shown or not. So in this particular example, if the terms element is already being displayed, it won't try to slide it down on clicking again.

return false;

Finally, this stops the browser following the link's href (which is the default action).

Here's the working example

Taking it further

The best way to understand the selectors and how they work is by injecting jQuery (using the bookmarklet) in to a page and testing out selecting using firebug.