jQuery Secrets with Dave Ward
Dave Ward specializes in writing about ASP.NET, jQuery and ASP.NET AJAX. He is a contributing author to ASP.NET Ajax in Action, Second Edition from Manning, Nerd Dinner’s JavaScript secret weapon, listed on the Programming homepage of Alltop and newly inducted ASP Insider.
| Full Speed: | download | |
|---|---|---|
| Fast Version: | download |
Note: Be sure to check out the Fast Feed if your are looking for the same content in 3/4ths the time!
What is jQuery?
The jQuery movement is seemingly everywhere, but if you still remain curious what jQuery is, Rick Strahl has an excellent introduction to library here: An Introduction to jQuery.
The jQuery Wikipedia page tells us that jQuery contains the following features:
- DOM element selections using the cross-browser open source selector engine Sizzle, a spin-off out of jQuery project
- DOM traversal and modification (including support for CSS 1-3 and basic XPath)
- Events
- CSS manipulation
- Effects and animations
- Ajax
- Extensibility
- Utilities - such as browser version and the each function.
- JavaScript Plugins
Dave’s jQuery Tips for Web Developers
- Learn the selectors -they are crucial!
- :even and :odd – zebra striping is the classic example
- :not – Powerful when using classes as flags.
- :text – Often overlooked. Easier/cleaner than ‘input[type=text]’.
- attribute$=ID – One way to overcome the ClientID issue. (Be careful about performance)
- Leverage CSS classes instead of element IDs
- Avoids the ClientID issue
- Good for selecting groups, like GridView rows.
- Look for plugins before reinventing the wheel
- jQueryUI covers the basics
- plugins.jQuery.com for more
- Conversely, be sure you need a plugin
- Classic example is using an accordion when slideToggle is all you really needed.
- Similarly, a lot of people don’t realize they can use $.each()
- Don’t be afraid to use fake CSS classes as “flags”
- Blackjack game example: .card.flipped and .card:not(.flipped)
- Blackjack game example: .card.flipped and .card:not(.flipped)
- Write Unobtrusive JavaScript
- ASP.NET conditioned us to think OnClientClient and Attributes.Add is proper, but wiring up unobtrusive event handlers is much cleaner and more maintainable
- $(‘#element’).click() is the same as $addHandler($get(‘element’), ‘click’) in ASP.NET AJAX
- Anonymous functions are the norm in most jQuery code examples. Nothing to be scared of. More syntactical sugar than anything
- ASP.NET conditioned us to think OnClientClient and Attributes.Add is proper, but wiring up unobtrusive event handlers is much cleaner and more maintainable
- Use Firebug
- The inspect and console help you learn faster
- IE8’s developer toolbar works pretty well too
- Take advantage Bookmarklets
- jQueryify – inject jQuery into any page, for testing through Firebug
- SelectorGadget – Very helpful for learning selectors interactively
- Minify and Combine your scripts
- When using many plugins, you’ll end up with the same “bloat” that is often associated with ASP.NET AJAX (due to the Toolkit, not the base library)
- Read Automatically minify and combine JavaScript in Visual Studio
- Boost Serving Time
- Use the Google hosted version of jQuery for public facing sites
- Use the Google hosted version of jQuery for public facing sites
- Take advantage of JavaScript IntelliSense
- Get the jQuery vsdoc file
- Read Jeff King’s great FAQ detailing how common issues when configuring JavaScript IntelliSense
- If all else fails, just /// <reference path=”~/path/to/jquery-1.3.2.vsdoc” /> in a JS include
Other Resources Mentioned in the Show
- New Features in ASP.NET 4 AJAX
- Why ASP.NET AJAX UpdatePanels are dangerous
- Controlling HTML in ASP.NET WebForms
- jQuery 1.3.2 Cheat Sheet
- dotnetIQ: Learn .NET on your iPhone
- Polymorphic Podcast FastFeed
- JsMag is offering a discount (listen to the show for the coupon code!)