Download as PDF, PPTX
![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](https://image.slidesharecdn.com/jquery-091028085823-phpapp01/75/jQuery-Stack-Overflow-DevDays-DC-2009-9-2048.jpg)
![$("div#nav")
$("form > table")
$("tr:even")
$("a strong")
$("a[href^=https://]")
Richard D. Worth](https://image.slidesharecdn.com/jquery-091028085823-phpapp01/75/jQuery-Stack-Overflow-DevDays-DC-2009-29-2048.jpg)
Uploaded byRichard D. Worth
jQuery Stack Overflow DevDays DC 2009
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.
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
- 4.
- 5. Browser Compatible IE6+ Safari 3+ Chrome FF2+ Opera9+ Richard D. Worth
- 6.
- 7.
- 8. Changes the way youwrite 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.
- 11. $ == jQuery jQuery$ Alias Richard D. Worth
- 12. jQuery Pattern Find Things DoStuff Richard D. Worth
- 13. $( ) . (); jQueryPattern Find Things Do Stuff Richard D. Worth
- 14.
- 15.
- 16.
- 17.
- 18. <!DOCTYPE html><html><body> <ul id="nav"> <li><a>home</a></li> <li><a>about</a></li> </ul> <scriptsrc="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> <scriptsrc="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"> <liclass="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"> <liclass="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"> <liclass="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"> <liclass="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"> <liclass="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"> <liclass="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"> <liclass="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 ofDOM Elements Array-like Holds the methods Richard D. Worth
- 28. Selectors CSS 1-3 (betterthan most browsers) Basic XPath via a plugin Custom jQuery selectors Richard D. Worth
- 29. $("div#nav") $("form > table") $("tr:even") $("astrong") $("a[href^=https://]") Richard D. Worth
- 30.
- 31. Method Calls Safe (0,1, more elements) No need for loop Some operate on first element Richard D. Worth
- 32.
- 33. Some methods modifychain .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
- 35.
- 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
- 40.
- 41.
- 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 getscontext (this) ‘this’ is always a DOMElement First parameter is Event object Richard D. Worth
- 44. .load(url) .load(url + "" + selector) Ajax Richard D. Worth
- 45.
- 46. $.ajaxSend() $.ajaxStart() $.ajaxStop() $.ajaxError() $.ajaxSuccess() $.ajaxComplete() AjaxEvents Richard D. Worth
- 47. .show() .hide() .toggle() .fadeIn().fadeOut() .fadeTo() .animate() .stop() .queue() .slideUp() .slideDown() .slideToggle() Animations Richard D. Worth
- 48. Richard D. Worth PluginsKeep The Core Lean
- 49. Richard D. Worth Writinga jQuery Plugin
- 50. Richard D. Worth Extendingthe Selector Engine
- 51. Richard D. Worth CustomEvents
- 52.
- 53.
- 54. Books Richard D. Worth LearningjQuery (Packt) jQuery in Action (Manning) Karl Swedberg, Jonathan Chaffer Bear Bibeault, Yehuda Katz