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.
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
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
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
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
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
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
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
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
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
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.