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.

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