Introduction to jQuery

Best practice web application design calls for an effective separation between content, layout, and behavioral code. HTML should be used for content and CSS for layout. Frames, layout tables and depreciated html elements like <CENTER> and <FONT> should be replaced by CSS in separate files. This makes it easier to maintain a standard look and feel for each form in an application and provide customized layouts for printers and handheld devices.

The same principle applies to Java Script code. It should be maintained in separately and get referenced into the html rather than being embedded in it. The jQuery JavaScript library provides a series of functions to support this. These functions are broken down into 3 areas:

  1. jQuery Core A series of functions for DOM element selection and manipulation. These provide the ability to identify elements using CSS selectors and xpath expressions. Selected elements can be modified by adding event handlers or modifying their CSS properties. They can also have their content changed using static text or an Ajax call.
  2. jQuery UI A collection of widgets and interaction properties that can be used to modify an applications look and feel. The list of widgets include a date picker, autocomplete, accordion, tabs and dialog controls. Interaction properties provide the ability to create screen elements that can be moved or resized.
  3. Plugins The jQuery framework is extensible. Developers can write plugins to implement custom widgets or functionality. Plugins can be registered on the jQuery website. The website maintains a searchable library of registered plugins.


The jQuery website - has extensive documentation on its features along with tutorials and code examples.


The following code uses jQuery UI's autocomplete function to supply suggested values for an input field with an id of "prodName" and adds a date picker to each field with a class of "date-pick"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
  <title>jQuery Demo</title>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
  <script type="text/javascript"
  <link rel="stylesheet" type="text/css"
        href="/olaf/css/rnt_jquery.css" />

 <script type="text/javascript"> 
  $(document).ready(function() { 
    var productList = 
     ["Advanced Benefits", "Advanced Outbound", 
      "Advanced Product Catalog", "Advanced Queuing", 
      "Hyperion Application Link Adapter for Planning", "Hyperion BI+", 
      "Hyperion Business Rules", "Hyperion Data Integration Management", 
      "Oracle Data Warehouse for Retail", "Oracle Database", 
      "Oracle Fusion Sales", "Oracle Fusion Sales Catalog" ]; 

	$(".date-pick").datepicker(); }); 
    <form action="#">
           id="prodName" type="text" size="35" value="" /></td>
       <tr><td>Patch Date Since</td>
           <td><input id="startDate" class="date-pick" /></td>
       <tr><td>Patch Date Before</td>
           <td><input id="endDate" class="date-pick" /></td>

File Format

Most jQuery files are available in 3 separate formats: .js .pack.js and .min.js. The pack and min versions of the file are compressed versions of the native .js version. Packed files are compressed using Yahoo's YUI Compressor and Minimized files are compressed using JSMin. Each file is functionally equivalent. Packed files are typically the smallest of the 3. This reduces the download time but doesn't necessarily result in the fastest page load. The browser needs to uncompress the file before processing it. JSMin relies on a simple algorithm. It strips unnecessary white space from the file but does not affect the content. Minimized files do not need to be uncompressed by the browser.

Use the minimized version of the file in preference to the packed one if it is available. The uncompressed version is provided for development and debugging.