Posted by Daniel Matthews in jQuery is a freely available, extremely extensible library of javascript actions, effects and more, and is written with it’s own API of sorts, that means that instead of writing lots and lots of standard javascript code, you can use a shorthand version that reduces the time you spend writing code, but produces some awesome effects.
The best part is that it works tightly with CSS, so if you’re a designer, you already have about 80% of the skills needed to program actions in jQuery!
Why jQuery?
Because it’s probably the most widely used and widely extended javascript library around, a lot of people seem to know it, so support is usually not far away, and in my personal opinion, i think it’s the most intuitive to designers.
Ready?
Ok then, let’s get started...
Firstly, copy the below code into a blank HTML document, this is the basic page structure that we’re going to work with, and a little bit of CSS in the head section to control what certain elements on the page look like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery!</title> <style type="text/css"> p.ourParagraph { padding:10px; border:5px solid #947d5f; background-color: #d3b287; width:500px; margin-left: auto; margin-right: auto; margin-top:50px; color:#fff; } </style> </head> <body> <a class="showParagraph" href="#">Show The Paragraph</a> | <a class="manipulateCSS" href="#">Manipulate The CSS</a> | <a class="reset" href="#">Reset Everything</a> <p class="ourParagraph" id="main">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p class="ourParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </body> </html>
You’ll notice there are two paragraph elements, both have a class name “ourParagraph” applied to them, which is why they look the same, but the top one has an ID attribute as well, more about why later.
Remember to save your HTML file in the root folder of your site, and make sure the path to jQuery is correct in the script tag.
Including jQuery on your site...
You’ll need to head over to the jQuery web site and download the latest release, don’t worry too much about the compression options, just use the default setting (production).
Then you’ll need to place jQuery either in the root folder of your site, or in a “js” or “javascript” folder, i’ve chosen the former. You then insert this snippet of code into the top of your page:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
Of course, the “src” path will depend on where you chose to store your jQuery file, so adjust accordingly.
(Document).Ready?
The first thing I'm going to go over is using the document ready function. This checks to see if the DOM is loaded and ready to be played with using javascript.
$(document).ready(function() {
/* Anything you want to happen when you load the page goes here */
});
Then inside this little command, you can tell the script to hide any elements with the class of “ourParagraph” (which we have two of). You do this by looking for elements similar to the way you would with CSS:
$(document).ready(function() {
/* Tell it to hide any elements with a class of “ourParagraph” */
$(“.ourParagraph”).hide();
});
Now refresh your page, you should see the two brown-backgrounded paragraphs dissapear, if it works, congratulations, you just wrote some jQuery, if not, make sure that you’ve typed everything correctly (don’t copy and paste or it’ll never stick in your head!), and also check that you’ve included your jQuery library file correctly, and that it’s in the right place.
Now let’s just take a look at what we just did...
// We said “when the page is ready to be manipulated:
$(document).ready(
// Do this:
function () {
// Take this element:
$(“.ourParagraph”)
// And Hide it:
.hide();
// Then we close up the loose ends:
});
There, simple. And this is the style of coding for most of jQuery’s effects and interactions with your page.
Let’s get the paragraph back...
Notice there’s a link element in there with a class of “showParagraph”? well we’re going to use that class to tell jQuery to show the paragraphs again when the link is clicked. So, inside you’re document ready function, insert this code:
$(“.showParagraph”).click(function() {
$(“.ourParagraph”).show();
});
This is simply doing the opposite of our .hide() piece of code, but doing it only when we click the link, not straight away when the document is ready. You should now be able to refresh the page, click the “show the paragraph” link, and they will both pop into view.
Note that the link elements in our page have a value of href=”#”, this is the most basic way of creating a link that doesn’t navigate to any page when clicked on, but can still be used to manipulate things with javascript.
Adjusting CSS, without refreshing the page!
This is one of the coolest features of jQuery is it’s shorthand for adjusting CSS properties of page elements. We’re going to target a specific element in the page, one of the paragraphs, which is why i attached an ID to one of them.
/* when you click the with the class “manipulateCSS”... */ $(“.manipulateCSS”).click(function() { /*Target the paragraph with ID “main” and adjust the following CSS properties */ $("#main").css({'background-color' : 'red', 'width' : '200px'}); /* Close up the loose ends */ });
Now to reset everything...
Just quickly, as a final piece of functionality to this tutorial, combine the two pieces of code from before to create a simple reset function that will hide the paragraphs and reset the CSS of the manipulated paragraph back to what it was before:
/* When we click the link with class “reset” */
$(".reset").click(function() {
/* Hide the paragraphs */
$(".ourParagraph").hide();
/* Reset the css back to normal */
$(".ourParagraph").css({'background-color' : '#d3b287', 'width' : '500px'});
/* close up the loose ends */
});
There we go, refresh your page and click through the links in order, and you get a nice sequence of events. Hidden, show, manipulate, reset.
So that pretty much wraps up this very basic tutorial on using jQuery, remember to head over to the jQuery website where they have a lot of great tutorials, and you can also read the documentation, in which you’ll find the effects, which are the most fun part of jQuery 
So enjoy, and please let me know how I could improve this tutorial, constructive criticism only please.
You can download the files for this tutorial here
Great post Daniel, keep up the great work!