Why is jQuery Awesome? What jQuery does well: Simplified AJAX DOM Manipulation Event Management Animations Normalizes Browser Differences Why It Is Successful: Well Designed Easy to extend with plugins Great Documentation Large jQuery Community Cross-browser
Example: Expanding Form - Continued Iterate through jQuery wrapped set by using the each() method. There are 2 ways to pass in this data. Controls the context. This is consistent. Since this item is added dynamically, you will need to use the live() method instead of bind() You can chain jQuery objects to each other. This makes for really succinct statements. Indent your code so you can easily see what is the current object in the chain Control chaining with the end() method
Events in jQuery Control how this event gets bubbled down the DOM Prevent the default behavior of an element. Useful for buttons and links. Bind an element that is already added to the DOM Bind an element that is not yet added to the DOM. Very useful with Ajax or adding elements dynamically Namespacing works really well when you have multiple listeners attached to the same element. Unbinding events. Opposite of live()
Example: Pager - Continued Setup event handler Optional second parameter stores your custom data that is passed from the event Events can be triggered by using the trigger() method. Load custom data from the data attribute of the html element Always prevent the default behavior of any hyperlink event you trap.
Example: Default Images Bind default resources on the “error” event.
jQuery in Visual Studio By adding script references to your .js file, you get intellisense… kinda. You will not be able to select any elements until the document is ready. Most if your work will happen here. Good practice to always alias your $ by using Local Scope. This will prevent any collisions with any other library that may use $ variable
Example: Simulated Page Lifecycle By adding script references to your .js file, you get intellisense… kinda. Works good if you have multiple js files that all depend on the document loaded event
Example: Ajax Proxy Very flexible way to pass in parameters to a function. Pass in as many or as few parameters as you need. Alias your functions by using jQuery as $
Pattern: Default Values Old way… Doesn’t scale very well at all. Pass in an object hash with as many or as few parameters as you want. jQuery Way… Enumerate any default values Default values will be overwritten by the values you passed in the ‘params’ object.
jQuery - BBQ http://benalman.com/projects/jquery-bbq-plugin/ Merge query string fragments into the query string#foo=1&bar=2 Maintains history with each hash change Great for AJAX history management Paging Tabs
Linq to jQuery Without Linq to jQuery… With Linq to jQuery…
Plugin Authoring Don’t break the chain… Can use as if it were just a regular jQuery method