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

Like this? Share it with your network

Share

jQuery Stack Overflow DevDays DC 2009

  • 5,707 views
Uploaded on

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

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,707
On Slideshare
5,701
From Embeds
6
Number of Embeds
2

Actions

Shares
Downloads
89
Comments
0
Likes
8

Embeds 6

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

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

Transcript

  • 1. Richard D. Worth, jQuery Team http://twitter.com/rworth
  • 2. Open Source (MIT, GPL) JavaScript Library Richard D. Worth
  • 3. History January 2006 BarCampNYC John Resig, Author Mozilla, JavaScript Evangelist http://ejohn.org/ Richard D. Worth
  • 4. Minimal Lightweight (19kb) Unobtrusive Richard D. Worth
  • 5. Browser Compatible IE6+ FF2+ Chrome Safari 3+ Opera 9+ Richard D. Worth
  • 6. 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
  • 7. 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
  • 8. Changes the way you write JavaScript Richard D. Worth
  • 9. 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
  • 10. jQuery('table tr:nth-child(odd)') .addClass('odd'); Richard D. Worth
  • 11. jQuery $ Alias $ == jQuery Richard D. Worth
  • 12. jQuery Pattern Find Things Do Stuff Richard D. Worth
  • 13. jQuery Pattern $( Find Things ) . Do Stuff (); Richard D. Worth
  • 14. $("div").hide(); $("button").remove(); $("form").submit(); $("p").addClass("special"); $("span").show("fast"); Richard D. Worth
  • 15. <!DOCTYPE html><html><body> <ul> <li><a>home</a></li> <li><a>about</a></li> </ul> </body></html> Richard D. Worth
  • 16. <!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
  • 17. <!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
  • 18. <!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
  • 19. <!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
  • 20. <!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
  • 21. <!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
  • 22. <!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
  • 23. <!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
  • 24. <!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
  • 25. <!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
  • 26. <!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
  • 27. jQuery Object Collection of DOM Elements Array-like Holds the methods Richard D. Worth
  • 28. Selectors CSS 1-3 (better than most browsers) Basic XPath via a plugin Custom jQuery selectors Richard D. Worth
  • 29. $("div#nav") $("form > table") $("tr:even") $("a strong") $("a[href^=https://]") Richard D. Worth
  • 30. $(":hidden") $("ul:visible") $(":disabled") $("td:first *") $("fieldset:has(button)") Richard D. Worth
  • 31. Method Calls Safe (0, 1, more elements) No need for loop Some operate on first element Richard D. Worth
  • 32. Chaining $("p").addClass("special") .css("color", "red") .append("hello") .show("slow"); Richard D. Worth
  • 33. Chaining Some methods modify chain .end() to get back to previous Most methods are chainable Richard D. Worth
  • 34. jQuery API Concise, Natural, Consistent Logical, Almost Guessable Easy to read, understand, remember Richard D. Worth
  • 35. jQuery’s Focus DOM Manip. Events Ajax Animation Richard D. Worth
  • 36. DOM Traversing .next() .prev() .find() .children() .parent() .parents() .filter() Richard D. Worth
  • 37. Attributes .text() .html() .attr() .removeAttr() .remove() // returns element .css() Richard D. Worth
  • 38. CSS / Styles .css(key, value) .css({key: value, key: value}) .addClass() .removeClass() .toggleClass() Richard D. Worth
  • 39. DOM Construction .append() .prepend() .before() .after() .insertBefore() .insertAfter() $("<div>New Element</div>") Richard D. Worth
  • 40. Overloaded $(selector) $(HTML) $(DOMElement) $(function) // DOM Ready Richard D. Worth
  • 41. Optional Context $(selector, context) Richard D. Worth
  • 42. Events .click(fn) .click() .toggle(fn, fn) .toggle() .click(fn) -> .bind("click", fn) .click() -> .trigger("click") Richard D. Worth
  • 43. Event Handler/Callback Callback gets context (this) ‘this’ is always a DOMElement First parameter is Event object Richard D. Worth
  • 44. Ajax .load(url) .load(url + " " + selector) Richard D. Worth
  • 45. Ajax $.get() $.post() $.getJSON() $.getScript() Richard D. Worth
  • 46. Ajax Events $.ajaxSend() $.ajaxStart() $.ajaxStop() $.ajaxError() $.ajaxSuccess() $.ajaxComplete() Richard D. Worth
  • 47. Animations .show() .hide() .toggle() .fadeIn() .fadeOut() .fadeTo() .animate() .stop() .queue() .slideUp() .slideDown() .slideToggle() Richard D. Worth
  • 48. Plugins Keep The Core Lean Richard D. Worth
  • 49. Writing a jQuery Plugin Richard D. Worth
  • 50. Extending the Selector Engine Richard D. Worth
  • 51. Custom Events Richard D. Worth
  • 52. .data() Richard D. Worth
  • 53. Q&A Richard D. Worth
  • 54. Books Learning jQuery (Packt) Karl Swedberg, Jonathan Chaffer jQuery in Action (Manning) Bear Bibeault, Yehuda Katz Richard D. Worth