jQuery Stack Overflow DevDays DC 2009

Richard D. Worth, jQuery Team http://twitter.com/rworth

Open Source (MIT, GPL) JavaScript Library Richard D. Worth

History January 2006 BarCampNYC John Resig, Author Mozilla, JavaScript Evangelist http://ejohn.org/ Richard D. Worth

Minimal Lightweight (19kb) Unobtrusive Richard D. Worth

Browser Compatible IE6+ FF2+ Chrome Safari 3+ Opera 9+ Richard D. Worth

Who’s Using jQuery reddit.com microsoft.com overstock.com espn.com amazon.com time.com ibm.com netﬂix.com capitalone.com boxee.tv stackoverﬂow.com wordpress.com bit.ly bing.com dell.com twitpic.com monster.com twitter.com whitehouse.gov tv.com w3.org Richard D. Worth

Who’s Using jQuery reddit.com ddit.c microsoft.com c overstock.com espn.com n.com am amazon.com time.com i ibm.com m netﬂix.com capitalone.com boxe oxee.tv stackoverﬂow.com wordpress.com bit.ly bi bing.com dell.com twitpic.com monster.com twitter.com whitehouse.gov tv.com w3.org Richard D. Worth

Changes the way you write JavaScript Richard D. Worth

jQuery('table tr:nth-child(odd)') .addClass('odd'); Richard D. Worth

jQuery $ Alias $ == jQuery Richard D. Worth

jQuery Pattern Find Things Do Stuﬀ Richard D. Worth

jQuery Pattern $( Find Things ) . Do Stuﬀ (); Richard D. Worth

$("div").hide(); $("button").remove(); $("form").submit(); $("p").addClass("special"); $("span").show("fast"); Richard D. Worth

<!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul'); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li'); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a'); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a>home</a></li> <li class="item"><a>about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a').each(function(){ jQuery(this); }); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script><script> jQuery('ul').attr('id', 'nav'); jQuery('#nav li').addClass('item'); jQuery('#nav a').each(function(){ jQuery(this).attr('href', '/' + jQuery(this).text()); }); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script><script> $('ul').attr('id', 'nav'); $('#nav li').addClass('item'); $('#nav a').each(function(){ $(this).attr('href', '/' + $(this).text()); }); </script> </body></html> Richard D. Worth

<!DOCTYPE html><html><body> <ul id="nav"> <li class="item"><a href="/home">home</a></li> <li class="item"><a href="/about">about</a></li> </ul> <script src="jquery.js"></script><script> $('ul').attr('id', 'nav'); $('#nav li').addClass('item').ﬁnd('a').each(function(){ $(this).attr('href', '/' + $(this).text()); }); </script> </body></html> Richard D. Worth

jQuery Object Collection of DOM Elements Array-like Holds the methods Richard D. Worth

Selectors CSS 1-3 (better than most browsers) Basic XPath via a plugin Custom jQuery selectors Richard D. Worth

$("div#nav") $("form > table") $("tr:even") $("a strong") $("a[href^=https://]") Richard D. Worth

$(":hidden") $("ul:visible") $(":disabled") $("td:ﬁrst *") $("ﬁeldset:has(button)") Richard D. Worth

Method Calls Safe (0, 1, more elements) No need for loop Some operate on ﬁrst element Richard D. Worth

Chaining $("p").addClass("special") .css("color", "red") .append("hello") .show("slow"); Richard D. Worth

Chaining Some methods modify chain .end() to get back to previous Most methods are chainable Richard D. Worth

jQuery API Concise, Natural, Consistent Logical, Almost Guessable Easy to read, understand, remember Richard D. Worth

jQuery’s Focus DOM Manip. Events Ajax Animation Richard D. Worth

DOM Traversing .next() .prev() .ﬁnd() .children() .parent() .parents() .ﬁlter() Richard D. Worth

Attributes .text() .html() .attr() .removeAttr() .remove() // returns element .css() Richard D. Worth

CSS / Styles .css(key, value) .css({key: value, key: value}) .addClass() .removeClass() .toggleClass() Richard D. Worth

DOM Construction .append() .prepend() .before() .after() .insertBefore() .insertAfter() $("<div>New Element</div>") Richard D. Worth

Overloaded $(selector) $(HTML) $(DOMElement) $(function) // DOM Ready Richard D. Worth

Optional Context $(selector, context) Richard D. Worth

Events .click(fn) .click() .toggle(fn, fn) .toggle() .click(fn) -> .bind("click", fn) .click() -> .trigger("click") Richard D. Worth

Event Handler/Callback Callback gets context (this) ‘this’ is always a DOMElement First parameter is Event object Richard D. Worth

Ajax .load(url) .load(url + " " + selector) Richard D. Worth

Ajax $.get() $.post() $.getJSON() $.getScript() Richard D. Worth

Ajax Events $.ajaxSend() $.ajaxStart() $.ajaxStop() $.ajaxError() $.ajaxSuccess() $.ajaxComplete() Richard D. Worth

Animations .show() .hide() .toggle() .fadeIn() .fadeOut() .fadeTo() .animate() .stop() .queue() .slideUp() .slideDown() .slideToggle() Richard D. Worth

Plugins Keep The Core Lean Richard D. Worth

Writing a jQuery Plugin Richard D. Worth

Extending the Selector Engine Richard D. Worth

Custom Events Richard D. Worth

.data() Richard D. Worth

Q&A Richard D. Worth

Books Learning jQuery (Packt) Karl Swedberg, Jonathan Chaﬀer jQuery in Action (Manning) Bear Bibeault, Yehuda Katz Richard D. Worth

jQuery Stack Overflow DevDays DC 2009

0 comments

Notes on slide 1

4 Favorites