jQuery

Fairway Code Brew

Agenda

• What is jQuery?• No, really, what is it?• Show me something cool• Why should I use it?• Disturbing photo• More features• FlexBox (jQuery Plugin)• Is Brett pointing to his watch yet because it’s

lunchtime? Hidden Agenda:-Avoid being voled-Eat delicious pie

That wasn’t cool enough…try again

What is jQuery?

• jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

• Lightweight Footprint About 15KB in size (Minified and Gzipped)

• CSS3 Compliant Supports CSS 1-3 and basic XPath• Cross-browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+

I totally stole all of this

No, really, what is it?

• It’s a magical dollar sign wrapper / selector / chainer / do-er:– “Get me the input box with id ‘splek’, and make it wiiide”

$("#splek").css("width", 800);

– “Get me all of the elements where class=‘bilp’, and hide them”

$(".bilp").hide();

– “Get me a gin and tonic”

$("im.sorry").dave("im.afraid").i(cant).doThat();

Without jQuery

With jQuery

Show me something cool

• Old wayvar links = document.getElementsByTagName("a");for (var i = 0; i < links.length; i++) { var link = links[i]; link.cssClass += "nerdbasket"; link.innerHTML = "vole"; link.style.display = "";}

• jQuery way

$("a").addClass("nerdbasket").html("vole").show();Ooh, chainability!

Not cool enough…try again

• Okay, how about something Ajax-y, like GETting a web page and processing the response in a JavaScript callback function?

$.get("funpage.aspx", function(data) { alert("Data Loaded: " + data);});

$.getJSON(“notfoo.aspx", {id:1}, function(data) { $("#x").html(data.lastName + ", " + data.firstName);});

Okay, that’s pretty cool. Almost as cool as this guy:

Why should I use it?

• It’s fashionable• Your salary increase is directly tied to how

often you use it• It encapsulates and simplifies some of the

most common JavaScript and Ajax tasks• It’s lightweight, logical, and extensible• It plays well with others; in fact, other

frameworks invite it over for play dates

Disturbing photo

More features

• Basic animationfadeIn(), fadeOut(), slideUp(), show(speed)

• Powerful DOM traversing / manipulationclone(), wrap(), append(), insertAfter()

• Integrated with ASP.NET MVC (IntelliSense library available)

• Powerful and actively developed plugin library– Client-side date pickers, grids, sorting/filtering,

common UI niceties (lightbox, blocking bg)

I am going to eat your

children

Note to self: show everyone the jQuery quickSearch thing, and mock it for its lack of cross-browser compatibility

FlexBox

• ComboBox, Google Suggest, Type-ahead• Hosted on CodePlex• http://www.fairwaytech.com/flexbox

Feed the CEO

• That’s Chief Eating Obsessor