|
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:
$(‘#message‘).css(‘background‘, ‘yellow‘).html(‘Hello!‘).show();
|
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:
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:
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.
- Visual jQuery: Read an interactive and easy-to-navigate jQuery API reference.
- IBM XML certification:Find out how you can become an IBM-Certified Developer in XML and related technologies.
- 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.
- Form plug-in: Get a jQuery plug-in that lets you submit a form using Ajax.
Discuss
|
