jQuery Stack Overflow DevDays DC 2009
Upcoming SlideShare
Loading in...5
×
 

jQuery Stack Overflow DevDays DC 2009

on

  • 5,593 views

jQuery is one of the most popular and easy to use JavaScript frameworks. jQuery is an open source library that simplifies DOM manipulation, event handling, Ajax, and animation. The jQuery core is lean ...

jQuery is one of the most popular and easy to use JavaScript frameworks. jQuery is an open source library that simplifies DOM manipulation, event handling, Ajax, and animation. The jQuery core is lean and light, while having the power and extensibility to support a rich plugin ecosystem. It also sports a concise and elegant API that is a joy to behold and use.

Statistics

Views

Total Views
5,593
Slideshare-icon Views on SlideShare
5,587
Embed Views
6

Actions

Likes
8
Downloads
86
Comments
0

2 Embeds 6

http://www.slideshare.net 3
http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    jQuery Stack Overflow DevDays DC 2009 jQuery Stack Overflow DevDays DC 2009 Presentation Transcript

    • 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 netflix.com capitalone.com boxee.tv stackoverflow.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 netflix.com capitalone.com boxe oxee.tv stackoverflow.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
    • var tables = document.getElementsByTagName('table'); for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName('tr'); for (var i = 1; i < rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) { rows[i].className += ' odd'; } } } 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 Stuff Richard D. Worth
    • jQuery Pattern $( Find Things ) . Do Stuff (); 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>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').find('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:first *") $("fieldset:has(button)") Richard D. Worth
    • Method Calls Safe (0, 1, more elements) No need for loop Some operate on first 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() .find() .children() .parent() .parents() .filter() 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 Chaffer jQuery in Action (Manning) Bear Bibeault, Yehuda Katz Richard D. Worth