Your SlideShare is downloading. ×
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Contextual jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Contextual jQuery

57,518

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 …

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
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
57,518
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
168
Comments
1
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide












  • 1) bind before DOM ready, events captured quickly
    2) Purchase tickets to every conference in 2011 just in case you attend
    3) Follow a convention to reduce your code. Why reconfigure code all the time.
































  • Transcript

    • 1. CONTEXTUAL jQuery CONTEXTUAL jQuery Doug Neiner
    • 2. CONTEXTUAL jQuery Doug Neiner
    • 3. CONTEXTUAL jQuery Doug Neiner
    • 4. PRE-OPTIMIZATION IS REALLY, REALLY BAD But super easy to get caught up in. CONTEXTUAL jQuery Doug Neiner
    • 5. JQUERY CODE STYLES • Declarative • Dynamic • Contextual CONTEXTUAL jQuery Doug Neiner
    • 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. 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. 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. DYNAMIC $(function
()
{ 

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

 

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



$container.toggle(); 



e.preventDefault(); 

}); }); CONTEXTUAL jQuery Doug Neiner
    • 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. CONTEXTUAL $("form
a.submit").live("click",
function
(e)
{ 

e.preventDefault(); 

$(this) 



.closest("form") 



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



.submit(); }); CONTEXTUAL jQuery Doug Neiner
    • 12. BENEFITS of Contextual jQuery CONTEXTUAL jQuery Doug Neiner
    • 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. IMPLEMENTATION CONTEXTUAL jQuery Doug Neiner
    • 15. THREE PARTS Live Events Traversal, Filters and Selectors HTML Conventions CONTEXTUAL jQuery Doug Neiner
    • 16. LIVE EVENTS CONTEXTUAL jQuery Doug Neiner
    • 17. BOUND EVENTS document $("a").click(
…
); <a> Click Handler <a> Click Handler <div#container> CONTEXTUAL jQuery Doug Neiner
    • 18. LIVE EVENTS document Click Handler $("a") <a> .live("click",
…
); <a> <div#container> CONTEXTUAL jQuery Doug Neiner
    • 19. DELEGATE EVENTS document $("#container") <a> .delegate("a", 


"click",
…
); <a> <div#container> Click Handler CONTEXTUAL jQuery Doug Neiner
    • 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. 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. 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. 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. 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. TRAVERSAL, FILTERS AND SELECTORS CONTEXTUAL jQuery Doug Neiner
    • 26. TRAVERSAL METHODS • prev • parents • prevAll • parentsUntil • prevUntil • offsetParent • next • closest • nextAll • children • nextUntil • find • siblings • end • parent CONTEXTUAL jQuery Doug Neiner
    • 27. BRITTLE VS FLEXIBLE prev prevAll next nextAll parent closest children find CONTEXTUAL jQuery Doug Neiner
    • 28. WHAT DOES THIS DO? $("a").next("div") CONTEXTUAL jQuery Doug Neiner
    • 29. TRY THIS INSTEAD $("a").nextAll("div:first") CONTEXTUAL jQuery Doug Neiner
    • 30. TRAVERSAL METHODS • prev • parents • prevAll • parentsUntil • prevUntil • offsetParent • next • closest • nextAll • children • nextUntil • find • siblings • end • parent CONTEXTUAL jQuery Doug Neiner
    • 31. WHICH IS FASTER? $(this) 
.closest("form") 
.nextAll("nav:first") 
.hide(); $("#form‐nav").hide() CONTEXTUAL jQuery Doug Neiner
    • 32. FILTER METHODS • filter • eq • first • slice • has • not CONTEXTUAL jQuery Doug Neiner
    • 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. 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. WHICH IS FASTER? $("a[href*=twitter.com]") $("a.twitter") CONTEXTUAL jQuery Doug Neiner
    • 36. WRITE CODE LIKE YOU BUY A CAR Always weigh the difference between cost and quality. CONTEXTUAL jQuery Doug Neiner
    • 37. HTML CONVENTIONS CONTEXTUAL jQuery Doug Neiner
    • 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. 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. DON'T THINK OF IDS AND CLASSES AS YOUR FIRST LINE OF ATTACK! CONTEXTUAL jQuery Doug Neiner
    • 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. 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. WRITE CODE LIKE YOU ASK FOR DIRECTIONS Try to get there on your own first! CONTEXTUAL jQuery Doug Neiner
    • 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. TWITTER @dougneiner EMAIL doug@dougneiner.com WEB http://dougneiner.com CONTEXTUAL jQuery Doug Neiner

    ×