Simplify Ajax development with jQuery

Discover how easy Ajax and DOM scripting can be

jQuery is a JavaScript library that helps simplify your JavaScript™ and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

Share:

Jesse Skinner, Web Developer, 自由职业者

Photo of Jesse SkinnerJesse Skinner is a freelance Web developer specializing in JavaScript and CSS. He spends his time expatriating from Canada to Germany, making the Web more fun to use, and unraveling the ancient mysteries of CSS browser compatibility. If you'd like more information about Jesse or to read more about Web development, check out his blog at The Future of the Web.



10 April 2007

Also available in Japanese

What's jQuery?

Created by John Resig in early 2006, jQuery is a great library for anyone who works with JavaScript code. Whether you're new to the JavaScript language and want a library to address some of the complexities of Document Object Model (DOM) scripting and Ajax or you're an advanced JavaScript guru and tired of the boring repetition involved with DOM scripting and Ajax, jQuery will suit you well.

jQuery helps you keep your code simple and succinct. You no longer have to write a bunch of repetitious loops and DOM scripting library calls. With jQuery, you can get right to the point and express yourself in the fewest possible characters.

The jQuery philosophy is certainly unique: It's designed to keep things simple and reusable. When you understand and feel comfortable with the philosophy, you'll start to see just how much jQuery can improve the way you program.


Some simple simplifications

Here's a simple example of the impact jQuery can have on your code. To do something really simple and common, such as attach a click event to every link in an area of a page, you'd use plain JavaScript code and DOM scripting, as shown in Listing 1.

Listing 1. DOM scripting without jQuery
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}

Listing 2 shows the same functionality achieved using jQuery.

Listing 2. DOM scripting with jQuery
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

Amazing, isn't it? With jQuery, you get right to the point, and express only what you want the code to do without all the hassle. No need to loop over the elements; the click() function takes care of that. Also no need to make multiple DOM scripting calls: All that you need is a short string to define the elements to work on.

It can be a bit tricky to understand how this code even gets the job done. First, you have the $() function—the most powerful function in jQuery. Mostly, you use this function to select elements from the document. In this example, the function is passed a string containing some Cascading Style Sheets (CSS) syntax, and jQuery finds the elements as efficiently as possible.

If you know the basics of CSS selectors, this syntax should look familiar. In Listing 2, #external_links looks for the element with an id of external_links. A space followed by a tells jQuery to look for all the <a> elements inside the external_links element. That's a mouthful to say in English -- and even in DOM scripting -- but in CSS, it couldn't be simpler.

The $() function returns a jQuery object containing all the elements that match the CSS selector. A jQuery object is something like an array but comes with a ton of special jQuery functions. For example, you can assign a click handler function to each element in the jQuery object by calling the click function.

You can also pass an element or an array of elements to the $() function, and it will wrap a jQuery object around the elements. You might want to use this functionality to employ jQuery functions on things like the window object. For example, you typically assign the function to the load event like this:

window.onload = function() {
    // do this stuff when the page is done loading
};

Using jQuery, you write the same code like this:

$(window).load(function() {
    // run this when the whole page has been downloaded
});

As you probably already know, waiting for the window to load is painfully slow, because the whole page must finish loading, including all the images on the page. Sometimes, you want the images to finish loading first, but most of the time, you just need the Hypertext Markup Language (HTML) to be there. jQuery solves this problem by creating a special ready event on the document, used like this:

$(document).ready(function() {
    // do this stuff when the HTML is all ready
});

This code creates a jQuery object around the document element, then sets up a function to call the instance when the HTML DOM document is ready. You can call this function as many times as necessary. And, in true jQuery style, a shortcut calls this function. Simply pass a function to the $() function:

$(function() {
    // run this when the HTML is done downloading
});

So far, I've shown you three different ways to use the $() function. With a fourth way, you can create an element using a string. The result is a jQuery object containing that element. Listing 3 shows an example that adds a paragraph to the page.

Listing 3. Creating and appending a simple paragraph
$('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");

As you might have noticed from the previous example, another powerful feature of jQuery is method chaining. Every time you call a method on a jQuery object, the method returns the same jQuery object. This means that if you need to call multiple methods on a jQuery object, you can do it without re-typing the selector:


Ajax made simple

Ajax couldn't be any easier than it is with jQuery. jQuery has a handful of functions that make the easy stuff really easy and the complex stuff as simple as possible.

A common use of Ajax is to load a chunk of HTML into an area of the page. To do that, simply select the element you need and use the load() function. Here's an example that updates some statistics:

$('#stats').load('stats.html');

Often, you simply need to pass some parameters to a page on the server. As you'd expect, this is incredibly simple in jQuery, too. You can use choose between $.post() and $.get(), depending on which method you need. You can pass an optional data object and callback function if you need them. Listing 4 shows a simple example that sends data and uses a callback.

Listing 4. Sending data to a page with Ajax
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

If you really want to do some complex Ajax scripting, you need the $.ajax() function. You can specify xml, html, script, or json, and jQuery automatically prepares the result for your callback function so that you can use it right away. You can also specify beforeSend, error, success, or complete callbacks to give the user more feedback about the Ajax experience. In addition, other parameters are available with which you can set the timeout of an Ajax request or the "Last Modified" state of a page. Listing 5 shows an example that retrieves an XML document using some of the parameters that I mentioned.

Listing 5. Complex Ajax made simple with $.ajax()
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

When you get the XML back in the success callback, you can use jQuery to look through the XML the same way you do with HTML. This makes it easy to work with an XML document and integrate the contents and data into your Web site. Listing 6 shows an expansion on the success function that adds a list item to the Web page for each <item> element in the XML.

Listing 6. Working with XML using jQuery
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

Animate your HTML

You can use jQuery to take care of basic animations and effects. At the heart of the animation code is the animate() function, which changes any numeric CSS style value over time. For example, you can animate height, width, opacity, or position. You can also specify the speed of the animation, either in milliseconds or in one of the predefined speeds: slow, normal, or fast.

Here's an example that animates the height and width of an element at the same time. Notice that there is no start value -- only the end value. The start values are taken from the current size of the element. I've also attached a callback function.

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});

jQuery makes the more common animations easier with built-in functions. You can use show() and hide() elements, either instantly or at a specified speed. You can also make elements appear and disappear by using fadeIn() and fadeOut() or slideDown() and slideUp(), depending on what kind of effect you're looking for. Here's a simple example that slides down a navigation:

$('#nav').slideDown('slow');

DOM scripting and event handling

jQuery is, perhaps, best at simplifying DOM scripting and event handling. Traversing and manipulating the DOM is easy, and attaching, removing, and calling events is completely natural and much less error prone than doing it by hand.

In essence, jQuery makes it easier to do things that are common with DOM scripting. You can create elements and use the append() function to link them to other elements, use clone() to duplicate elements, set the contents with html(), delete the contents with the empty() function, delete the elements altogether with the remove() function, and even use the wrap() function to wrap the elements with another element.

Several functions are available for changing the contents of the jQuery object itself by traversing the DOM. You can get all the siblings(), parents(), or children() of an element. You can also select the next() or prev() sibling elements. Perhaps most powerful is the find() function, which allows you to use a jQuery selector to search through the descendants of elements in your jQuery object.

These functions become more powerful when used with the end() function. This function is like an undo function, going back to the jQuery object you had before you called find() or parents() or one of the other traversing functions.

When used together with method chaining, these functions allow complex operations to look simple. Listing 7 shows an example in which you find a login form and manipulate several elements around it.

Listing 7. Traversing and manipulating the DOM with ease
$('form#login')
    // hide all the labels inside the form with the 'optional' class
    .find('label.optional').hide().end()

    // add a red border to any password fields in the form
    .find('input:password').css('border', '1px solid red').end()

    // add a submit handler to the form
    .submit(function(){
        return confirm('Are you sure you want to submit?');
    });

Believe it or not, this example is just a single, chained, line of code spread out with whitespace. First, I selected the login form. Then, I found the optional labels inside it, hid them, and called end() to go back to the form. I found the password field, made the border red, and again called end() to go back to the form. Finally, I added a submit event handler to the form. What's especially interesting about this (besides its obvious brevity) is that jQuery completely optimizes all the query operations, making sure that you don't have to find an element twice when everything is nicely chained together.

Handling common events is as simple as calling a function like click(), submit(), or mouseover() and passing it an event handler function. Additionally, you have the option of assigning a custom event handler using bind('eventname', function(){}). You can remove certain events using unbind('eventname') or all events with unbind(). For a complete list of ways to use these and other functions, check out the jQuery application program interface (API) documentation in the Resources.


Unleash the power of jQuery selectors

Often, you select elements by ID, such as #myid, or by class name, such as div.myclass. However, jQuery has a rather complex and complete selector syntax that allows you to select nearly any combination of elements in a single selector.

jQuery's selector syntax is based heavily on CSS3 and XPath. The more you know about CSS3 and XPath syntax, the better you'll be at using jQuery. For a complete list of jQuery selectors, including CSS and XPath, check out the links in Resources.

CSS3 contains some syntax that not every browser supports, so you don't see it often. However, you can still use CSS3 in jQuery to select elements, because jQuery has its own, custom selector engine. For example, to add a dash inside every empty column of a table, use the :empty pseudo-selector:

$('td:empty').html('-');

What about finding every element that doesn't have a certain class? CSS3 has a syntax for that, too, using the :not pseudo-selector. Here's how you can hide every input that doesn't have a class of required:

$('input:not(.required)').hide();

You can also join multiple selectors into one using commas, just as in CSS. Here's a simple example that hides every type of list on the page at the same time:

$('ul, ol, dl').hide();

XPath is a powerful syntax for finding elements in a document. It's a bit different than CSS and lets you do a few things you can't do with CSS. To add a border to the parent element of every check box, you can use XPath's /.. syntax:

$("input:checkbox/..").css('border', '1px solid #777');

jQuery adds extra selectors that aren't available in CSS or XPath, as well. For example, to make a table more readable, you would typically attach a different class name to every odd or even row of the table -- otherwise known as striping the table. Doing this with jQuery is a cinch, thanks to the :odd pseudo-selector. This example changes the background of every odd row in tables with a striped class:

$('table.striped > tr:odd').css('background', '#999999');

You can see how the power of jQuery selectors can simplify your code. Whatever selection of elements you want to affect, no matter how specific or obscure, you can probably find a way to define them using a single jQuery selector.


Extend jQuery with plug-ins

Unlike with most software, writing plug-ins for jQuery isn't a huge ordeal with a complex API. In fact, jQuery plug-ins are so easy to write that you might want to write a few to make your code even simpler. Here's the most basic jQuery plug-in you can write:

$.fn.donothing = function(){
    return this;
};

Although simple, this plug-in does require a bit of explanation. First, to add a function to every jQuery object, you must assign it to $.fn. Next, this function must return this (the jQuery object) so that it doesn't break method chaining.

You can easily build on top of this simple example. To write a plug-in to change the background instead of using css('background'), you use this:

$.fn.background = function(bg){
    return this.css('background', bg);
};

Notice that I could just return the value from css(), because it already returns the jQuery object. So, method chaining will still work fine.

I recommend that you use jQuery plug-ins anytime you find that you repeat yourself. For example, you might use a plug-in if you're using the each() function to do the same thing over and over.

Because jQuery plug-ins are so easy to write, hundreds of them are available for you to use. jQuery has plug-ins for tabs, rounded corners, slide shows, tool tips, date selectors, and probably anything else you can imagine. For a complete list of plug-ins, check out the Resources.

The most complex and most widely used plug-in is Interface, an animation plug-in that handles sorting, drag-and-drop functionality, complex effects, and other interesting and complex user interfaces (UIs). Interface is to jQuery what Scriptaculous is to Prototype.

Also popular and useful is the Form plug-in, which allows you to easily submit a form in the background using Ajax. This plug-in takes care of the common situation in which you need to hijack the submit event of a form, then find all the different input fields and use them to construct an Ajax call.


Life after jQuery

I've only scratched the surface of what is possible with jQuery. jQuery is fun to use, because you always learn new tricks and features that seem so natural. jQuery simplifies your JavaScript and Ajax programming completely from the first moment you use it; every time you learn something new, your code gets a bit simpler.

After learning jQuery, I've had a lot more fun programming in the JavaScript language. All the boring stuff is taken care of, so I can focus on coding the juicy stuff. With jQuery, I can barely remember the last time I wrote a for loop. I even cringe at the thought of working with other JavaScript libraries. jQuery has honestly and truly changed the way I look at JavaScript programing forever.

Resources

Learn

  • developerWorks XML zone: Learn all about XML at the developerWorks XML zone.
  • jQuery API documentation: Explore the complete documentation of jQuery with links to tutorials as well as the API reference.
  • jQuery tutorials: Check out a great collection of multilingual jQuery tutorials, including 40 in English.
  • XML technical library: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.

Get products and technologies

  • jQuery: Visit the main jQuery site and download the source code.
  • Selectors: Get a complete list of all the selectors you can use with jQuery, including CSS3 and XPath selectors.
  • jQuery plug-ins: Find a nearly complete list of available jQuery plug-ins.
  • Interface: Try the ultimate jQuery plug-in for animation, effects, drag-and-drop functionality, and UIs.

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into XML on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=XML, Web development
ArticleID=205662
ArticleTitle=Simplify Ajax development with jQuery
publish-date=04102007