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) Lightweight Footprint CSS3 Compliant Supports CSS 1-3 and basic XPath CSS3 Compliant Cross-browser IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Cross-browser 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 way var 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 animation fadeIn(), fadeOut(), slideUp(), show(speed) Powerful DOM traversing / manipulation clone(), 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

Feed the CEO That’s Chief Eating Obsessor