jQuery: Nuts, Bolts and Bling
19 likes7,150 views
The document is a presentation by Doug Neiner, aimed at an audience ranging from beginners to experienced jQuery users, delivered at the Front End Design Conference. It covers foundational jQuery concepts, best practices, coding techniques, and includes both slide content and live coding examples available on GitHub. Doug encourages audience interaction and offers his email for follow-up questions related to the presentation.
jQuery: Nuts, Bolts and Bling
- 2. Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner
- 3. My Family Crystal Ruby, Olivia, Cody Not pictured: Ditto the cat
- 4. Iamateam memberhere Iamasenior designerhere
- 5. Audience This presentation was crafted specifically for delivery at the Front End Design Conference in St. Petersburg, FL. The audience consisted of designers who have never used jQuery through developers who use jQuery regularly. The slide portion of this presentation has a lot of getting started information, as well as some tricks you may or may not know. The live coding portion (available on Github) 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 presentation when emailing!) D AN
- 7. Write working code Ugly, working code always trumps pretty, broken code D AN
- 8. basics D AN
- 9. Writing the name A. Jquery C. jquery B. JQuery D. jQuery *It’soktowriteitinallcapswhenthe restofthecontextisallcapsaswell. D AN
- 10. 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
- 11. 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
- 12. adding scripts div id=dan I am Dan /div div id=cherrie I am Cherrie /div HTML script src=//ajax.googleapis.com/ajax/ Better,butnow libs/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
- 13. 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 don'tneedthiscode .js #dan, .js #cherrie { display: none; } CSS D AN
- 14. adding scripts div id=dan I am Dan /div div id=cherrie I am Cherrie /div HTML script src=//ajax.googleapis.com/ajax/ Nowwecanremove libs/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
- 15. Adding scripts • Use at least one external script file 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
- 16. File layout jQuery( document ).ready( function () { JS jQuery( div ).each( function () { jQuery( this ).hide(); }); Too…⋯Much…⋯ jQuery…⋯ jQuery.getJSON( ..., function ( data ) { jQuery.each( data, function () { ... }); }); }); D AN
- 17. File layout (function ( $ ) { JS var sample = { sample: true }; // DOM may not be complete $( document ).ready( function () { // DOM is ready. Come and get it! }); }( jQuery )); D AN
- 18. File layout (function ( $ ) { JS var sample = { sample: true }; // DOM may not be complete Thisiscalledan Immediately InvokingFunction $( document ).ready( function () { ExpressionorIIFE. // DOM is ready. Come and get it! }); }( jQuery )); D AN
- 19. File layout (Alt) jQuery( document ).ready( function ( $ ) { JS // DOM is ready. Come and get it! }); Youcansupplyaparameterforthe anonymousfunctioncallback,andit willreferencejQuery. Usethisasashortcutwhenallyour codemustrunondocument.ready. D AN
- 20. CONCEPTS D AN
- 21. 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
- 22. 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
- 23. Toggle Methods var div = $( div ); JS if ( div.hasClass( frontendrocks ) { div.addClass( frontendrocks ); } else { div.removeClass( frontendrocks ); } // A better way to write it div.toggleClass( frontendrocks ); D AN
- 24. Toggle Methods // If you need it to match up to a variable JS var 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 API div.slideToggle( 200, something ); div.toggle( something ); D AN
- 25. updating values var div = $( div ); // Setting a single key/value div.attr( key, value ); // Setting more than one key/value at once div.attr( { key: value, key2: value2 }); // Setting the value using a callback function div.attr( key , function (i, oldValue ) { return newvalue; }); D AN
- 26. updating values // Other methods support it too, check the API div.addClass( function (i, val) { // This returns an incremental class to add for each // item in the result set return awesome-‐ + i; }); D AN
- 27. Asynchronous code var loaded = false; $.get( http://url.com, function ( data ) { loaded = true; }); Thismethodwillrunat somepointinthefuture if ( loaded === true ) { Thisrunsrightaway,and // Never runs willexecutebeforethe } callbackfor$.getfires. D AN
- 28. Asynchronous code var 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
- 29. Lets Code! Code is available here: https://github.com/dcneiner/jquery-bling D AN
- 30. 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
- 31. Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner