jQuery: Nuts, Bolts and Bling

Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner

My FamilyCrystalRuby, Olivia, CodyNot pictured:Ditto the cat

Iamateam memberhereIamaseniordesignerhere

AudienceThis presentation was crafted speciﬁcally for delivery at the Front End DesignConference in St. Petersburg, FL. The audience consisted of designers who havenever used jQuery through developers who use jQuery regularly.The slide portion of this presentation has a lot of getting started information, aswell as some tricks you may or may not know. The live coding portion (available onGithub) contains some more advanced techniques.If you have any questions after watching this presentation and looking at the code,please let me know: doug@dougneiner.com (Be sure to reference this presentationwhen emailing!) D AN

Write working codeUgly, working code always trumps pretty, broken code D AN

basics D AN

Writing the name A. Jquery C. jquery B. JQuery D. jQuery *It’soktowriteitinallcapswhenthe restofthecontextisallcapsaswell. D AN

adding scripts<div id="dan"> I am Dan </div> HTML<style>#dan { display: none; } Youobviously</style> wouldn’tdothis<div id="cherrie"> I am Cherrie </div><style>#cherrie { background: red; }</style> D AN

adding scripts<div id="dan"> I am Dan </div> HTML<script>$( "#dan" ).hide();</script> Sopleasedon’t dothis<div id="cherrie"> I am Cherrie </div><script>$( "#cherrie" ).hide().fadeIn( 500 );</script> D AN

adding scripts <div id="dan"> I am Dan </div> <div id="cherrie"> I am Cherrie </div> HTML <script src="//ajax.googleapis.com/ajax/ Better,butnowlibs/jquery/1.6.2/jquery.min.js"></script> #danand#cherrie <script src="js/site.js"></script> blinkonforasplit-</body> secondbeforehiding$( "#dan" ).hide();$( "#cherrie" ).hide().fadeIn( 500 ); JS D AN

adding scripts<html class="no-‐js"><head> NowthetwoelementsarehiddenbyCSS, HTML ... butonlywhenweknowJSisworking <script> document.documentElement.className = document.documentElement.className.replace( "no-‐js", "js" ); </script> <link rel="stylesheet" href="css/layout.css" /> IfyouareusingModernizr,it alreadydoesthis,andyou dontneedthiscode.js #dan, .js #cherrie { display: none; } CSS D AN

adding scripts <div id="dan"> I am Dan </div> <div id="cherrie"> I am Cherrie </div> HTML <script src="//ajax.googleapis.com/ajax/ Nowwecanremovelibs/jquery/1.6.2/jquery.min.js"></script> thetwo.hide() <script src="js/site.js"></script> statementsandjust</body> runfadeInon#cherrie$( "#cherrie" ).fadeIn( 500 ); JS D AN

Adding scripts• Use at least one external script ﬁle for your site, not tons of in-page script blocks spread throughout your app.• Include references to jQuery and your script just before the closing body tag • Primarily on web sites (on JS-required apps inside <head> may be ok) • Use no-js and js classes to provide styling until the script loads D AN

File layoutjQuery( document ).ready( function () { JS jQuery( "div" ).each( function () { jQuery( this ).hide(); }); Too…⋯Much…⋯ jQuery…⋯ jQuery.getJSON( "...", function ( data ) { jQuery.each( data, function () { ... }); });}); D AN

File layout(function ( $ ) { JSvar sample = { sample: true };// DOM may not be complete$( document ).ready( function () { // DOM is ready. Come and get it!});}( jQuery )); D AN

File layout(function ( $ ) { JSvar sample = { sample: true };// DOM may not be complete Thisiscalledan "Immediately InvokingFunction$( document ).ready( function () { Expression"orIIFE. // DOM is ready. Come and get it!});}( jQuery )); D AN

File layout (Alt)jQuery( document ).ready( function ( $ ) { JS // DOM is ready. Come and get it!}); Youcansupplyaparameterforthe anonymousfunctioncallback,andit willreferencejQuery. Usethisasashortcutwhenallyour codemustrunondocument.ready. D AN

CONCEPTS D AN

Iteration// Explicit, you realize this is looping over items JS$( "div" ).each(function () { ... });// Implicit, you may not realize each call is looping$( "div" ) .attr( "data-‐group", "doug" ) .addClass( "dougsGroup" ) .hide(); D AN

CSS vs. Class$( "div" ).css({ JS width: 20, Use.css()whenthe height: 500 valuesmustbedynamic}); Useclasseswhenyouknow// Or: thevaluesaheadoftime.$( "div" ).addClass( "tall" );.tall { width: 20px; height: 500px; } CSS D AN

Toggle Methodsvar div = $( "div" ); JSif ( div.hasClass( "frontendrocks" ) { div.addClass( "frontendrocks" );} else { div.removeClass( "frontendrocks" );}// A better way to write itdiv.toggleClass( "frontendrocks" ); D AN

Toggle Methods// If you need it to match up to a variable JSvar something = true, div = $( "div" );// This forces the class on or off based on `something`div.toggleClass( "frontendrocks", something );// Other methods support this too, check the APIdiv.slideToggle( 200, something );div.toggle( something ); D AN

updating valuesvar div = $( "div" );// Setting a single key/valuediv.attr( "key", "value" );// Setting more than one key/value at oncediv.attr( { "key": "value", "key2": "value2" });// Setting the value using a callback functiondiv.attr( "key" , function (i, oldValue ) { return "newvalue";}); D AN

updating values// Other methods support it too, check the APIdiv.addClass( function (i, val) { // This returns an incremental class to add for each // item in the result set return "awesome-‐" + i;}); D AN

Asynchronous codevar loaded = false;$.get( "http://url.com", function ( data ) { loaded = true;}); Thismethodwillrunat "somepointinthefuture"if ( loaded === true ) { Thisrunsrightaway,and // Never runs willexecutebeforethe} callbackfor$.getfires. D AN

Asynchronous codevar loaded = false;$.get( "http://url.com", function ( data ) { loaded = data.loaded; if ( loaded === true ) { // This runs when loaded is true } Putlogicthatdependson}); asynchronouscodeeitherin thecallbackorinafunction youexecutefromthecallback D AN

Lets Code! Code is available here:https://github.com/dcneiner/jquery-bling D AN

Links• jQuery Tmpl https://github.com/jquery/jquery-tmpl• jQuery MockJax http://code.appendto.com/plugins/jquery-mockjax• jQuery doTimeout http://benalman.com/projects/jquery-dotimeout-plugin/• Alternate jQuery API http://jqapi.com/ D AN

Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner

http://wrccdesign.com.br	294
http://saifulmuhajir.me	30
http://zootool.com	4
http://saifulmuhajir.web.id	1

jQuery: Nuts, Bolts and Bling

by Doug Neiner on Aug 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 329

Statistics

jQuery: Nuts, Bolts and Bling — Presentation Transcript