jQuery abstracts the DOM away, allowing you to focus on behavior instead of implementation. It provides a simplified, reliable interface to the DOM that works consistently across all major browsers. Instead of wasting time and effort supporting the idiosyncrasies of these browsers, you can write jQuery code that works the same across them all.
Why jQuery? What’s in it for me?
- CSS3 selectors – In jQuery, nearly everything begins with a selector that defines a set of one or more DOM elements. By implementing a CSS3 compliant selector engine, jQuery provides tremendous flexibility in this area. Selectors may contain any combination of ID, CSS class, and/or an expanded set of pseudo selectors (e.g. :first, :selected, :input).
- DOM manipulation – One of the most common client-side tasks is making changes or additions to a rendered HTML document. Whether updating a snippet of text or adding entire HTML structures, jQuery provides a robust set of utility functions that are up to the challenge. Combined with the versatile selector engine, complex manipulations are possible with only a few lines of jQuery code.
- Animation – The core jQuery library contains a few commonly used animations, such as fades and slides, and it also provides for specifying custom animations. Beyond that, jQuery UI offers animated transitions between CSS classes and a wide variety of easings.
- Plugins – jQuery’s straightforward extensibility model has led to a thriving plugin ecosystem. As of this writing, there are almost 2,500 third-party plugins in the repository. Everything from simple utility functions to entire client-side templating solutions are available as jQuery plugins. If you can imagine a feature, it’s likely that a plugin already exists to assist you in implementing it.
- Cross-browser compatibility – As previously mentioned, one of jQuery’s key strengths is that all of its features work consistently across every major browser. Any jQuery code that you write will produce the same results in Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9+, and Chrome.
- Officially supported by Microsoft – For many Microsoft developers, this official blessing is the clincher. Not only will Microsoft begin including jQuery with Visual Studio, but it is part of the default ASP.NET MVC project template. What’s more, Microsoft Product Support Services has already begun offering support for jQuery.
Coming from ASP.NET, what should I know?
If you’re coming from an ASP.NET development background, some of jQuery’s idioms may seem foreign at first. As with any framework, it’s important to learn the conventions and use them to your advantage. Going against the grain only wastes your time and effort.
In that spirit, these are a few specific tips that I hope will help you flatten the learning curve a bit.
- Use selectors. Think in sets. In the ASP.NET world, it’s rare to select sets of controls through queries. Instead, we’re accustomed to referencing a single control by its unique ID. Of course this is possible in jQuery too, but its selector engine is far more sophisticated.
Using selectors to identify a set of one or more elements is cleaner and more expressive than the iterative machinations you may be used to in ASP.NET server-side code. Before parsing out an ID or iterating over a group of elements in search of certain ones, be sure that the task isn’t more easily accomplished through a jQuery selector.
- Use CSS classes for more than just styling. Another technique that is counterintuitive at first is the use of CSS classes as flags. Coupled with jQuery’s selector engine, “flag” classes are surprisingly powerful.
A good object lesson comes from one of my recent contracts, where I was hired to add client-side interactivity to an online card game. One of the requirements was that the card images should have OnClick handlers applied at particular times, but only to those cards which were face down.
The .NET developer in me immediately considered maintaining the state of all the cards in some sort of client-side collection. Then, I could have iterated over that array to set up the appropriate OnClick handlers when necessary. That would have worked, but it would have been messy, prone to breakage, and generally difficult to maintain.
Instead, I realized that CSS classes as flags would allow me to implement a more elegant solution. Within the code that “flipped” the cards face up, I used addClass to add a “flipped” class to the card images. Then, a simple $(“.card:not(.flipped)”) selected the set of cards which were face down. Using jQuery’s click(fn) on that set of elements allowed me to implement the entire feature in just a few lines of code. Perhaps more importantly, that code was far easier to read and understand than the alternative would have been.
- Use the console to learn interactively.
Coming from the save-compile-reload paradigm of statically typed server-si
de development, it’s natural to approach client-side development in a similar fashion. While you certainly can write client-side code that way, it’s akin to working blindfolded when you consider the alternatives.
Whatever your browser of choice, I urge you to give these utilities a try when debugging client-side functionality. Once you become proficient with one of these tools, you’ll be amazed that you ever developed client-side code without it.
- Get the VSDOC.
Even though browser-based tools are great for debugging, an ASP.NET developer’s primary editor is still going to be Visual Studio. When writing jQuery code in Visual Studio, having proper Intellisense can make a tremendous difference in productivity. The discoverability that Intellisense provides is especially beneficial when you’re unfamiliar with jQuery’s API.
As part of the official support for jQuery, Microsoft provides a documentation file to provide jQuery Intellisense inside Visual Studio 2008. This is provided through what’s called a vsdoc file, and is available on the jQuery download page (via the “Documentation: Visual Studio” links).