Hints and tips for learning jQuery

Friday, 29 January 2010

In this article I want to give some hints and tips for those of you who are just beginning with jQuery. jQuery can seem quite overwhelming at first, there appears to be a lot to cover and the syntax appears quite technical at first. The great thing is, once you have overcome the initial learning period, jQuery syntax is quite readable and will provide you with a fantastic tool with limitless potential.

I suggest before you begin, you also go over these tutorials. They are jQuery's own tutorials and are a good foundation. This tutorial will help you build on these basics and help you go further with jQuery.

To begin with jQuery is now available via Google's content delivery network (CDN). This means that you don't need to download anything to begin using jQuery. Here's how you can start a basic page which will load in jQuery via the CDN.

<!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">
<title>jQuery test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1.4");

This basic page when loaded will contact Google's CDN from wherever you are in the world and include it in your page. So now we have jQuery up and ready.

The next thing that I suggest you do is to get a copy of Firebug for Firefox. There are many similar tools for other browsers, I will leave you to investigate those. Having Firebug (or equivelant) allows us to enter javascript directly and view the results of running those commands. You can see from the screen shot below, when I type in the $ command I get the result function.

Firebug will be your best friend will learning jQuery because it can show the results of your function calls, prevent you from refreshing the browser and using alert messages for feedback and will even show you which elements match your jQuery selectors. Selectors tell jQuery which part of your page a certain function should target.

So now you should have your page loading jQuery, which we have confirmed by using Firebug and typing in the $ command so let's dive in and start using jQuery.

The first thing you will want to do to your page is to include a regular javascript file. You need to do this in the head after the section that loads in jQuery. Something like this:

<script type="text/javascript" src="my_script.js"></script>

Open up the my_script.js file (or whatever you called it) and we will start with our jQuery code. If you have read any tutorials or had a play with jQuery you will know we need to start by adding in jQuery's document ready function so let's do that:

$("document").ready(function() {
 // Other code goes here!

So if we place an alert() inside this function it will alert us when the page is loaded and ready to be accessed with jQuery.

Besides the above, there is nothing else needed to start using jQuery and working with its awesome functionality. So let's start taking a look at the way the language itself works.

jQuery has two main types of functions: Those that require a selector and those that don't...

A jQuery function call with a selector

A jQuery function call without a selector
$.ajax("url", {}, function(data) {

So those with a selecter will be in the form $(<<selector>>).<<function>> and those without $.<<function>>. A selector allows us to target a specific element or elements on the page. So we have functions that allow us to target elements and functions that don't need to be targeted, such as AJAX calls.

We can suggest that the non-selector functions are actually targeted at the entire page, then all functions can be viewed as <<selector>>.<<function>>.

The function part of the call can be found in the API, a list of all the functions that jQuery currently provides, jQuery has a great API browser which you will eventually become familiar with, for now you can have a quick look to see some of the functionality available. You will notice that most of these is written as either .<<function name>> or jQuery.<<function name>>, jQuery.<<function name>> are the non-selector functions we mentioned.

jQuery selector syntax takes a bit of learning, but here are some basic tips that will get you on your way...

To start with jQuery selectors are based on CSS selectors, if you are already familiar with CSS selectors you have a very good head start. So if you want to target all the h3 elements we can just do like this $("h3"). If you want to target all elements of a specific class you can do it this way $(".someclass"). All of the available selectors are available in the selectors section of the jQuery API.

You can chain selectors just like CSS e.g. $(".someclass, h3")

You can specify all descendants like CSS e.g. $("#specials *")

jQuery even has special selectors to match child elements and for filtering out certain items from your selection. For now try and familiarise yourself with the basic selectors of class, attribute i.e. input[name='first_name'] and class selectors and build up from there. Just keep in mind, it is not unfamiliar, if you can select it in CSS you can select it using jQuery.

The best way to get to know selectors is by trying out each of the selectors and the best place to do this is jQuery's site. Go to any page on the jQuery site, open up Firebug and start typing out some selectors. You can start out by trying in $("*") and drill down from there or view the page source and see which elements you would like to try and target.

The next important thing to know about jQuery is chaining. Most jQuery functions will chain, meaning you don't need to type the selector out multiple times, you can just apply function after function as such;

<<selector>>.<<function 1>>.<<function 2>>.<<function 3>>... and so on.

For example:
$("#my_div").css("background", "red").addClass("dimensions").toggle();

This will apply each of the three functions to our first selector, as each function is called the result is passed along the chain until it reaches the end.

So now we know how to write a basic jQuery function call and how to chain. Let's get familiar with the API. Looking down the left hand side you will see the main categories of the API; AJAX, Attributes etc. let's look at the main categories in detail.

AJAX: Used for making AJAX calls
Attributes: Used for retrieve/updating/adding/removing attributes
CSS: Used for CSS manipulation (add class, remove class, set CSS rule)
Data: Used for storing extra data on a DOM element
Dimensions: Getting the size of elements on a page (width, height etc.)
Effects: Fade in, Fade out, animating and other effects
Events: Used for handling events such as onclick, mouseover etc.
Forms: Functions for manipulating forms
Manipulation: Clone items, DOM inserting etc.
Selectors: A run down on the jQuery selectors and associated functions
Traversing: Functions for traversing the DOM

There are several categories I have left out that are also worthwhile but are hard to generalise or only have a few functions. But you can get a good idea from above jQuery's main functionality. Again, have a play with some of the functions using jQuery's site and Firebug. Also if you click through on the function name in the API it will lead you to a lot of details information about each function including a demo of how it works.

Just in summary, here is a rundown of what we have covered:

  • Use Google's CDN to load jQuery
  • Get Firebug so you can see what is going on and to run javascript/jQuery commands without reloading
  • Use the document ready function to use jQuery when your page loads (you can also use jQuery inside a regular function call)
  • A basic function is made up of $(<<selector>>).<<function>>
  • Selectors are based on and in most cases identical to CSS selectors
  • jQuery's functions can be chained
  • Get familiar with selectors then get familiar with functions in API
  • Use Firebug and jQuery's site to test out selectors/functions rather than trying to build things to test yourself

Hopefully this gives you a leg up when starting out with jQuery. Let me know how you are going by leaving a comment below.

blog comments powered by Disqus