Web Development

Simplify JavaScript development with jQuery

The jQuery JavaScript library provides functions that simplify coding tasks. You can download jQuery, and be up and running in no time.

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.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

3 comments
akeane
akeane

Listings no longer exist??????

point5u
point5u

There is a new language for client-side web development in town, Milescript. In a few words, it's a high-level, strongly-typed language that compiles to ECMAScript. The compiler is open source and some of the features include: Inheritance, Abstracts, Interfaces Delegates and Generic Types Function and Constructor Overloading Object-Oriented Design. A more complete list can be found at http://point5u-trac.cvsdude.com/Milescript/wiki/LanguageFeatures The compiler is released under the Apache 2 License so feel free to check it out at no cost! http://milescript.org

Editor's Picks