In this tutorial, I will be explaining what jQuery is, how it can help you in your web projects, and then you will be taken on a trip through the process of enabling jQuery on a web application. Trust me: if you’ve never tried jQuery, you’re in for a treat! Besides the library itself, jQuery also has a UI part, that allows you to easily integrate widgets in your UI. Take a look at this summary of jQuery’s roadmap so far:

 

August 26th, 2006 - First stable version of jQuery: jQuery 1.0

January 14th, 2007 - jQuery Birthday: 1.1, New Site, New Docs

September 10th, 2007 - jQuery 1.2 released: jQuery 1.2: jQuery.extend("Awesome")

September 17th, 2007 - New user interface library for jQuery: jQuery UI: Interactions and Widgets

July 14th, 2008 - jQuery UI 1.5.2

February 20th, 2009 - Maintenance release: jQuery 1.3.2 Released

March 6th, 2009 - jQuery UI 1.7 Released: New domain, New CSS Framework & Dramatic Updates to Controls

 

- Help keep this blog alive -

 

I’ve been using jQuery on my web projects since it was launched, although professionally I’ve only applied it in company projects this year, since I’ve been mostly involved in WPF and WCF. But since the first line of jQuery code I’ve been really addicted to it (like half of the world) and needless to say, I never leave home without it.

 

Basically, jQuery is a javascript library that aims to make your life easier. It handles all the usual challenges derived from developing web applications like browser compatibility and information, DOM manipulation and inspection, events and animations, etc. It handles all those issues internally and at the same time, you get a richer UI with nicer layout and style. To use it, all is required is the usual script reference in your pages:

<script type="text/javascript" src="/scripts/jquery-1.3.2.js"></script>

 

The version I mentioned in the script reference (jquery-1.3.2.js) is the latest version at the time of this article. There is also a smaller version, compressed, that is file size optimized for faster loading. The filename is almost identical, except for the “min” before the extension: jquery-1.3.2.min.js. If you wish to debug  jQuery’s internals and see what’s happening, you should use the full version. Here’s a sample of the differences:

 

Uncompressed version:

(function(){

var 
    // Will speed up references to window, and allows munging its name.
    window = this,
    // Will speed up references to undefined, and allows munging its name.
    undefined,
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,
    // Map over the $ in case of overwrite
    _$ = window.$,

    jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
    },

    // A simple way to check for HTML strings or ID strings
    // (both of which we optimize for)
    quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
    // Is it a simple selector
    isSimple = /^.[^:#\[\.,]*$/;

(...)

 

Compressed version:

(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init
(E,F)},D=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,f=/^.[^:#\[\.,]*$/;o.fn=o.prototype (...)

 

 

As you can see, the compressed version had variables renamed to take the fewer chars possible, comments were deleted and all spacing was abolished. This way you go from 117 KB (120.763 bytes) on the uncompressed version, to a modest 55,9 KB (57.254 bytes) in the compressed version. We’re talking about a 52.6% size reduction, which is still significant and a must, once you migrate your web app to production environment.

 

Now, to give you a small insight of what jQuery does for you, here’s a “quimple” -quick and simple :P - example of how it can make thing easier when referencing DOM elements in your javascript code. Consider the following:

document.getElementById("MyDOMObject").value;

 

With jQuery, it would be reduced down to this:

$("#MyDOMObject").val()

 

This is the universal way jQuery references the elements within a page. The $ is an alias for the jQuery "class", and $() constructs a new jQuery object. The “#MyDOMObject” string specified as argument means we want a reference to an element. The “#” prefix signals that the following string will be an element id, so the jQuery object will, in the end, hold a reference to it. If, for instance, we had these blocks of code:

$("div")

or

$("table")

 

… it would select all elements of the div type and table type, respectively. So you see, $() wraps jQuery functionality around a single or an array of DOM Element(s). It also accepts XML Documents and Window objects as valid arguments even though they are not DOM Elements. It will also accept another jQuery object, effectively returning $(other.get()).

From there on, you can do anything. From changing element styling, to creating animations and managing events, everything can be done with ease.

 

So you’re starting to see the tip of the iceberg here, but there’s a still a long way to enlightment :) In the following article, I’ll be making a deep dive on some of the most useful methods and functions of jQuery, and also check out some cool UI samples using jQuery UI.

 

Technoratti Tags: , ,