Nine New-ish jQuery Features Worth Trying

Although barely five years old, the jQuery JavaScript framework has a pretty good chance of standing the test of time. With one out of four websites using jQuery -- including almost 40% of the world's most popular websites -- and the project developers showing no signs of slowing down, jQuery's dominant position as the JavaScript framework of choice doesn't appear to be facing any real competition for the foreseeable future.

Of course, success isn't merely a function of longetivity. Rather, longetivity (and thus success) is a byproduct of those characteristics that contribute to product popularity. In this article I'll highlight nine recent jQuery features that play no small role in jQuery's past and future success. If you're not familiar with jQuery, or perhaps are already a regular user but haven't kept up with the latest developments, read through this list and even consider adding a few of your own in the reader comments!

1. jQuery Templating Plugin

Last month Microsoft contributed three plugins to the jQuery project: jQuery Templates, jQuery Data Link, and jQuery Globalization (I'll talk about the latter two in subsequent sections). JQuery Templating remedies the inconvenience of mixing HTML tags and jQuery syntax when looping over data arrays or objects by organizing the HTML markup within a special template and then applying that template to the data via a callback function. The result is the ability to iterate over and mark up JavaScript arrays and objects without ever having to mingle the logic and presentation!

Scott Guthrie published a pretty succinct tutorial demonstrating the power of the jQuery Templating Plugin, which you can read here.

2. jQuery Data Link Plugin

The concept of data binding, or tying a set of user interface elements to a corresponding set of data object attributes is commonplace in the world of desktop applications. This incredibly useful feature is now available to jQuery users thanks to the jQuery Data Link plugin, which can bind an object's property names to HTML elements as identified by their DIV IDs. Should the value associated with one end of the link change, so will the value at the other end. These endpoints are linked using the Data Link plugin's linkBoth() method. For instance, the following snippet might be used to link a JavaScript object's data to two fields found within an HTML form:

var account = {username: "wjgilmore", email: wj@example.com};

$(account) .linkBoth("username", "#username", "val") .linkBoth("email", "#email", "val")

With the binding in place, any changes made to either the JavaScript object or the associated HTML form fields will automatically cause the change to be made at the other end of the binding.

The Data Link Plugin was one of three plugins recently donated by Microsoft to the jQuery project. You can learn more about it here.

3. jQuery Globalization Plugin

Using the Web to market and sell products to a global audience is certainly appealing, yet many companies are woefully unprepared to present information to prospective foreign customers in a way that adheres to their customs and standards. The jQuery Globalization Plugin goes a long way towards helping localize any data originating from JavaScript to suit a country's currency, data, and string formatting standards. The third of three plugins recently donated by Microsoft to the jQuery project, the Globalization Plugin already supports hundreds of locales, including Arabic, Greek, German, and Catalan.

4. cssHooks

The jQuery 1.4.3 release included a rethinking of how jQuery interacted with a page's CSS properties, with a focus on the ability to extend the animate() and css() to your liking. Referred to as cssHooks, this new capability has many implications, including the means for overriding jQuery's default animation presentation, creating cross-browser compliant effects or even creating entirely new effects altogether.

Core jQuery contributor Brandon Aaron is already assembling a collection of useful hooks, available for perusal and download over at GitHub.

5. jQuery Mobile

In August of this year the jQuery development team announced the jQuery Mobile Project. With the goal of allowing developers to "write once and run everywhere," jQuery Mobile seeks to save developers from the headache of developing and maintaining multiple platform-specific applications and instead allow them to focus on writing a single universally accessible Web application.

With a very impressive 1.0 alpha release already available, the jQuery Mobile website offers a number of impressive demos and the typically outstanding documentation jQuery users have come to expect. But perhaps the most telling indicator of this project's early success is the fact that the demo is user-friendly even on my Blackberry.

Page 1 of 2