Download presentation
Presentation is loading. Please wait.
Published byHugh Alexander Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.