I am always open to trying new tools or taking advantage of
resources that can save me development time. With all of the Web development tools
that are out there, it can be difficult to narrow your search.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

One tool that I recently discovered is jQuery. The jQuery
development team
puts it best when they describe jQuery as “a fast,
concise, JavaScript library that simplifies how you traverse HTML documents,
handle events, perform animations, and add AJAX interactions to your Web
pages.”

Getting started with jQuery

The latest version of jQuery is freely available for download.
It is comprised of one script file that is clearly documented, so feel free to
peruse the source code. Once the JavaScript file has been downloaded, you can
place it on your Web server, and you are ready to use it. You can load the jQuery library into any Web page via the HTML SCRIPT
element. The src attribute should utilize the path to
where the file is located on your server.

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

With the file ready for use, here are tasks for which you may find it helpful to use jQuery.

Coding basics

Here are a few pointers to get up and running for coding
with jQuery:

  • jQuery code starts its code
    blocks with a dollar sign ($).
  • The
    dollar sign is followed by an open parenthesis.
  • The
    parenthesis contains what you tell jQuery to
    find, such as what elements it should use.
  • The
    close parenthesis is followed by any event for the specific object.
  • You
    can define what happens with the event specified. The parenthesis
    following the method/event includes a function that signals what happens
    when the event occurs.

Before diving into an example, I want to cover one of the
most useful and basic elements of the jQuery library.
Everything that jQuery utilizes is in the HTML DOM, so the document
must be loaded before you may use the features of jQuery.
This is accomplished with the document’s ready event, which the following jQuery snippet uses:

$(document).ready(function() {
// Your code goes here
});

This simple bit of jQuery code
allows you to execute code the second the document is completely loaded. It is
used in the example in
Listing A,
which applies a CSS class to all header elements on the page.

This code has the following elements:

  • $(document).ready(function(){
    – Tells the page to execute the code (within function body) once the page
    has fully loaded.
  • $(‘h1’).addClass(“testclass”);}); – Locates all HTML H1
    elements on the page. The addClass method
    assigns the testclass CSS class to all H1
    elements. This class sets a yellow background color, so all headers appear
    with this background.

The jQuery documentation outlines
numerous additional event properties and functions and describes how to use
them. One simple example is coding the click event for a hyperlink as the code
in Listing B demonstrates. When the
link is selected, an alert window is displayed before the user is transferred
to the link’s target. The ready function is used again to define the click
event only after the full content of the page has loaded.

You are not restricted to using jQuery
in the header portion of a page — it can easily be included in element events
or anywhere on the page. You can utilize any type of JavaScript in conjunction
with the jQuery library.

The example in
Listing C displays the total number of paragraphs (denoted by the P element) on the
page in a pop-up window when the button is selected. The jQuery
formatted JavaScript is included in the button coding.

The example in
Listing D uses jQuery to customize the bullets in a list
of items displayed on the page. CSS is used to remove the standard bullet
characters via the list’s style attribute. This approach allows you to use any characters or even images in a list with very little coding.

The example code included in this article provides a
glimpse of the power and flexibility offered by the jQuery
library. Learn more with the comprehensive example code and tutorials available
online.

Doing it faster

With jQuery, you can get to just
about anything on a Web page. Its syntax makes it easy to quickly locate HTML
DOM elements. While this is readily available with standard JavaScript, jQuery presents a streamlined syntax that allows you to
reduce coding tasks with less code and less time.

Have you worked with the jQuery
library or another development library? Share your thoughts and experiences with
the Web development community by posting to the article discussion.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.