http://www-128.ibm.com/developerworks/library/x-ajaxjquery.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><title>Simplify Ajax development with jQuery</title><meta content="(PICS-1.1 &quot;http://www.icra.org/ratingsv02.html&quot; l gen true r (cz 1 lz 1 nz 1 oz 1 vz 1) &quot;http://www.rsac.org/ratingsv01.html&quot; l gen true r (n 0 s 0 v 0 l 0) &quot;http://www.classify.org/safesurf/&quot; l gen true r (SS~~000 1))" http-equiv="PICS-Label"/><link href="http://purl.org/DC/elements/1.0/" rel="schema.DC"/><link href="http://www.ibm.com/favicon.ico" rel="SHORTCUT ICON"/><meta content="dW Information/Raleigh/IBM" name="Owner"/><meta content="en-US" scheme="rfc1766" name="DC.Language"/><meta content="ZZ" name="IBM.Country"/><meta content="Public" name="Security"/><meta name="Abstract" content="jQuery is a JavaScript library that helps simplify your JavaScript and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins." /><meta name="Description" content="jQuery is a JavaScript library that helps simplify your JavaScript and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins." /><meta name="Keywords" content="jQuery, JavaScript library, libraries, JavaScript, Ajax, DOM Scripting,   animations, web development, plugins, CSS, XPath, Jesse Skinner, tttxca, tttwaca" /><meta name="DC.Date" scheme="iso8601" content="2007-04-10" /><meta name="Source" content="Based on v14 Template Generator, Template 14.0" /><meta name="DC.Rights" content="Copyright (c) 2007 by IBM Corporation" /> <meta name="Robots" content="index,follow" /><meta name="IBM.Effective" scheme="W3CDTF" content="2007-04-10" /><meta name="Last update" content="10042007vsuddaby@us.ibm.com" /><link href="//www.ibm.com/common/v14/table.css" media="screen,print" type="text/css" rel="stylesheet"/><script language="JavaScript" src="/developerworks/js/dwcss14.js" type="text/javascript"></script><link href="//www.ibm.com/common/v14/main.css" type="text/css" rel="stylesheet"/><link href="//www.ibm.com/common/v14/screen.css" media="all" type="text/css" rel="stylesheet"/><link href="//www.ibm.com/common/v14/print.css" media="print" type="text/css" rel="stylesheet"/><script language="JavaScript" src="
//www.ibm.com/common/v14/detection.js" type="text/javascript"></script><script language="JavaScript" src="/developerworks/js/dropdown.js" type="text/javascript"></script><script language="JavaScript" src="/developerworks/email/grabtitle.js" type="text/javascript"></script><script language="JavaScript" src="/developerworks/email/emailfriend2.js" type="text/javascript"></script><script language="JavaScript" src="/developerworks/js/dwplugin.js" type="text/javascript"></script><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><script language="javascript" src="/developerworks/js/ajax1.js" type="text/javascript"></script><script language="javascript" src="/developerworks/js/searchcount.js" type="text/javascript"></script><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><script language="JavaScript" type="text/javascript">var emailAbstract = "jQuery is a JavaScript library that helps simplify your JavaScript and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins."; </script></head><body><!--MASTHEAD_BEGIN--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td class="bbg" width="110"><a href="http://www.ibm.com/"><img alt="IBM&reg;" border="0" height="52" src="//www.ibm.com/i/v14/t/ibm-logo.gif" width="110"/></a></td>
<td class="bbg"><img src="//www.ibm.com/i/c.gif" width="1" height="1" border="0" alt="" /></td>
<td align="right"  class="mbbg" width="650">
<table border="0" cellpadding="0" cellspacing="0" align="right" >
<tr class="cty-tou">
<td rowspan="2" width="17" class="upper-masthead-corner"><a href="#main"><img src="//www.ibm.com/i/c.gif" border="0" width="1" height="1" alt="Skip to main content"/></a></td>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr>
<td><span class="spacer">&nbsp;&nbsp;&nbsp;&nbsp;</span><b class="country">Country/region</b><span class="spacer">&nbsp;[</span><a class="ur-link" href="http://www.ibm.com/developerworks/country/">select</a><span class="spacer">]</span></td>
<td width="29" class="upper-masthead-divider">&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td align="left"><a class="ur-link" href="http://www.ibm.com/legal/">Terms of use</a></td>
</tr>
</table>
</td>
<td width="40">&nbsp;</td>
</tr>
<tr>
<td class="cty-tou-border" height="1" colspan="2"><img src="//www.ibm.com/i/c.gif" alt="" height="1" width="1"/></td>
</tr>
<tr>
<td colspan="3"><img alt="" height="8" src="//www.ibm.com/i/c.gif" width="1"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td align="center" colspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<form method="get" action="//www.ibm.com/developerworks/search/searchResults.jsp" id="form1" name="form1"><input type="hidden" name="searchType" value="1"/><input type="hidden" name="searchSite" value="dW"/>
<td width="18"><label for="q"><img src="//www.ibm.com/i/c.gif" width="1" height="1" alt="Search in:"/></label></td>
<td align="right"><select id="sq" name="searchScope" class="input-local" size="1">
<label for="sq"><option value="dW" selected>All of dW</option>
<option value="dW">-----------------</option>
<option value="aixunix">&nbsp;&nbsp;AIX and UNIX</option>
<option value="eserver">&nbsp;&nbsp;IBM Systems</option>
<option value="db2">&nbsp;&nbsp;Information Mgmt</option>
<option value="lotus">&nbsp;&nbsp;Lotus</option>
<option value="rdd">&nbsp;&nbsp;Rational</option>
<option value="tivoli">&nbsp;&nbsp;Tivoli</option>  
<option value="WSDD">&nbsp;&nbsp;WebSphere</option>
<option value="dW">-----------------</option> 
<option value="archZ">&nbsp;&nbsp;Architecture</option>
<option value="acZ">&nbsp;&nbsp;Autonomic computing</option>
<option value="gridZ">&nbsp;&nbsp;Grid computing</option>
<option value="javaZ">&nbsp;&nbsp;Java technology</option> 
<option value="linuxZ">&nbsp;&nbsp;Linux</option> 
<option value="opensrcZ">&nbsp;&nbsp;Open source</option>
<option value="paZ">&nbsp;&nbsp;Power Architecture</option>
<option value="webservZ">&nbsp;&nbsp;SOA &amp; Web services</option>
<option value="webarchZ">&nbsp;&nbsp;Web development</option>  
<option value="xmlZ">&nbsp;&nbsp;XML</option>
<option value="dW">-----------------</option>
<option value="forums">&nbsp;&nbsp;dW forums</option> 
<option value="dW">-----------------</option>
<option value="aW">alphaWorks</option>
<option value="dW">-----------------</option>
<option value="all">All of IBM</option>
</label></select></td>
<td width="7" align="right"><label for="q"><img src="//www.ibm.com/i/c.gif" width="1" height="1" alt="Search for:"/></label>&nbsp;&nbsp;</td>
<td align="right"><input class="input" id="q" maxlength="100" name="query" size="15" type="text" value=""/>
</td>
<td width="7">&nbsp;
</td>
<td width="90"><input alt="Search" name="Search" src="//www.ibm.com/i/v14/t/search.gif" type="image" value="Search" /></td>
<!-- <td width="20">&nbsp;</td> -->
</form>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="blbg" colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><span class="spacer">&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
<td><a class="masthead-mainlink" href="http://www.ibm.com/">Home</a></td>
<td class="masthead-divider" width="27">&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><a class="masthead-mainlink" href="http://www.ibm.com/products/">Products</a></td>
<td class="masthead-divider" width="27">&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><a class="masthead-mainlink" href="http://www.ibm.com/servicessolutions/">Services &amp; industry solutions</a></td>
<td class="masthead-divider" width="27">&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><a class="masthead-mainlink" href="http://www.ibm.com/support/">Support &amp; downloads</a></td>
<td class="masthead-divider" width="27">&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><a class="masthead-mainlink" href="http://www.ibm.com/account/">My IBM</a></td>
<td><span class="spacer">&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

<script src="//www.ibm.com/common/v14/pmh.js" language="JavaScript" type="text/javascript"></script>

<script><!--
  if(document.images){ (new Image()).src="http://api.collarity.com/cws/v1/nf?appid=ibmdw&u="+escape(document.URL)+"&t="+escape(document.title)+"&r="+escape(document.referrer); } 
//-->
</script>

<!--MASTHEAD_END--><!-- CMA ID for this content is: 205662 --> <table id="v14-body-table" border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top"><!--LEFTNAV_BEGIN--><td id="navigation" width="150"><table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td class="left-nav-spacer"><a href="http://www.ibm.com/developerworks" class="left-nav-overview"> </a></td></tr></table><table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td colspan="2" class="left-nav-overview"><a href="http://www.ibm.com/developerworks" class="left-nav-overview">developerWorks</a></td></tr></table><table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td colspan="2" class="left-nav-highlight"><a href="#" class="left-nav">In this article:</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#whats-jquery" class="left-nav-child">What's jQuery?</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#simplification" class="left-nav-child">Some simple
		simplifications</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#simplifying-ajax" class="left-nav-child">Ajax made simple</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#animation" class="left-nav-child">Animate your HTML</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#dom-and-events" class="left-nav-child">DOM scripting and
		event handling</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#selectors" class="left-nav-child">Unleash the power of
		jQuery selectors</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#plugins" class="left-nav-child">Extend jQuery with plug-ins</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#life-after-jquery" class="left-nav-child">Life after jQuery</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#resources" class="left-nav-child">Resources</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#author" class="left-nav-child">About the author</a></td></tr><tr class="left-nav-child-highlight"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/cl-bullet.gif"/></td><td><a href="#rate" class="left-nav-child">Rate this page</a></td></tr><tr class="left-nav-last"><td width="14"><img class="display-img" alt="" height="1" width="14" src="//www.ibm.com/i/c.gif"/></td><td width="136"><img class="display-img" alt="" height="19" width="136" src="//www.ibm.com/i/v14/t/left-nav-corner.gif"/></td></tr></table><br /><table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td class="related" colspan="2"><b class="related">Related links</b></td></tr><tr class="rlinks"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/rl-bullet.gif"/></td><td><a class="rlinks" href="http://www.ibm.com/developerworks/views/xml/library.jsp">XML technical library</a></td></tr><tr class="rlinks"><td><img alt="" height="8" width="2" src="//www.ibm.com/i/v14/t/rl-bullet.gif"/></td><td><a class="rlinks" href="http://www.ibm.com/developerworks/views/web/library.jsp">Web development technical library</a></td></tr><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- No content currently --><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><tr><td width="14"><img class="display-img" alt="" height="1" width="14" src="//www.ibm.com/i/c.gif"/></td><td width="136"><img class="display-img" alt="" height="19" width="136" src="//www.ibm.com/i/c.gif"/></td></tr></table><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- Next Steps Area:  Start -->
<!-- Call Next Steps Servlet -->
<script language="JavaScript" type="text/javascript">
<!--
/*
 * ajaxInclude makes a call to the url and render the results in the div tag specified in divId
 */
function ajaxInclude(url, divId) { 
 var req = newXMLHttpRequest(); 
 if (req) { 
   req.onreadystatechange = getReadyStateHandler(req, 
	function (result) {  
           var contents = document.getElementById(divId);  
           if (result != null && result.length > 0 && contents != null) {
	     contents.innerHTML = result;  
           }
        }); 
   req.open("GET", url, true);
   req.send("");
 }
}
//-->
</script>

<!-- Display Next Steps Result -->
<div id="nextsteps"></div>

<!-- Initiate Next Steps Call -->
<script language="JavaScript" type="text/javascript">
<!-- 
 ajaxInclude("/developerworks/niagara/jsp/getNiagaraContent.jsp?url="+window.location.href,"nextsteps");
//-->
</script>
<!-- Next Steps Area:  End --><!--END RESERVED FOR FUTURE USE INCLUDE FILES--></td><!--LEFTNAV_END--><td width="100%"><table id="content-table" border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top"><td width="100%"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><a name="main"><img border="0" alt="skip to main content" height="1" width="592" src="//www.ibm.com/i/c.gif"/></a></td></tr></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top"><td height="18" width="10"><img alt="" height="18" width="10" src="//www.ibm.com/i/c.gif"/></td><td width="100%"><img alt="" height="6" width="1" src="//www.ibm.com/i/c.gif"/><br /><a href="http://www.ibm.com/developerworks/" class="bctl">developerWorks</a><span class="bct">  &gt;  </span><a class="bctl" href="http://www.ibm.com/developerworks/xml/">XML</a><span class="bct"> | </span><a href="http://www.ibm.com/developerworks/web/" class="bctl">Web development</a><span class="bct">  &gt;</span><img alt="" height="1" width="1" src="//www.ibm.com/i/c.gif"/><br /><h1>Simplify Ajax development with jQuery</h1><p id="subtitle"><em>Discover how easy Ajax and DOM scripting can be</em></p><img alt="" height="6" width="1" src="//www.ibm.com/i/c.gif" class="display-img"/></td><td class="no-print" width="192"><a href="http://www.ibm.com/developerworks/"><img alt="developerWorks" border="0" height="18" width="192" src="/developerworks/i/dw.gif"/></a></td></tr></table></td></tr></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top"><td width="10"><img alt="" height="1" width="10" src="//www.ibm.com/i/c.gif"/></td><td width="100%"><table class="no-print" border="0" width="160" cellspacing="0" cellpadding="0" align="right"><tr><td width="10"><img alt="" height="1" width="10" src="//www.ibm.com/i/c.gif"/></td><td><table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td class="v14-header-1-small">Document options</td></tr></table><table class="v14-gray-table-border" cellspacing="0" cellpadding="0" border="0"><tr><td class="no-padding" width="150"><table width="143" cellspacing="0" cellpadding="0" border="0"><script language="JavaScript" type="text/javascript">
<!--
document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img alt="Set printer orientation to landscape mode" height="16" src="//www.ibm.com/i/v14/icons/printer.gif" width="16" vspace="3" /></td><td width="122"><p><b><a class="smallplainlink" href="javascript:print()">Print this page</a></b></p></td></tr>');
//-->
</script>
<noscript></noscript><script language="JavaScript" type="text/javascript">
<!-- 5.6 10/24 llk: added cdata around the subdirectory path of email gif-->
<!--
document.write('<tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td width="16"><img src="//www.ibm.com/i/v14/icons/em.gif" height="16" width="16" vspace="3" alt="Email this page" /></td><td width="122"><p><a class="smallplainlink" href="javascript:void newWindow()"><b>E-mail this page</b></a></p></td></tr>');
//-->
</script><noscript><tr valign="top"><td width="8"><img alt="" height="1" width="8" src="//www.ibm.com/i/c.gif"/></td><td width="16"><img alt="" width="16" height="16" src="//www.ibm.com/i/c.gif"/></td><td class="small" width="122"><p><span class="ast">Document options requiring JavaScript are not displayed</span></p></td></tr></noscript></table></td></tr></table><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- 04/04/07 refreshed by gem, per MOC --> 

<br /><table border="0" cellpadding="0" cellspacing="0" width="150"><tr><td class="v14-header-2-small">Congratulations!</td></tr></table><table border="0" cellpadding="0" cellspacing="0" class="v14-gray-table-border"><tr><td width="150" class="no-padding"><table border="0" cellpadding="0" cellspacing="0" width="143"><tr valign="top"><td width="8"><img src="//www.ibm.com/i/c.gif" width="8" height="1" alt=""/></td><td><img src="//www.ibm.com/i/v14/icons/fw_bold.gif" height="16" width="16" border="0" vspace="3" alt=""/></td><td width="125"><p><a href="http://www-03.ibm.com/developerworks/blogs/page/moc?entry=dw_wins_jolt_hall_of" class="smallplainlink">developerWorks wins Jolt Hall of Fame award
</a>
</p></td></tr></table></td></tr></table><!--END RESERVED FOR FUTURE USE INCLUDE FILES--><br /><table width="150" cellspacing="0" cellpadding="0" border="0"><tr><td class="v14-header-2-small">Rate this page</td></tr></table><table class="v14-gray-table-border" cellspacing="0" cellpadding="0" border="0"><tr><td class="no-padding" width="150"><table width="143" cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td width="8"><img alt="" height="1" width="8" src="//www.ibm.com/i/c.gif"/></td><td><img alt="" vspace="3" border="0" width="16" height="16" src="//www.ibm.com/i/v14/icons/d_bold.gif"/></td><td width="125"><p><a href="#rate" class="smallplainlink"><b>Help us improve this content</b></a></p></td></tr></table></td></tr></table><br /></td></tr></table><p>Level: Intermediate</p><p><a href="#author">Jesse Skinner</a>, Web Developer, Freelance<br /></p><p> 10 Apr  2007</p><blockquote>jQuery is a JavaScript library that helps simplify your JavaScript&#8482; and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.</blockquote><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><script language="JavaScript" type="text/javascript">
<!--
if (document.referrer&&document.referrer!="") { 
   // document.write(document.referrer);
   var q = document.referrer;
   var engine = q;
   var isG = engine.search(/google\.com/i);
   var searchTerms;
   //var searchTermsForDisplay;
   if (isG != -1) { 
	   var i = q.search(/q=/);
	   var q2 = q.substring(i+2);
	   var j = q2.search(/&/);
	   j = (j == -1)?q2.length:j;
	   searchTerms = q.substring(i+2,i+2+j);
	   if (searchTerms.length != 0) {
	       searchQuery(searchTerms);
	       document.write("<div id=\"contents\"></div>");
	   }
   } 
}
//-->
</script><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
	<p><a name="whats-jquery"><span class="atitle">What's jQuery?</span></a></p>
<p>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.</p>
		<p>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.</p>
		<p>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.</p>

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="simplification"><span class="atitle">Some simple
		simplifications</span></a></p>
		<p>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
			<a href="#list1">Listing 1</a>.</p>

<br /><a name="list1"><b>Listing 1. DOM scripting without jQuery</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i &lt; links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}
</pre></td></tr></table><br />

		<p><a href="#list2">Listing 2</a> shows the same functionality achieved using jQuery.</p>

<br /><a name="list2"><b>Listing 2. DOM scripting with jQuery</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});
</pre></td></tr></table><br />

		<p>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 <code>click()</code> 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.</p>
		<p>It can be a bit tricky to understand how this code even gets the job done. First,
			you have the <code>$()</code> 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.</p>
		<p>If you know the basics of CSS selectors, this syntax should look familiar. In
			<a href="#list2">Listing 2</a>, <code>#external_links</code> looks for the element with an
			<code>id</code> of <code>external_links</code>. A space
			followed by <code>a</code> tells jQuery to look for all the
			<code>&lt;a&gt;</code> elements inside the <code>external_links</code>
			element. That's a mouthful to say in English -- and even in DOM scripting -- but in
			CSS, it couldn't be simpler.</p>
		<p>The <code>$()</code> function returns a jQuery object containing all
			the elements that match the CSS selector. A <i>jQuery object</i> 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
			<code>click</code> function.</p>
		<p>You can also pass an element or an array of elements to the <code>$()</code> 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
			<code>window</code> object. For example, you typically assign
			the function to the load event like this:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
window.onload = function() {
    // do this stuff when the page is done loading
};
</pre></td></tr></table><br />

		<p>Using jQuery, you write the same code like this:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$(window).load(function() {
    // run this when the whole page has been downloaded
});
</pre></td></tr></table><br />

		<p>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 <code>ready</code> event on the
			document, used like this:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$(document).ready(function() {
    // do this stuff when the HTML is all ready
});
</pre></td></tr></table><br />

		<p>This code creates a jQuery object around the <code>document</code>
			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 <code>$()</code> function:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$(function() {
    // run this when the HTML is done downloading
});
</pre></td></tr></table><br />

		<p>So far, I've shown you three different ways to use the <code>$()</code>
			function. With a fourth way, you can create an element using a string. The
			result is a jQuery object containing that element. <a href="#list3">Listing 3</a>
			shows an example that adds a paragraph to the page.</p>

<br /><a name="list3"><b>Listing 3. Creating and appending a simple paragraph</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
$('&lt;p&gt;&lt;/p&gt;')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");
</pre></td></tr></table><br />

		<p><a name="chaining"/>As you might have noticed from the previous example, another
			powerful feature of jQuery is <i>method chaining.</i> 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:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('#message').css('background', 'yellow').html('Hello!').show();
</pre></td></tr></table><br />

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="simplifying-ajax"><span class="atitle">Ajax made simple</span></a></p>
		<p>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.</p>
		<p>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 <code>load()</code>
			function. Here's an example that updates some statistics:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('#stats').load('stats.html');
</pre></td></tr></table><br />

		<p>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
			<code>$.post()</code> and <code>$.get()</code>,
			depending on which method you need. You can pass an optional data object and
			callback function if you need them. <a href="#list4">Listing 4</a> shows a simple
			example that sends data and uses a callback.</p>

<br /><a name="list4"><b>Listing 4. Sending data to a page with Ajax</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});
</pre></td></tr></table><br />

		<p>If you really want to do some complex Ajax scripting, you need the
			<code>$.ajax()</code> function. You can specify
			<code>xml</code>, <code>html</code>,
			<code>script</code>, or <code>json</code>, and jQuery
			automatically prepares the result for your callback function so that you can use it
			right away. You can also specify <code>beforeSend</code>,
			<code>error</code>, <code>success</code>, or
			<code>complete</code> 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.
			<a href="#list5">Listing 5</a> shows an example that retrieves an XML document
			using some of the parameters that I mentioned.</p>

<br /><a name="list5"><b>Listing 5. Complex Ajax made simple with $.ajax()</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});
</pre></td></tr></table><br />

		<p>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.
			<a href="#list6">Listing 6</a> shows an expansion on the <code>success</code>
			function that adds a list item to the Web page for each
			<code>&lt;item&gt;</code> element in the XML.</p>

<br /><a name="list6"><b>Listing 6. Working with XML using jQuery</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('&lt;li&gt;&lt;/li&gt;')
            .html(item_text)
            .appendTo('ol');
    });
}
</pre></td></tr></table><br />

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="animation"><span class="atitle">Animate your HTML</span></a></p>
		<p>You can use jQuery to take care of basic animations and effects. At the heart of the
			animation code is the <code>animate()</code> 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.</p>
		<p>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.</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});
</pre></td></tr></table><br />

		<p>jQuery makes the more common animations easier with built-in functions. You can use
			<code>show()</code> and <code>hide()</code> elements,
			either instantly or at a specified speed. You can also make elements appear and
			disappear by using <code>fadeIn()</code> and <code>fadeOut()</code>
			or <code>slideDown()</code> and <code>slideUp()</code>,
			depending on what kind of effect you're looking for. Here's a simple example that
			slides down a navigation:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('#nav').slideDown('slow');
</pre></td></tr></table><br />

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="dom-and-events"><span class="atitle">DOM scripting and
		event handling</span></a></p>
		<p>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.</p>
		<p>In essence, jQuery makes it easier to do things that are common with DOM scripting.
			You can create elements and use the <code>append()</code> function to
			link them to other elements, use <code>clone()</code> to duplicate
			elements, set the contents with <code>html()</code>,
			delete the contents with the <code>empty()</code> function,
			delete the elements altogether with the <code>remove()</code>
			function, and even use the <code>wrap()</code> function to wrap the
			elements with another element.</p>
		<p>Several functions are available for changing the contents of the jQuery object
			itself by traversing the DOM. You can get all the <code>siblings()</code>,
			<code>parents()</code>, or <code>children()</code> of an
			element. You can also select the <code>next()</code> or
			<code>prev()</code> sibling elements. Perhaps most powerful is the
			<code>find()</code> function, which allows you to use a jQuery
			selector to search through the descendants of elements in your jQuery object.</p>
		<p>These functions become more powerful when used with the <code>end()</code>
			function. This function is like an undo function, going back to the jQuery object
			you had before you called <code>find()</code> or <code>parents()</code>
			or one of the other traversing functions.</p>
		<p>When used together with method chaining, these functions allow complex operations
			to look simple. <a href="#list7">Listing 7</a> shows an example in which you find a
			login form and manipulate several elements around it.</p>

<br /><a name="list7"><b>Listing 7. Traversing and manipulating the DOM with ease</b></a><br /><table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
	
$('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?');
    });
</pre></td></tr></table><br />

		<p>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 <code>end()</code> to go back
			to the form. I found the password field, made the border red, and again called
			<code>end()</code> 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.</p>
		<p>Handling common events is as simple as calling a function like <code>click()</code>,
			<code>submit()</code>, or <code>mouseover()</code> and
			passing it an event handler function. Additionally, you have the option of assigning
			a custom event handler using <code>bind('eventname', function(){})</code>.
			You can remove certain events using <code>unbind('eventname')</code> or
			all events with <code>unbind()</code>. For a complete list of ways to use
			these and other functions, check out the jQuery application program interface (API)
			documentation in the <a href="#resources">Resources</a>.</p>

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="selectors"><span class="atitle">Unleash the power of
		jQuery selectors</span></a></p>
		<p>Often, you select elements by ID, such as <code>#myid</code>, or by
			class name, such as <code>div.myclass</code>. However, jQuery has a
			rather complex and complete selector syntax that allows you to select nearly any
			combination of elements in a single selector.</p>
		<p>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
			<a href="#resources">Resources</a>.</p>
		<p>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 <code>:empty</code> pseudo-selector:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('td:empty').html('-');
</pre></td></tr></table><br />

		<p>What about finding every element that <b>doesn't</b> have a certain class? CSS3 has
			a syntax for that, too, using the <code>:not</code> pseudo-selector.
			Here's how you can hide every input that doesn't have a class of
			<code>required</code>:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('input:not(.required)').hide();
</pre></td></tr></table><br />

		<p>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:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('ul, ol, dl').hide();
</pre></td></tr></table><br />

		<p>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 <code>/..</code>
			syntax:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$("input:checkbox/..").css('border', '1px solid #777');
</pre></td></tr></table><br />

		<p>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 <i>striping</i>
			the table. Doing this with jQuery is a cinch, thanks to the
			<code>:odd</code> pseudo-selector. This example changes the
			background of every odd row in tables with a <code>striped</code>
			class:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$('table.striped &gt; tr:odd').css('background', '#999999');
</pre></td></tr></table><br />

		<p>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.</p>

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="plugins"><span class="atitle">Extend jQuery with plug-ins</span></a></p>
		<p>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:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$.fn.donothing = function(){
    return this;
};
</pre></td></tr></table><br />

		<p>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 <code>$.fn</code>.
			Next, this function must return <code>this</code> (the jQuery object)
			so that it doesn't break <a href="#chaining">method chaining</a>.</p>
		<p>You can easily build on top of this simple example. To write a plug-in to change the
			background instead of using <code>css('background')</code>, you use this:</p>

<table width="60%" cellpadding="0" cellspacing="0" border="0"><tr><td class="code-outline"><pre class="displaycode">
$.fn.background = function(bg){
    return this.css('background', bg);
};
</pre></td></tr></table><br />

		<p>Notice that I could just return the value from <code>css()</code>,
			because it already returns the jQuery object. So, method chaining will still work
			fine.</p>
		<p>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
			<code>each()</code> function to do the same thing over and over.</p>
		<p>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 <a href="#resources">Resources</a>.</p>
		<p>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.</p>
		<p>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.</p>

	<br /><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><img width="100%" src="//www.ibm.com/i/v14/rules/blue_rule.gif" height="1" alt=""/></td></tr></table><table class="no-print" cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /><p><a name="life-after-jquery"><span class="atitle">Life after jQuery</span></a></p>


      <table align="right" border="0" cellspacing="0" cellpadding="0" width="150"><tr><td width="10"><img alt="" height="1" width="10" src="//www.ibm.com/i/c.gif"/></td><td><table border="1" cellspacing="0" cellpadding="5" width="100%"><tr><td bgcolor="#eeeeee">
        <a name="N1030C"><b>Share this...</b></a><br />
        <p>
        <table border="0" cellpadding="0" cellspacing="0" width="135"><tr><td colspan="2">
              <img alt="" border="0" height="5" src="http://www.ibm.com/i/c.gif" width="1"/>
            </td></tr><tr align="left" valign="top"><td width="21">

              <a href="http://digg.com/submit?phase=2&amp;url=http://www.ibm.com/developerworks/xml/library/x-ajaxjquery.html">
                <img alt="digg" border="0" height="10" src="http://www.ibm.com/i/v14/icons/10x10-digg-thumb.gif" width="10"/>
              </a>
            </td><td>

              <a href="http://digg.com/submit?phase=2&amp;url=http://www.ibm.com/developerworks/xml/library/x-ajaxjquery.html">Digg this story</a>
            </td></tr><tr><td colspan="2">
              <img alt="" border="0" height="5" src="http://www.ibm.com/i/c.gif" width="1"/>
            </td></tr><tr align="left" valign="top"><td width="21"><a href="http://del.icio.us/post" onClick="window.open('http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;"><img alt="del.icio.us" border="0" height="10" src="http://del.icio.us/static/img/delicious.small.gif" width="10"/></a>
            </td><td><a href="http://del.icio.us/post" onClick="window.open('http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=700,height=400'); return false;">Post to del.icio.us</a>
            </td></tr><tr><td colspan="2">
              <img alt="" border="0" height="5" src="http://www.ibm.com/i/c.gif" width="1"/>
            </td></tr><tr align="left" valign="top"><td width="21">
              
<a href="javascript:location.href='http://slashdot.org/bookmark.pl?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)"><img alt="Slashdot" border="0" height="16" src="/developerworks/i/slashdot-favicon.gif" width="16"/></a> 

              
            </td><td>
              <a href="javascript:location.href='http://slashdot.org/bookmark.pl?url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)">Slashdot it!</a>
            </td></tr><tr><td colspan="2">
              <img alt="" border="0" height="5" src="http://www.ibm.com/i/c.gif" width="1"/>
            </td></tr></table>
        </p>
      </td></tr></table></td></tr></table>



		<p>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.</p>
		<p>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
			<code>for</code> 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.</p>
<br /><br /><p><a name="resources"><span class="atitle">Resources</span></a></p><b>Learn</b><br /><ul><li><a href="http://www.ibm.com/developerworks/xml">developerWorks XML zone</a>: Learn all about XML at the developerWorks XML zone.<br /><br /></li><li><a href="http://docs.jquery.com/Main_Page">jQuery API documentation</a>: Explore the complete documentation of jQuery with links to tutorials as well as the API reference.<br /><br /></li><li><a href="http://docs.jquery.com/Tutorials">jQuery tutorials</a>: Check out a great collection of multilingual jQuery tutorials, including 40 in English.<br /><br /></li><li><a href="http://visualjquery.com/">Visual jQuery</a>: Read an interactive and easy-to-navigate jQuery API reference.<br /><br /></li><li><a href="http://www.ibm.com/certify/certs/xmsdreltop.shtml">IBM XML certification</a>:Find out how you can become an IBM-Certified Developer in XML and related technologies.<br /><br /></li><li><a href="http://www.ibm.com/developerworks/views/xml/library.jsp">XML technical library</a>: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.<br /><br /></li></ul><br /><b>Get products and technologies</b><br /><ul><li><a href="http://jquery.com/">jQuery</a>: Visit the main jQuery site and download the source code.<br /><br /></li><li><a href="http://docs.jquery.com/DOM/Traversing/Selectors">Selectors</a>: Get a complete list of all the selectors you can use with jQuery, including CSS3 and XPath selectors.<br /><br /></li><li><a href="http://docs.jquery.com/Plugins">jQuery plug-ins</a>: Find a nearly complete list of available jQuery plug-ins.<br /><br /></li><li><a href="http://interface.eyecon.ro/">Interface</a>: Try the ultimate jQuery plug-in for animation, effects, drag-and-drop functionality, and UIs.<br /><br /></li><li><a href="http://jquery.com/dev/svn/trunk/plugins/form/form.js?format=txt">Form plug-in</a>: Get a jQuery plug-in that lets you submit a form using Ajax.<br /><br /></li></ul><br /><b>Discuss</b><br /><ul><li><a href="http://jquery.com/blog/">jQuery blog</a>: Frequent the official jQuery blog for regular news and updates.<br /><br /></li><li><a href="http://www.ibm.com/developerworks/forums/dw_xforums.jsp">XML zone discussion forums</a>: Participate in any of several XML-centered forums.</li></ul><br /><br /><p><a name="author"><span class="atitle">About the author</span></a></p><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td colspan="3"><img alt="" width="100%" height="5" src="//www.ibm.com/i/c.gif"/></td></tr><tr align="left" valign="top"><td><p><img align="left" alt="Photo of Jesse Skinner" height="80" src="http://www.ibm.com/developerworks/i/p-jskinner.jpg" valign="top" width="64"/></p></td><td><img alt="" width="4" height="5" src="//www.ibm.com/i/c.gif"/></td><td width="100%"><p>Jesse Skinner is a freelance Web developer specializing in JavaScript and CSS. He spends his time expatriating from Canada to Germany, making the Web more fun to use, and unraveling the ancient mysteries of CSS browser compatibility. If you'd like more information about Jesse or to read more about Web development, check out his blog at <a href="http://www.thefutureoftheweb.com/">The Future of the Web</a>.</p></td></tr></table><br /><br /><br /><p class="no-print"><span class="atitle"><a name="rate">Rate this page</a></span></p><span class="no-print"><form action="http://www-128.ibm.com/developerworks/utils/RatingsHandler" method="post"><input value="1" name="SITE_ID" type="hidden"/><input value="Simplify Ajax development with jQuery" name="ArticleTitle" type="hidden"/><input value="XML, Web development" name="Zone" type="hidden"/><input value="http://www.ibm.com/developerworks/thankyou/feedback-thankyou.html" name="RedirectURL" type="hidden"/><input value="205662" name="ArticleID" type="hidden"/><input value="04102007" name="publish-date" type="hidden"/><input type="hidden" name="author1-email" value="jesse@thefutureoftheweb.com" /><input type="hidden" name="author1-email-cc" value="dwxed@us.ibm.com" /><script language="javascript" type="text/javascript">document.write('<input type="hidden" name="url" value="'+location.href+'" />');</script><img width="100%" src="//www.ibm.com/i/v14/rules/gray_rule.gif" height="1" alt=""/><br /><table width="100%" class="v14-gray-table-border" cellspacing="0" cellpadding="0" border="0"><tr><td width="100%"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="3"><p>Please take a moment to complete this form to help us better serve you.</p></td></tr><tr valign="top"><td width="140"><img width="140" src="//www.ibm.com/i/c.gif" height="1" alt=""/><br /><p><label for="Goal">Did the information help you to achieve your goal?</label></p></td><td width="303"><img width="303" src="//www.ibm.com/i/c.gif" height="6" alt=""/><br /><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td><input value="Yes" id="Goal" name="Goal" type="radio"/>Yes</td><td><input value="No" id="Goal" name="Goal" type="radio"/>No</td><td><input value="Don't know" id="Goal" name="Goal" type="radio"/>Don't know</td></tr></table></td><td width="100%"> </td></tr><tr><td colspan="3"><img alt="" height="12" width="8" src="//www.ibm.com/i/c.gif"/></td></tr><tr valign="top"><td width="140"><img width="140" src="//www.ibm.com/i/c.gif" height="1" alt=""/><br /><p><label for="Comments">Please provide us with comments to help improve this page:</label></p></td><td width="303"><img width="303" src="//www.ibm.com/i/c.gif" height="6" alt=""/><br /><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td><textarea class="iform" cols="35" rows="5" wrap="virtual" id="Comments" name="Comments"> </textarea></td></tr></table></td><td width="100%"> </td></tr><tr><td colspan="3"><img alt="" height="12" width="8" src="//www.ibm.com/i/c.gif"/></td></tr><tr valign="top"><td width="140"><img width="140" src="//www.ibm.com/i/c.gif" height="1" alt=""/><br /><p><label for="Rating">How useful is the information?</label></p></td><td width="303"><img width="303" src="//www.ibm.com/i/c.gif" height="6" alt=""/><br /><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="left" width="60"><input value="1" id="Rating" name="Rating" type="radio"/>1</td><td align="left" width="60"><input value="2" id="Rating" name="Rating" type="radio"/>2</td><td align="left" width="60"><input value="3" id="Rating" name="Rating" type="radio"/>3</td><td align="left" width="60"><input value="4" id="Rating" name="Rating" type="radio"/>4</td><td align="left" width="63"><input value="5" id="Rating" name="Rating" type="radio"/>5</td></tr><tr><td align="left" width="60"><span class="greytext">Not</span><br /><span class="greytext">useful</span></td><td align="left" width="60"><img src="//www.ibm.com/i/c.gif" height="1" width="1" alt=""/></td><td align="left" width="60"><img src="//www.ibm.com/i/c.gif" height="1" width="1" alt=""/></td><td align="left" width="60"><img src="//www.ibm.com/i/c.gif" height="1" width="1" alt=""/></td><td align="left" width="63"><span class="greytext">Extremely<br />useful</span></td></tr></table></td><td width="100%"> </td></tr></table></td></tr></table><table class="v14-gray-table-border" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="3"><img alt="" height="8" width="8" src="//www.ibm.com/i/c.gif"/></td></tr><tr><td width="8"><img alt="" height="1" width="8" src="//www.ibm.com/i/c.gif"/></td><td colspan="3"><input alt="Submit" height="21" width="120" border="0" src="//www.ibm.com/i/v14/buttons/submit.gif" type="image"/></td></tr><tr><td colspan="3"><img alt="" height="8" width="8" src="//www.ibm.com/i/c.gif"/></td></tr></table></form><br /></span><span class="no-print"><table cellspacing="0" cellpadding="0" align="right"><tr align="right"><td><table border="0" cellpadding="0" cellspacing="0"><tr><td valign="middle"><img width="16" src="//www.ibm.com/i/v14/icons/u_bold.gif" height="16" border="0" alt=""/><br /></td><td valign="top" align="right"><a href="#main" class="fbox"><b>Back to top</b></a></td></tr></table></td></tr></table><br /><br /></span></td><td width="10"><img alt="" height="1" width="10" src="//www.ibm.com/i/c.gif"/></td></tr></table><p class="greytext">Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc., in
		the United States, other countries, or both.
	  Other company, product, or service names may be 
  trademarks or service marks of others.</p></td></tr></table><!--FOOTER_BEGIN--><br /><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td height="19" class="bbg"><table cellspacing="0" cellpadding="0" border="0"><tr><td><span class="spacer">    </span><a href="http://www.ibm.com/ibm/" class="mainlink">About IBM</a></td><td width="27" class="footer-divider">    </td><td><a href="http://www.ibm.com/privacy/" class="mainlink">Privacy</a></td><td width="27" class="footer-divider">    </td><td><a href="http://www.ibm.com/contact/" class="mainlink">Contact</a></td></tr></table></td></tr></table><script language="JavaScript1.2" type="text/javascript" src="//www.ibm.com/common/stats/stats.js"></script><noscript><img border="0" alt="" height="1" width="1" src="//stats.www.ibm.com/rc/images/uc.GIF?R=noscript"/></noscript><!--FOOTER_END--><!--XSLT stylesheet used to transform this file:  dw-document-html-5.7.xsl--></body></html>