jQuery - A quick start guide

Monday 7th September 2009 at 2:14 am

This article is designed to introduce a complete beginner to jQuery. jQuery is not a new language nor is it an independent platform. It's a Javascript library designed to make it easier for developers to 'do more, write less.' So it's written in Javascript, meaning it follows the Javascript syntax. I assume that you are familiar with the basic terminology of Object Oriented programming - ie. Classes, objects, methods etc.

The advantages

Cross browser compatible: Plain old Javascript behaves differently in different browsers, so although your app might work great in one browser, another might not work at all, meaning developers spend hours tweaking code to cover all the bases. jQuery helps to control this problem with methods that account for these quirks, saving you a lot of time and effort.
Compact syntax: jQuery makes complex tasks simpler by providing methods allowing you to do more while writing less code.
Many plugins available: a 'plugin' is a class that allows you to perform a behaviour, for instance, drag and drop an element - while it's fairly complex to write Javascript code that allows you to drag an element around, by loading a third party jQuery plugin and binding it to an element, you can get this working in two lines, and you can be pretty confident it'll work in other browsers too.

The disadvantages

Overhead: Of course all this functionality doesn't come without some kind of catch - you will need to include the jQuery library in your HTML pages meaning more overhead for the client's browser to download. However, with the packed version of the basic library and with most people using broadband these days 56kb for the latest version isn't too much of a price to pay. Remember, most browsers will cache it too so it'll only be downloaded once.
Requires Javascript: jQuery is a Javascript library, so the client's browser must be javascript enabled. This isn't really a huge problem though with 97% of internet users estimated to have it enabled. You can also write code that degrades gracefully if the client's browser does not have javascript.

Including the library

So, the first thing you'll need to do is download the latest library from the jQuery website.

You'll then need to include it in the section of your HTML file:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

You will need a place to write your javascript code, so create a script tag:

<script type="text/javascript">

</script>

The DOM (Document Object Model)

Normally, javascript is executed immediately by the browser as it interprets the HTML page, however often it's preferable to execute javascript once everything on the page has loaded. jQuery solves this problem by listening for the DOM to be ready:

<script type="text/javascript">

$(document).ready(function() { 

  // Your code goes here

});

</script>

You can read more about the DOM here.

Selectors

Selecting elements in your page is easy with jQuery. There a a whole range of selectors to use, the simplest way is to use a CSS style selector:

$('#myElement')

This will select the HTML element with ID 'myElement', so for example this div tag:

<div id="myElement">
hello world
</div>

You can also select a whole series of elements, for example:

$('.myElements')

This will select all elements on your page with the Class 'myElements'. Remember, good practice says that you should not assign the same ID to multiple elements, but you can assign the same class to multiple elements.

You might be wondering that the $ symbol is for, this is just a reference to the main jQuery class - it's fine to use if you don't plan on including any other libraries such as Prototype, but if you do plan on using other libraries too you can use the following syntax:

jQuery('.myElements')

Methods

To modify or apply a behavior to an element you use a method. There are lots of built in methods that come with jQuery. For example, the CSS method adjusts the CSS style of the element, so for example:

$('.myElements').css('fontWeight','bold');

This statement effectively introduces this CSS:

.myElements { font-weight: bold; }

There are more interesting methods that come with the basic jQuery library too, one such method is the load() method. This is one of jQuery's AJAX functions that loads the contents of an external file into an element, so for example:

$('#myElement').load('myfile.txt');

This statement would replace the contents of the element with ID 'myElement' with the contents of the file 'myfile.txt', without reloading the whole page. This is an excellent example of how jQuery can save you a whole lot of time/code.

Callbacks

Callbacks are functions executed after the parent function has finished executing, for example:

$('#myElement').load('myfile.txt', function() { 
  alert('finished loading!');
});

So once the new AJAX content has finished loading the unnamed function will executing, alerting the user it's finished.

Listeners

Usually jQuery is used to enhance user interaction with the webpage, when a user clicks on an element for instance. jQuery uses 'listeners' to detect user interaction with elements on the page, so for example:

$('#myElement').click(function() {
  alert('You clicked me!');
});

Now, when a user clicks on the element with ID 'myElement' they will trigger the alert 'You clicked me!'.

Plugins

Plugins usually extend the jQuery base class. So for instance the Cycle Plugin makes it easy to create fading image slideshows.

First you need to download and include the Cycle plugin after your include for the main jQuery class, so your head section now looks like this:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>

Next you need to create the HTML elements for your slideshow:

<div id="slideshow">
  <img src="balloon.jpg" border="0" alt="a baloon" />
  <img src="monkey.jpg" border="0" alt="a monkey" />
  <img src="beach.jpg" border="0" alt="the beach" />
</div>

Our container element #slideshow contains three image elements that make up the three slides in our slideshow. Now, we apply the Cycle method to the container element:

$('#slideshow').cycle();

That's it! You've created a slideshow in a few simple steps.

Debugging

Debugging Javascript can be difficult because as soon as one statement breaks, it will stop executing script and not always throw an error. This task can be made much easier by using Firebug - a plugin for firefox that displays errors in javascript code that the browser is executing.

Summary

This guide is designed to show you the very basics of how to get started with jQuery. You don't need to be an expert in Javascript to get started and begin making complex interactions with relative ease. The examples in this article are purposely basic, but use the jQuery Docs website to find out more about the methods mentioned and discover the massive range of other methods at your disposal. A couple of hours spent getting to grips with jQuery will save you hours later!