About me

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.com • www.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? • jQueryUIPlugins • Accordion • Date Picker • Dialog • Progress bar • Slider • Tabs • 3rd 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: varfName = document.getElementById("firstName"); • How we select with jQuery: varfName = $("#firstName"); • How we select with CSS #firstName { background-color:Red; }

10. Selectors http://docs.jquery.com/Selectors

11. Selectors

12. Selectors

13. Selectors

14. Selectors

15. Selectors

16. Selectors

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

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 • 3rd 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