jQuery: Nuts, Bolts and Bling

dougneiner [email protected] dcneiner Doug Neiner Doug Neiner

Crystal Ruby, Olivia, Cody Not pictured: Ditto the cat My
Family

A N D Audience This presentation was crafted speciﬁcally 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: [email protected] (Be sure to reference this presentation when emailing!)

A N D Ugly, working code always trumps pretty, broken
code Write working code

A N D basics

A N D Writing the name A. Jquery C. jquery
D. jQuery B. JQuery *

A N D adding scripts <div id="dan"> I am Dan
</div> <style> #dan { display: none; } </style> <div id="cherrie"> I am Cherrie </div> <style> #cherrie { background: red; } </style> You

A N D adding scripts <div id="dan"> I am Dan
</div> <script> $( "#dan" ).hide(); </script> <div id="cherrie"> I am Cherrie </div> <script> $( "#cherrie" ).hide().fadeIn( 500 ); </script> So

A N D adding scripts <div id="dan"> I am
Dan </div> <div id="cherrie"> I am Cherrie </div> <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.6.2/jquery.min.js"></script> <script src="js/site.js"></script> </body> $( "#dan" ).hide(); $( "#cherrie" ).hide().fadeIn( 500 ); Better,

A N D adding scripts <html class="no-‐js"> <head>
... <script> document.documentElement.className = document.documentElement.className.replace( "no-‐js", "js" ); </script> <link rel="stylesheet" href="css/layout.css" /> Now

A N D adding scripts <div id="dan"> I am
Dan </div> <div id="cherrie"> I am Cherrie </div> <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.6.2/jquery.min.js"></script> <script src="js/site.js"></script> </body> $( "#cherrie" ).fadeIn( 500 ); Now

A N D 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

A N D File layout jQuery( document ).ready( function ()
{ jQuery( "div" ).each( function () { jQuery( this ).hide(); }); jQuery.getJSON( "...", function ( data ) { jQuery.each( data, function () { ... }); }); }); Too…⋯

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

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

A N D File layout (Alt) jQuery( document ).ready( function
( $ ) { // DOM is ready. Come and get it! }); You

A N D CONCEPTS

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

A N D CSS vs. Class $( "div" ).css({
width: 20, height: 500 }); // Or: $( "div" ).addClass( "tall" ); .tall { width: 20px; height: 500px; } Use

A N D Toggle Methods var div = $( "div"
); if ( div.hasClass( "frontendrocks" ) { div.addClass( "frontendrocks" ); } else { div.removeClass( "frontendrocks" ); } // A better way to write it div.toggleClass( "frontendrocks" ); JS

A N D Toggle Methods // If you need it
to match up to a variable 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 ); JS

A N D 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"; });

A N D 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; });

A N D Asynchronous code var loaded = false; $.get(
"http://url.com", function ( data ) { loaded = true; }); if ( loaded === true ) { // Never runs } This

A N D Asynchronous code var loaded = false; $.get(
"http://url.com", function ( data ) { loaded = data.loaded; if ( loaded === true ) { // This runs when loaded is true } }); Put

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

A N D 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/

dougneiner [email protected] dcneiner Doug Neiner Doug Neiner

jQuery: Nuts, Bolts and Bling

jQuery: Nuts, Bolts and Bling

Doug Neiner

More Decks by Doug Neiner

Other Decks in Programming

Featured

Transcript

dougneiner [email protected] dcneiner Doug Neiner Doug Neiner

Crystal Ruby, Olivia, Cody Not pictured: Ditto the cat My

I

A N D Audience This presentation was crafted speciﬁcally for

A N D Ugly, working code always trumps pretty, broken

A N D basics

A N D Writing the name A. Jquery C. jquery

A N D adding scripts <div id="dan"> I am Dan

A N D adding scripts <div id="dan"> I am Dan

A N D adding scripts <div id="dan"> I am

A N D adding scripts <html class="no-‐js"> <head>

A N D adding scripts <div id="dan"> I am

A N D Adding scripts • Use at least one

A N D File layout jQuery( document ).ready( function ()

A N D File layout (function ( $ ) {

A N D File layout (function ( $ ) {

A N D File layout (Alt) jQuery( document ).ready( function

A N D CONCEPTS

A N D Iteration // Explicit, you realize this is

A N D CSS vs. Class $( "div" ).css({

A N D Toggle Methods var div = $( "div"

A N D Toggle Methods // If you need it

A N D updating values var div = $( "div"

A N D updating values // Other methods support it

A N D Asynchronous code var loaded = false; $.get(

A N D Asynchronous code var loaded = false; $.get(

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

A N D Links • jQuery Tmpl https://github.com/jquery/jquery-tmpl • jQuery

dougneiner [email protected] dcneiner Doug Neiner Doug Neiner