RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


jQuery Simplifies Your AJAX/JavaScript Development : Page 2

Discover the power and simplicity of the popular AJAX/JavaScript framework jQuery.

Installing jQuery
The jQuery JavaScript library is available for download in a "minified" (names of the variables and functions are minimized for size) compressed or uncompressed JavaScript file. Download the latest version and install it on your web page as:

<script type="text/javascript" src="jquery1.2.6.js"/> 

Programming with jQuery
At the core of the jQuery API is a 'jQuery' object wrapper. All of the jQuery functions, effects, and manipulations of HTML and CSS content are performed through this object. It is, however, expected that you use the common '$' shortcut to invoke the jQuery functions. So, for example, instead of using the jQuery object to query the background color of the div with an ID "banner":


You would perform the same action via the '$' shortcut:


Loading the Document and DOM Representation
jQuery (as most other AJAX libraries) operates on a Document Object Model (DOM) representation of the page, and it needs a parsed DOM tree of the page to perform most of its functions and effects. However, a DOM model of the page is not available until the page is parsed by the browser.

A typical solution is to attach the jQuery functions that have to be available as the page loads to the window.onload event. The disadvantage of this approach is that the end user would need to wait until the page is fully loaded—including images and other external resources—before the AJAX effects get enabled. Furthermore, to truly follow the principles of unobtrusive JavaScript, XHTML content should not contain any in-markup dependencies to JavaScript.

Therefore, all of the custom JavaScript code should be kept in the external files. In the header (<head> section), your web page typically will have a link to the jQuery library and the link to one or more of your custom JavaScript files that may leverage jQuery.

If you have jQuery events or functions to attach to the page at load time, you typically make a ready call on the document (DOM object representing a page) through jQuery and pass the custom anonymous function that may make or embed other function calls:

 $(document).ready( function() { 
    ... your function calls here ... 

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date