24 November 2008

jQuery

jQuery is a lightweight open source java-script library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web.

A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code. jQuery supports this via a nice "selector" API that allows developers to query for HTML elements, and then apply "commands" to them. One of the characteristics of jQuery commands is that they can be "chained"
together - so that the result of one command can feed into another. jQuery also includes a built-in set of animation APIs that can be used as commands. The combination allows you to do some really cool things with only a few keystrokes.

For example, the below java-script uses jQuery to find all <div> elements within a page that have a CSS class of "product", and then animate them to slowly disappear:

$("div.product").slideUp('slow').addClass("removed");


As another example, the java-script below uses jQuery to find a specific <table> on the page with an id of "datagrid1", then retrieves every other <tr> row within the datagrid, and sets those <tr> elements to have a CSS class of "even" - which could be used to alternate the background color of each row:


$("#datagrid1 tr:nth-child(even)").addClass("even");


[Note: both of these samples were adapted from code snippets in the excellent jQuery in Action book]

Providing the ability to perform selection and animation operations like above is something that a lot of developers have been begging for years. Such simplicity has never been offered before by any other development environment or library.

As a result even Microsoft has accepted this technology and they have already began shipping their Visual Studio 2008 package with jQuery preinstalled and with full support for it including intellisense. According to Scott Gu (Microsoft Developer, Blogger) - Microsoft is even working on adding new features and bug fixes to the jQuery Library.

No comments: