CONTEXTUAL jQuery




CONTEXTUAL jQuery                       Doug Neiner
CONTEXTUAL jQuery   Doug Neiner
CONTEXTUAL jQuery   Doug Neiner
PRE-OPTIMIZATION
               IS REALLY, REALLY BAD
                    But super easy to get caught up in.




CONTEXTU...
JQUERY CODE STYLES
 • Declarative

 • Dynamic

 • Contextual




CONTEXTUAL jQuery     Doug Neiner
DECLARATIVE
 • Heavy       use of ID’s, some classes, simple selectors

 • All   traditional event binding

 • Often      ...
DECLARATIVE

    $(function
()
{
    

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





$slider



=
$("#slider"),
    





$f...
DYNAMIC
 • Heavy       use of classes, simple selectors

 • Mixture          of traditional binding and live/delegate bind...
DYNAMIC

    $(function
()
{
    

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


    

$("a.toggle").live("click",
function
(e)...
CONTEXTUAL
 • Heavy       use of selectors and traversing

 • Minimal          use of ID’s or classes

 • Very      little...
CONTEXTUAL

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

e.preventDefault();
    

$(this)
    



.closest("...
BENEFITS
                    of Contextual jQuery




CONTEXTUAL jQuery                          Doug Neiner
BENEFITS
 • Faster      Flexible and More Responsive Code

 • Focussed         Use of Resources

 • Less     code

 • Easi...
IMPLEMENTATION



CONTEXTUAL jQuery                    Doug Neiner
THREE PARTS



                        Live Events
              Traversal, Filters and Selectors
                    HTML...
LIVE EVENTS



CONTEXTUAL jQuery                 Doug Neiner
BOUND EVENTS
                        document




   $("a").click(
…
);    <a>              Click Handler




            ...
LIVE EVENTS
                         document          Click Handler




   $("a")                 <a>
   .live("click",
…...
DELEGATE EVENTS
                      document




   $("#container")     <a>
   .delegate("a",
   


"click",
…
);

     ...
BIND              VS              LIVE
 • Separate         handler for each   • Single
                                   ...
WHAT ABOUT INITIALIZATION?
 • Keep      the setup minimal
    •   Use CSS and js/no-js classes
    •   Use selectors or da...
JS/NO-JS
   <!DOCTYPE
html>
   <html
class="no‐js">
   <head>
   


<meta
charset="UTF‐8">
   


<title>Sample</title>
   ...
DETERMINE INITIALIZATION STATE
   $("a[href^=contact]").live("click",
function
(e)
{
   

e.preventDefault();
   

var
dia...
WRITE CODE LIKE YOU
                SPEND MONEY
                   Opt to pay a little more later so you
         don't ri...
TRAVERSAL, FILTERS
                     AND SELECTORS



CONTEXTUAL jQuery                        Doug Neiner
TRAVERSAL METHODS
 • prev             • parents

 • prevAll          • parentsUntil

 • prevUntil        • offsetParent

 ...
BRITTLE    VS   FLEXIBLE

          prev              prevAll
          next              nextAll
          parent        ...
WHAT DOES THIS DO?




                    $("a").next("div")




CONTEXTUAL jQuery                        Doug Neiner
TRY THIS INSTEAD




     $("a").nextAll("div:first")




CONTEXTUAL jQuery             Doug Neiner
TRAVERSAL METHODS
 • prev             • parents

 • prevAll          • parentsUntil

 • prevUntil        • offsetParent

 ...
WHICH IS FASTER?


   $(this)
   
.closest("form")
   
.nextAll("nav:first")
   
.hide();

   $("#form‐nav").hide()

CONTE...
FILTER METHODS
 • filter

 • eq

 • first

 • slice

 • has

 • not




CONTEXTUAL jQuery   Doug Neiner
NOT          VS    IS
   if(
$("a").not("a")
){
   

alert("Why
does
this
work?");
   }



   if(
$("a").is(":not(a)")
){
...
SELECTORS
 • http://api.jquery.com/category/selectors/

 •A     few selectors
    •   [name=word],
[name!=word]
    •   [n...
WHICH IS FASTER?




         $("a[href*=twitter.com]")

                    $("a.twitter")



CONTEXTUAL jQuery          ...
WRITE CODE LIKE YOU
                  BUY A CAR
                    Always weigh the difference
                     betwe...
HTML CONVENTIONS



CONTEXTUAL jQuery                 Doug Neiner
SEMANTIC HTML
   <div>
   

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

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


   

<p...
CONVENTIONS ARE PATTERNS
 • You     can build them yourself

 • They      need to be consistent (or they aren't patterns)
...
DON'T THINK OF IDS AND
    CLASSES AS YOUR FIRST LINE
           OF ATTACK!


CONTEXTUAL jQuery           Doug Neiner
KEEP YOUR MARKUP CLEAN
   <div
class="record">
   

<h2>My
song</h2>
   

<cite>My
Author</cite>
   

<nav>
   



<a
href...
EXAMPLE CODE
   $("a[href$=preview],
a[href$=edit]").live("click",
function
(e)
{
   

e.preventDefault();
   

var
$this
...
WRITE CODE LIKE YOU
              ASK FOR DIRECTIONS
                    Try to get there on your own first!




CONTEXTUAL...
IN REVIEW
 • Don't   spend resources early, strive for just-in-time wherever
    possible.

 • Don't       be afraid to us...
TWITTER   @dougneiner

                      EMAIL   doug@dougneiner.com

                       WEB    http://dougneiner....
Upcoming SlideShare
Loading in...5
×

Contextual jQuery

58,429

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

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 of "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
    1. A particular slide catching your eye?

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

    ×