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

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

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

http://docs.jquery.com/Selectors

Selectors

Selectors

Selectors

Selectors

Selectors

Selectors

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 .jsjquery.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• 3rd 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…

http://speakerrate.com/jessyhoule

jessy@jessyhoule.com