About me I attend the Edina chapter of TechMasters Been a programmer since age 13, sparked by playing video games Currently employed at GMAC as an independent consultant Outside of work I try to tweet, blog, and podcast at: – –

Agenda Overview of jQuery Selectors (Binding and DOM manipulation) Plugins with jQuery Ajax with jQuery

What is jQuery? In short, a JavaScript library jQuery is short for JavaScript Query High-level components include –DOM manipulation –Plugin framework –AJAX support

Why jQuery instead of JavaScript? jQueryUI Plugins –Accordion –Date Picker –Dialog –Progress bar –Slider –Tabs 3 rd Party Plugins –Masking –Animations

Why jQuery instead of JavaScript? Support for multiple browsers baked in!!!

Why jQuery instead of JavaScript? Support from Microsoft –Deployed with MVC and going forward with Visual Studio –IntelliSense in Visual Studio –CDNs from Microsoft (HTTP and HTTPS) Support from the community and jQuery team –Documentation –Code samples –Blog posts and articles –Tons of books –Online video tutorials (TekPub)

Why jQuery instead of JavaScript? Enables Clean page separation –Structure (Content/Form) –Style –Behavior

Selectors Obtain DOM elements –How we select with JavaScript: var fName = document.getElementById("firstName"); –How we select with jQuery: var fName = $("#firstName"); –How we select with CSS #firstName { background-color:Red; }

Selectors

DOM manipulation –Further transverse (filter and/or walk parent/child tree) –Add new or remove existing DOM elements –Add or remove event handling and apply CSS –Change values/attributes

DEMO Real-world Selector Demos

Plugin Architecture within jQuery Two ways to extend jQuery –Utility Functions –Plugins (AKA: Commands/Wrapped Methods) Rules –Name your files with a prefix of jquery, followed by the name of your plugin, followed by.js jquery.phone.js –Use CSS classes provided by jQuery UI –Don’t assume the use of $ –Pass this back to allow for chaining –Use object (option) hashes when you have a lot of optional parameters

DEMO Utility function Demo Plugin Demo jQuery UI Preview 3 rd Party plugins Demo

Ajax Plugins load(url,parameters,callback) Utility Functions $.get(url,parameters,callback) $.getJSON(url,parameters,callback) $.post(url,parameters,callback) $.ajax(options) Setup Functions $.ajaxSetup(properties) Global Functions ajaxStart(callback) ajaxSend(callback) ajaxSuccess(callback) ajaxError(callback) ajaxComplete(callback) ajaxStop(callback)

DEMO jQuery AJAX demo using MVC

Closing thoughts Errors are ignored Nothing is safe on the front-end Include jQuery before your other plugin.js files this is not this There is so much more…