1 / 11

jQuery

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?. That wasn’t cool enough…try again.

tyanne
Download Presentation

jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery Fairway Code Brew

  2. Agenda • What is jQuery? • No, really, what is it? • Show me something cool • Why should I use it? • Disturbing photo • More features • FlexBox (jQueryPlugin) • Is Brett pointing to his watch yet because it’s lunchtime? That wasn’t cool enough…try again • Hidden Agenda: • Avoid being voled • Eat delicious pie

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

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

  5. Show me something cool • Old way var links = document.getElementsByTagName("a"); for (vari = 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!

  6. 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:

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

  8. Disturbing photo

  9. I am going to eat your children 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) Note to self: show everyone the jQueryquickSearch thing, and mock it for its lack of cross-browser compatibility

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

  11. Feed the CEO • That’s Chief Eating Obsessor

More Related