InfoQ

News

jQuery: A new way to write JavaScript for rich web UI

Posted by Anil Bhatt on Jul 11, 2007 07:32 PM

Community
Java
Topics
Web Frameworks
Tags
AJAX

Created by John Resig in early 2006, jQuery provides the following main features to simplify JavaScript development:

JQuery Selectors

The basic premise in jQuery is a jQuery selector, which can be used to select elements from an HTML DOM and operate on them. For example, the following jQuery code snippet will show an alert message whenever a link on a page is clicked:

$("a").click(function() { alert("You are leaving this page!");});


$("a") is a jQuery selector. In this case, it selects all anchor elements. $ itself is an alias for the jQuery "class", therefore $() constructs a new jQuery object. The click() function is a method of the jQuery object. It binds a click event to all selected elements (in this case, a single anchor element) and executes the provided function when the event occurs.

Off course, you can apply filters if you want the alert to be shown only for certain links.

The traditional JavaScript will accomplish the same by:


<a href="http://www.infoq.com" onclick="alert('You are leaving this page!')">infoQ</a>


With jQuery, we don't need to write an onclick for every single element. We have a clean separation of structure (HTML) and behavior (JavaScript).

Special Effects

Here is another example of a special effect feature in jQuery. The following code snippet looks for all paragraphs that have a class of "surprise", adds the class "shock" to them, then slowly reveals them:

 

$("p.surprise").addClass("shock").show("slow");

 

Ajax Development

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


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


The latest version, jQuery 1.1.3 has recently been released with DOM traversal over 800% faster than in 1.1.2. Other major enhancements include a re-written event system , with more graceful handling of keyboard events and a re-written special effects system.

3 comments

Reply

Desktop by Kit Davies Posted Jul 12, 2007 4:51 AM
Re: Desktop by Noah Campbell Posted Jul 12, 2007 11:39 AM
JS wrapper for XUL and hta by karan malhi Posted Jul 13, 2007 12:22 AM
  1. Back to top

    Desktop

    Jul 12, 2007 4:51 AM by Kit Davies

    I'd be interested to know if there are any HTML/JS apps that have been written purely for the desktop and local deployment (backed by eg. Google Gears). I was previously sceptical of JS in the browser, but it seems the JS libraries are beginning to mature and I may have to eat my words!
    Kit

  2. Back to top

    Re: Desktop

    Jul 12, 2007 11:39 AM by Noah Campbell

    On Windows, the .hta is an html application. You'll find it embedded in quite a few place, but perhaps not using the AJAX libraries for effects. It wouldn't be impossible since .hta will invoke an IE browser container.

  3. Back to top

    JS wrapper for XUL and hta

    Jul 13, 2007 12:22 AM by karan malhi

    I was wondering if there is a library which could wrap XUL and hta components. This would really allow to use rich widgets which are browser specific but using a common JS library.

Exclusive Content

Book Except and Interview : Aptana RadRails, An IDE for Rails Development

Aptana RadRails: An IDE for Rails Development by Javier Ramírez discusses the latest Aptana RadRails IDE, a development environment for creating Ruby on Rails applications.

Fast Bytecodes for Funny Languages

Cliff Click discusses how to optimize generated bytecode for running on the JVM. Click analyzes and reports on several JVM languages and shows several places where they could increase performance.

Scott Ambler On Agile’s Present and Future

Scott Ambler, Practice Lead for Agile Development at IBM, speaks on the current status of the Agile community and practices having a look at the perspective of the Agile’s future.

Manager's Introduction to Test-Driven Development

Dave Nicolette and Karl Scotland try to introduce non-technical managers to one of the most popular Agile development techniques: Test-Driven Development (TDD).

Structured Event Streaming with Smooks

Smooks is best known for its transformation capabilities, but in this article Tom Fennelly describes how you can also use it for structured event streaming.

How to Work With Business Leaders to Manage Architectural Change

Successful architectures evolve over time to meet changing business requirements. Luke Hohmann presents how to collaborate with key members of your business to manage architectural changes.

Colors and the UI

In this article, Dr. Tobias Komischke explains how colors used in a GUI can influence our interaction with a computer and offers advice on using the appropriate colors for the interface.

Building your next service with the Atom Publishing Protocol

In his presentation, recorded at QCon San Francisco, MuleSource architect Dan Diephouse explores ways to use the Atom Publishing Protocol (AtomPub) when building services in a RESTful way.