Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Contextual jQuery

60,669 views

Published on

This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors.

Published in: Technology

Contextual jQuery

  1. 1. CONTEXTUAL jQuery CONTEXTUAL jQuery Doug Neiner
  2. 2. CONTEXTUAL jQuery Doug Neiner
  3. 3. CONTEXTUAL jQuery Doug Neiner
  4. 4. PRE-OPTIMIZATION IS REALLY, REALLY BAD But super easy to get caught up in. CONTEXTUAL jQuery Doug Neiner
  5. 5. JQUERY CODE STYLES • Declarative • Dynamic • Contextual CONTEXTUAL jQuery Doug Neiner
  6. 6. DECLARATIVE • Heavy use of ID’s, some classes, simple selectors • All traditional event binding • Often repeated code with slight variations • Changes to HTML often require changes to JS and vice versa. • Large number of selectors running on Document Ready CONTEXTUAL jQuery Doug Neiner
  7. 7. DECLARATIVE $(function
()
{ 

var
$container
=
$("#container"), 





$slider



=
$("#slider"), 





$footer



=
$("#footer"); 

 

$("#toggle").click(function
()
{ 



$container.toggle(); 

}); 

 

$slider.click(function
()
{ 



$footer.html($slider.html()); 

}); }); CONTEXTUAL jQuery Doug Neiner
  8. 8. DYNAMIC • Heavy use of classes, simple selectors • Mixture of traditional binding and live/delegate binding • Less repeated code • Changes to HTML still may require changes to JS • Many selectors still running on Document Ready CONTEXTUAL jQuery Doug Neiner
  9. 9. DYNAMIC $(function
()
{ 

var
$container
=
$("#container"); 

 

$("a.toggle").live("click",
function
(e)
{ 



$container.toggle(); 



e.preventDefault(); 

}); }); CONTEXTUAL jQuery Doug Neiner
  10. 10. CONTEXTUAL • Heavy use of selectors and traversing • Minimal use of ID’s or classes • Very little repeated code • HTML follows a convention so edits require less changes to the JS • Virtually no selectors running on Document Ready CONTEXTUAL jQuery Doug Neiner
  11. 11. CONTEXTUAL $("form
a.submit").live("click",
function
(e)
{ 

e.preventDefault(); 

$(this) 



.closest("form") 



.find(".errors").slideUp().end() 



.submit(); }); CONTEXTUAL jQuery Doug Neiner
  12. 12. BENEFITS of Contextual jQuery CONTEXTUAL jQuery Doug Neiner
  13. 13. BENEFITS • Faster Flexible and More Responsive Code • Focussed Use of Resources • Less code • Easier to maintain • Easy to reuse CONTEXTUAL jQuery Doug Neiner
  14. 14. IMPLEMENTATION CONTEXTUAL jQuery Doug Neiner
  15. 15. THREE PARTS Live Events Traversal, Filters and Selectors HTML Conventions CONTEXTUAL jQuery Doug Neiner
  16. 16. LIVE EVENTS CONTEXTUAL jQuery Doug Neiner
  17. 17. BOUND EVENTS document $("a").click(
…
); <a> Click Handler <a> Click Handler <div#container> CONTEXTUAL jQuery Doug Neiner
  18. 18. LIVE EVENTS document Click Handler $("a") <a> .live("click",
…
); <a> <div#container> CONTEXTUAL jQuery Doug Neiner
  19. 19. DELEGATE EVENTS document $("#container") <a> .delegate("a", 


"click",
…
); <a> <div#container> Click Handler CONTEXTUAL jQuery Doug Neiner
  20. 20. BIND VS LIVE • Separate handler for each • Single handler for all element elements • Executes only when event • Checksevent on every is triggered on bound element in its context, and elements executes when a match is found • Elements can be retrieved ahead of time • Elements should be retrieved at run time • Mustbe bound after the DOM is ready • Can be setup at any time CONTEXTUAL jQuery Doug Neiner
  21. 21. WHAT ABOUT INITIALIZATION? • Keep the setup minimal • Use CSS and js/no-js classes • Use selectors or data to determine initialization state • Always opt for just-in-time initialization CONTEXTUAL jQuery Doug Neiner
  22. 22. JS/NO-JS <!DOCTYPE
html> <html
class="no‐js"> <head> 


<meta
charset="UTF‐8"> 


<title>Sample</title> 


<style> 





html.no‐js
.js,
html.js
.no‐js
{
display:
none
} 


</style> 


<script> 




document.documentElement.className
=
 






document.documentElement.className.replace("no‐js","js"); 


</script> </head> <body> 

<div
class="no‐js"><a
href="/about">Learn
About
Us</a></div> 

<div
class="js">
Something
Amazing!
</div> </body> CONTEXTUAL jQuery Doug Neiner
  23. 23. DETERMINE INITIALIZATION STATE $("a[href^=contact]").live("click",
function
(e)
{ 

e.preventDefault(); 

var
dialog
=
$("#dialog"); 

if(dialog.data("dialog")) 



dialog.dialog("open"); 

else 



dialog.dialog();
 }); $("a[href^=contact]").live("click",
function
(e)
{ 

e.preventDefault(); 

var
dialog
=
 



$(document).data("dialog")
||
 



$(document) 





.data("dialog",
$("#dialog").dialog({autoOpen:
false})) 





.data("dialog"); 

dialog.dialog("open"); }); CONTEXTUAL jQuery Doug Neiner
  24. 24. WRITE CODE LIKE YOU SPEND MONEY Opt to pay a little more later so you don't risk losing it all on something that never happens. CONTEXTUAL jQuery Doug Neiner
  25. 25. TRAVERSAL, FILTERS AND SELECTORS CONTEXTUAL jQuery Doug Neiner
  26. 26. TRAVERSAL METHODS • prev • parents • prevAll • parentsUntil • prevUntil • offsetParent • next • closest • nextAll • children • nextUntil • find • siblings • end • parent CONTEXTUAL jQuery Doug Neiner
  27. 27. BRITTLE VS FLEXIBLE prev prevAll next nextAll parent closest children find CONTEXTUAL jQuery Doug Neiner
  28. 28. WHAT DOES THIS DO? $("a").next("div") CONTEXTUAL jQuery Doug Neiner
  29. 29. TRY THIS INSTEAD $("a").nextAll("div:first") CONTEXTUAL jQuery Doug Neiner
  30. 30. TRAVERSAL METHODS • prev • parents • prevAll • parentsUntil • prevUntil • offsetParent • next • closest • nextAll • children • nextUntil • find • siblings • end • parent CONTEXTUAL jQuery Doug Neiner
  31. 31. WHICH IS FASTER? $(this) 
.closest("form") 
.nextAll("nav:first") 
.hide(); $("#form‐nav").hide() CONTEXTUAL jQuery Doug Neiner
  32. 32. FILTER METHODS • filter • eq • first • slice • has • not CONTEXTUAL jQuery Doug Neiner
  33. 33. NOT VS IS if(
$("a").not("a")
){ 

alert("Why
does
this
work?"); } if(
$("a").is(":not(a)")
){ 

alert("This
won't
show...
phew!"); } //
or if(
!$("a").is("a")
)
{ 
alert("This
won't
show
either!"); } CONTEXTUAL jQuery Doug Neiner
  34. 34. SELECTORS • http://api.jquery.com/category/selectors/ •A few selectors • [name=word],
[name!=word] • [name^=word],
[name$=word] • .stacked.classes • div:has(a) • div,
a,
p CONTEXTUAL jQuery Doug Neiner
  35. 35. WHICH IS FASTER? $("a[href*=twitter.com]") $("a.twitter") CONTEXTUAL jQuery Doug Neiner
  36. 36. WRITE CODE LIKE YOU BUY A CAR Always weigh the difference between cost and quality. CONTEXTUAL jQuery Doug Neiner
  37. 37. HTML CONVENTIONS CONTEXTUAL jQuery Doug Neiner
  38. 38. SEMANTIC HTML <div> 

<p
class="post‐title">My
Article</p> 

<p
class="post‐author">Doug
Neiner</p> 

 

<p>Hi
there!</p> 

<p
class="post‐quote">My
quote!</p> </div> 

 <div
class="post"> 

<h2>My
Article</h2> 

<cite>Doug
Neiner</cite> 

 

<p>Hi
there!</p> 

<blockquote>My
quote!</blockquote> </div> 

 CONTEXTUAL jQuery Doug Neiner
  39. 39. CONVENTIONS ARE PATTERNS • You can build them yourself • They need to be consistent (or they aren't patterns) • They are a promise you make • They can change between projects • They need to work for you! CONTEXTUAL jQuery Doug Neiner
  40. 40. DON'T THINK OF IDS AND CLASSES AS YOUR FIRST LINE OF ATTACK! CONTEXTUAL jQuery Doug Neiner
  41. 41. KEEP YOUR MARKUP CLEAN <div
class="record"> 

<h2>My
song</h2> 

<cite>My
Author</cite> 

<nav> 



<a
href="/song/5/preview">Preview</a> 



<a
href="/song/5/edit">Edit
Song</a> 

</nav> </div> <div
class="record"> 

<h2>My
song</h2> 

<cite>My
Author</cite> 

<nav> 



<a
href="/song/12/preview">Preview</a> 



<a
href="/song/12/edit">Edit
Song</a> 

</nav> </div> CONTEXTUAL jQuery Doug Neiner
  42. 42. EXAMPLE CODE $("a[href$=preview],
a[href$=edit]").live("click",
function
(e)
{ 

e.preventDefault(); 

var
$this
=
$(this), 





parts
=
$this.attr('href').split('/'), 





id
=
parts[2], 





action
=
parts[3], 





author
=
$this.closest("div").find("cite").html(); 

if
(action
===
"preview")
{ 



... 

} }); CONTEXTUAL jQuery Doug Neiner
  43. 43. WRITE CODE LIKE YOU ASK FOR DIRECTIONS Try to get there on your own first! CONTEXTUAL jQuery Doug Neiner
  44. 44. IN REVIEW • Don't spend resources early, strive for just-in-time wherever possible. • Don't be afraid to use complex selectors in the right settings. • Think twice before adding IDs or classes to your markup. See if there is another way first. • Always write your code with reusability in mind. Think in conventions as you work. CONTEXTUAL jQuery Doug Neiner
  45. 45. TWITTER @dougneiner EMAIL doug@dougneiner.com WEB http://dougneiner.com CONTEXTUAL jQuery Doug Neiner

×