Extended Jquery tutorial

This tutorial is an extension of the basic JQuery tutorial. We will not cover the same stuff here, so if you want a quick and easy primer on JQuery please click on that link. Instead, this offers some extra background information that help put the code examples into context.

You might also want to check out my other posts such as the JQuery Slideshow or AJAX with JQuery and PHP.

What is JQuery?

JQuery is a client-side JavaScript library that can do a wide variety of tasks. This includes browser effects, AJAX, and interact with the DOM. Despite the introduction of CSS3 (which will elegantly handle browser effects and limited DOM manipulation), JQuery still has alot to offer the web developer. It has also been around for longer which means, for the moment, it has better cross-browser support.

JQuery is not meant to be used as an application framework. It does not provide a blueprint around which a developer can build a website. Instead, it offers a wide set of tools to make development much, MUCH easier.

Getting started...

Getting started with jQuery is easy; download the library script from the website and include it in your web-application as you would any other JavaScript file. Alternatively, Google provides live hosting of the jQuery so you could link to that to save on your bandwidth.

<!-- Include the JQuery Library code... JQuery will not work without this -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Selectors

JQuery works best by manipulating the DOM (the fancy, technical name given to the HTML page displayed by the browser), but to do this it needs a way of finding the elements to manipulate. To do this jQuery sports a CSS selector engine, meaning you just use standard CSS nomenclature to select an element.

For instance, if we had a div element with an id set to foo, in CSS we would write #foo {} to declare the style for that id. In JQuery, to search for and manipulate element foo you would write:

$('#foo').function()

Make sure the DOM is ready!

A common problem new developers have with jQuery is they start querying the DOM before it is ready. Browsers sometimes execute JavaScript before they have completely parsed the DOM, and this leads to errors where you manipulate the #foo class but it has not loaded on the page yet.

This problem is solved by calling the jQuery function that waits until the DOM has completely loaded:

$(document).ready(function {
      $('#foo').css('colour', 'red');
});

References:

• "The benefits of CSS3 vs JQuery" by Chris Skelton
• "Basics of JQuery" primer by Andree Hansson
• JQuery reference documentation
• "Tips to getting started with JQuery" by Jake Rocheleau
• w3schools jQuery tutorial