Give Your Site Some Web 2.0-ness with jQuery

We’ve all wished that our web pages would have some really cool animations, but we’ve all thrown those wishes out the window as soon as we discovered how tedious they are to do in JavaScript. It’s clunky and cumbersome, and not designer-friendly at all. That’s why a really smart egg named John Resig came up with jQuery, which is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and AJAx interactions for rapid web development.” Basically, Resig’s done all the dirty work, and all you have to do is call the functions he’s written.

To use jQuery, you need to know your way around CSS, and this tutorial will assume that you do. You’ll also need some basic knowledge of JavaScript, but any experience with a C-like language will help you understand the code.

The First jQuery

To include the jQuery framework in HTML, download the latest file from jquery.com, or refer the online version:

<script type=”text/javascript” src=” HYPERLINK
“http://jquery.com/src/jquery-latest.js” http://
jquery.com/src/jquery-latest.js”/>

This ensures you’ve always got the latest jQuery running, so you don’t have to worry about upgrading. On the other hand, if the latest version decides to drop a function that you’re using, things may go horribly wrong.

$(document).ready(function () {
//put your initialisation code
here
});

Once you’ve included the jQuery framework, you can start accessing its functions. Let’s start with initializing stuff on the page.

The “$” is the “query” in jQuery - you use it to select elements in your document. You use the standard CSS selectors here: $(‘div’), for example, will select all divs in the document, $(‘.someclass’) will select all elements of the class “someclass”, and so on.

The next bit - .ready( function () {//function code}); - attaches the function to the document’s “ready” event. In plain English, when the document ready, the function will execute. Let’s start with a simple example:

//whitespaces aren’t bothersome, so you can “pretty-
print” code if you want
$(document).ready
(
function()
{
$(‘a.alert’).click
(
function()
{
alert(‘Hello!’);
}
);
}

and here’s what the HTML code looks like:

<a class=”alert” href=”#”>Click here for a message!</a>

and here’s the result:

And now, we can move to bigger, better things—like messing about
with design.

The jQuery Style

With jQuery, you can manipulate elements’ CSS properties to no end—add classes, remove classes, alter styles, and so on. For example, let’s say that you’ve got 30 divs—all of different classes—and you want one class to distinguish itself by turning bright yellow at the click of a button. That’s when you use jQuery to change the CSS code:

$(document).ready(function() {
$(“#buttonID”).click(function() {
//select the button by its ID
//select oldclass divs
and change the background
$(“div.oldclass”).
css({background-color});
});
});

The “appendTo()” function, true to its name, appends the blue div to the green. The “parent()” then selects the green div (which is now the parent of the blue), and finally, the green div gets appended to the red. The HTML code here goes from this:

<div id=”red”></div>
<div id=”green”></div>
<div id=”blue”></div>
to this:
<div id=”red”>
<div id=”green”>
<div id=”blue”></div>
</div>
</div>

Modifying styles and layouts is powerful and fun, but not as much fun as watching that happen with animation.

The jQuery Effect

jQuery comes bundled with all sorts of special effects for your (and your visitors’) entertainment. It all starts with the simple “show()” and “hide()” functions:

$(‘#someID’).show();
$(‘#someID’).hide();
which can also be animated, if you like:
$(‘#someID’).show(‘fast’);
$(‘#someID’).hide(‘slow’);

You don’t, however, want to check whether an element is visible or hidden to decide which function to use, so you use “toggle()” instead—as the name suggests, it’ll hide a visible element, or show a hidden one. It, too, can be animated:

$(‘#someID’).toggle(‘slow’);

And when you’re done playing with special effects, you can try your hand at some basic AJAx.

From The Beyond

This is the simplest form of AJAx—getting information from another page, without reloading your current one. Our external data, in this case, will be an xML file (it could be PHP or HTML, for that matter). Technically, since this doesn’t involve the xML HttpRequest object, it’s only AJAx in the loosest sense of the term.

Here’s the type of data we’ve got in the xML file:

<software>
<Title>8 Kingdoms</Title>
<Description>8 Kingdoms is a 3D turn-
based fantasy strategic game in which players
become kings, build their empires and conquer
enemy kingdoms.</Description>
<License>Free</License>
<Section>Gaming</Section>
<Category>Free Games</Category>
<Size>34.6 MB</Size>
<Path>Gaming\Games\8Kingdoms-1.1.0.exe</
Path>
<Month>June</Month>
<Year>2008</Year>
<Media>Freeware</Media>
</software>

And here’s what our HTML looks like:

<div class=”ajax stuff”>
<h1>AJAX!</h1>
<input type=”submit” value=”Load Info”
id=”ajaxgetter”/>
<!--This div waits for the content-->
<div id=”ajaxinfo”>
</div>
</div>

And finally, this is the JavaScript that gets it all done :

$(“#ajaxgetter”).click( function() {
$(“#ajaxinfo”).
load(“sample.xml”);
});

The result:

The “load()” function will bring up whatever you pass to it—you could even load entire websites in that little space. You can also submit forms using “$.get()” and “$post()” (for the GET and POST methods respectively), and show the results in your AJAx area.

.end();

If you’ve been wanting to try AJAx but were daunted by JavaScript, jQuery is your thing. If you’ve been using JavaScript for AJAx so far, you can leave that mess behind and make your code lighter with jQuery. Most important of all, though, jQuery brings simple JavaScript-ing to the hands of web designers, and that’s something we’ve waited for too long.