jQuery Stack Overflow DevDays DC 2009
•
8 gefällt mir•3,889 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 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.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
jQuery Stack Overflow DevDays DC 2009
- 1. Richard D. Worth, jQuery Team http://twitter.com/rworth
- 2. Open Source (MIT, GPL) JavaScript Library Richard D. Worth
- 3. John Resig, Author Mozilla, JavaScript Evangelist http://ejohn.org/ January 2006 BarCampNYC History Richard D. Worth
- 5. Browser Compatible IE6+ Safari 3+ Chrome FF2+ Opera 9+ Richard D. Worth
- 7. reddit.com ddit.c espn.com n.com ibm.com i m oxee.tv boxe bi bit.ly twitpic.com whitehouse.gov microsoft.com c amazon.com am netflix.com bing.com monster.com tv.com overstock.com time.com capitalone.com wordpress.com dell.com twitter.com w3.org Who’s Using jQuery Richard D. Worth stackoverflow.com
- 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
- 11. $ == jQuery jQuery $ Alias Richard D. Worth
- 12. jQuery Pattern Find Things Do Stuff Richard D. Worth
- 13. $( ) . (); jQuery Pattern Find Things Do Stuff 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. $("p").addClass("special") .css("color", "red") .append("hello") .show("slow"); Chaining Richard D. Worth
- 33. Some methods modify chain .end() to get back to previous Most methods are chainable Chaining Richard D. Worth
- 34. Concise, Natural, Consistent Logical, Almost Guessable Easy to read, understand, remember jQuery API Richard D. Worth
- 36. .next() .prev() .find() .children() .parent() .parents() .filter() DOM Traversing Richard D. Worth
- 37. .text() .html() .attr() .removeAttr() .remove() // returns element .css() Attributes Richard D. Worth
- 38. .css(key, value) .css({key: value, key: value}) .addClass() .removeClass() .toggleClass() CSS / Styles Richard D. Worth
- 39. .append() .prepend() .before() .after() .insertBefore() .insertAfter() $("<div>New Element</div>") DOM Construction Richard D. Worth
- 41. $(selector, context) Optional Context Richard D. Worth
- 42. .click(fn) .click() .toggle(fn, fn) .toggle() .click(fn) -> .bind("click", fn) .click() -> .trigger("click") Events 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. .load(url) .load(url + " " + selector) Ajax Richard D. Worth
- 46. $.ajaxSend() $.ajaxStart() $.ajaxStop() $.ajaxError() $.ajaxSuccess() $.ajaxComplete() Ajax Events Richard D. Worth
- 47. .show() .hide() .toggle() .fadeIn() .fadeOut() .fadeTo() .animate() .stop() .queue() .slideUp() .slideDown() .slideToggle() Animations Richard D. Worth
- 48. Richard D. Worth Plugins Keep The Core Lean
- 49. Richard D. Worth Writing a jQuery Plugin
- 50. Richard D. Worth Extending the Selector Engine
- 51. Richard D. Worth Custom Events
- 54. Books Richard D. Worth Learning jQuery (Packt) jQuery in Action (Manning) Karl Swedberg, Jonathan Chaffer Bear Bibeault, Yehuda Katz