Download as PDF, PPTX
Uploaded byDoug Neiner
jQuery: Nuts, Bolts and Bling
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.
More Related Content
![jQuery in the [Aol.] Enterprise](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-aol-enterprise-101017175311-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
- 2. Doug Neiner [email protected] 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 wascrafted 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!) 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 ďŹ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
- 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 [email protected] dougneiner dcneiner Doug Neiner