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.

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)
    
• 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
    
• 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
    
• 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!)