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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Stack Overflow DevDays DC 2009

3,827
views

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

Published in: Technology

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,827
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
89
Comments
0
Likes
8
Embeds 0
No embeds

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