2. 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: –@jessyhoule –www.itworksonmybox.comwww.itworksonmybox.com –www.worldofdotnet.comwww.worldofdotnet.com

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

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

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

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

7. 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)

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

9. 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; }

10. Selectors

17. 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

18. DEMO Real-world Selector Demos

19. 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

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

21. 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)

22. DEMO jQuery AJAX demo using MVC

23. 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… http://speakerrate.com/jessyhoule jessy@jessyhoule.com