Attachment 832
ow that jQuery 1.5 is released, this is as good as any time to discuss this library. I got started on jQuery recently for a project. The web pages were being developed with HTML and CSS and I wanted to see how jQuery can be used to spruce them up.

First a few words on jQuery. It has emerged as de-facto leader in JavaScript library for most websites. First of all, it is simple to learn (one weekend is enough); it is compact (it measures like 30K, less than an image – with google CDN, it doesn’t even have to be downloaded often); it has tons of plugins (ranging from ajax to form validators to look and feel stuff).

Here is the high level idea of usage. You include it in the header, as usual. You write your own script, where you hook some functions on start of the page. These functions typically can modify the DOM elements.

Let me illustrate it: Let us say you have a data table being displayed in the page. You want to have zebra striping. One way is to change the program to edit the HTML. But, why? You can use jQuery – you can pick up the table using a selector, and apply CSS transformation to it in the following way:
Here is how you can do it:

$('#datatable tbody tr:even').css('background-color','#eee);
(assuming that the id for the table is datatable). Simple, right? Basically, what we are doing is, we are declaring a hook function to be done when the document is ready to select every even row in the body of the table with id datatable and adding a css attribute for the background color. That is all!

What are the additional things that you can do?

  1. Page layout: You can do it with CSS of course. jQuery can help in calculating any widths and do any kind of sophisticated layouts. In addition, it can give control to the users to adjust the page (like drag and drop of widgets and so on).
  2. Form layout: If you are designing the forms, you know how much of pain it is. You resort to tables; you start calculating the pixels; and once the data widths change, all your calculations go haywire. A few plugins address this problem.
  3. Form validation, tool tips, in place disappearing text: All these make using the forms easy to use. Here is an interesting idea. Tooltips only for the novices. That is, for some kind of experts tooltips are not necessary. We can do all that magic with jQuery (we need some server support – required for knowing which user is novice and which is an expert).
  4. Table layout: I already showed you what I can do with three lines. We can do more: sorting the elements? Pagination? Filtering? Searching? All these can be done, with suitable plugins to jQuery. If you are feeling lazy, you can write it yourself too!
  5. UI theming: Of course, you can use CSS alone to do this. But, jQuery UI offers a simple way to manage the theme and add the class elements to the page by traversing the code.

Grab hold off some sample tutorials and play with it at your own leisure. Here is what you need:

  1. Firefox with firebug plugin: You can see how the screen is laid out and which part of the screen corresponds to which part of the code. Use it to see and understand jQuery in action.
  2. Visual studio express 2010: Free to use editor for your editing needs. I am sure there are better tools, but this one will do.
  3. Your local copies of jQuery, jQuery UI, themes: useful, if you are stuck without internet.

I have seen 15 year olds do enough magic with jQuery. I am sure we can bring some pizzazz to our web application development. Go forth and have fun!