Doug Neiner  doug@dougneiner.com           dougneiner             dcneiner          Doug Neiner
My FamilyCrystalRuby, Olivia, CodyNot pictured:Ditto the cat
Iamateam                                     memberhereIamaseniordesignerhere
AudienceThis presentation was crafted specifically for delivery at the Front End DesignConference in St. Petersburg, FL. Th...
Write working codeUgly, working code always trumps pretty, broken code                                  D                 ...
basics       D    AN
Writing the name     A. Jquery                                                                             C. jquery     B...
adding scriptsdiv	  id=dan	  I	  am	  Dan	  /div                                              HTMLstyle#dan	  {	  display:...
adding scriptsdiv	  id=dan	  I	  am	  Dan	  /div                                             HTMLscript$(	  #dan	  ).hide(...
adding scripts	  	  div	  id=dan	  I	  am	  Dan	  /div	  	  div	  id=cherrie	  I	  am	  Cherrie	  /div                    ...
adding scriptshtml	  class=no-­‐jshead                                            NowthetwoelementsarehiddenbyCSS,        ...
adding scripts	  	  div	  id=dan	  I	  am	  Dan	  /div	  	  div	  id=cherrie	  I	  am	  Cherrie	  /div                    ...
Adding scripts•   Use at least one external script file for your site, not tons of in-page script    blocks spread througho...
File layoutjQuery(	  document	  ).ready(	  function	  ()	  {                                                     JS	  	  j...
File layout(function	  (	  $	  )	  {                                           JSvar	  sample	  =	  {	  sample:	  true	  }...
File layout(function	  (	  $	  )	  {                                                                                      ...
File layout (Alt)jQuery(	  document	  ).ready(	  function	  (	  $	  )	  {                                                 ...
CONCEPTS        D     AN
Iteration//	  Explicit,	  you	  realize	  this	  is	  looping	  over	  items        JS$(	  div	  ).each(function	  ()	  {	...
CSS vs. Class$(	  div	  ).css({                                                                                           ...
Toggle Methodsvar	  div	  =	  $(	  div	  );                      JSif	  (	  div.hasClass(	  frontendrocks	  )	  {	  	  div...
Toggle Methods//	  If	  you	  need	  it	  to	  match	  up	  to	  a	  variable               JSvar	  something	  =	  true,	...
updating valuesvar	  div	  =	  $(	  div	  );//	  Setting	  a	  single	  key/valuediv.attr(	  key,	  value	  );//	  Setting...
updating values//	  Other	  methods	  support	  it	  too,	  check	  the	  APIdiv.addClass(	  function	  (i,	  val)	  {	  	...
Asynchronous codevar	  loaded	  =	  false;$.get(	  http://url.com,	  function	  (	  data	  )	  {	  	  	  loaded	  =	  true...
Asynchronous codevar	  loaded	  =	  false;$.get(	  http://url.com,	  function	  (	  data	  )	  {	  	  	  loaded	  =	  data...
Lets Code!          Code is available here:https://github.com/dcneiner/jquery-bling                             D         ...
Links•   jQuery Tmpl    https://github.com/jquery/jquery-tmpl•   jQuery MockJax    http://code.appendto.com/plugins/jquery...
Doug Neiner  doug@dougneiner.com           dougneiner             dcneiner          Doug Neiner
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
Upcoming SlideShare
Loading in...5
×

jQuery: Nuts, Bolts and Bling

16,167

Published on

This presentation covers some jQuery basics, as well as some general concepts you should understand about jQuery. You will find other tips and tricks sprinkled throughout before the live coding session starts.

The code from the live coding session is available here: https://github.com/dcneiner/jQuery-Bling and covers far more advanced topics than the slide portion of this presentation.

Published in: Technology, Business

jQuery: Nuts, Bolts and Bling

  1. 1. Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner
  2. 2. My FamilyCrystalRuby, Olivia, CodyNot pictured:Ditto the cat
  3. 3. Iamateam memberhereIamaseniordesignerhere
  4. 4. AudienceThis presentation was crafted specifically 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
  5. 5. Write working codeUgly, working code always trumps pretty, broken code D AN
  6. 6. basics D AN
  7. 7. Writing the name A. Jquery C. jquery B. JQuery D. jQuery *It’soktowriteitinallcapswhenthe restofthecontextisallcapsaswell. D AN
  8. 8. adding scriptsdiv  id=dan  I  am  Dan  /div HTMLstyle#dan  {  display:  none;  } Youobviously/style wouldn’tdothisdiv  id=cherrie  I  am  Cherrie  /divstyle#cherrie  {  background:  red;  }/style D AN
  9. 9. adding scriptsdiv  id=dan  I  am  Dan  /div HTMLscript$(  #dan  ).hide();/script Sopleasedon’t dothisdiv  id=cherrie  I  am  Cherrie  /divscript$(  #cherrie  ).hide().fadeIn(  500  );/script D AN
  10. 10. 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
  11. 11. adding scriptshtml  class=no-­‐jshead 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. File layout(function  (  $  )  { JSvar  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
  17. 17. File layout (Alt)jQuery(  document  ).ready(  function  (  $  )  { JS    //  DOM  is  ready.  Come  and  get  it!}); Youcansupplyaparameterforthe anonymousfunctioncallback,andit willreferencejQuery. Usethisasashortcutwhenallyour codemustrunondocument.ready. D AN
  18. 18. CONCEPTS D AN
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Asynchronous codevar  loaded  =  false;$.get(  http://url.com,  function  (  data  )  {      loaded  =  true;}); Thismethodwillrunat somepointinthefutureif  (  loaded  ===  true  )  { Thisrunsrightaway,and    //  Never  runs willexecutebeforethe} callbackfor$.getfires. D AN
  26. 26. 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
  27. 27. Lets Code! Code is available here:https://github.com/dcneiner/jquery-bling D AN
  28. 28. 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
  29. 29. Doug Neiner doug@dougneiner.com dougneiner dcneiner Doug Neiner
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×