jquery stack overflow devdays dc 2009
DESCRIPTION
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.TRANSCRIPT
![Page 1: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/1.jpg)
Richard D. Worth, jQuery Teamhttp://twitter.com/rworth
![Page 2: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/2.jpg)
Open Source (MIT, GPL)
JavaScript Library
Richard D. Worth
![Page 3: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/3.jpg)
John Resig, AuthorMozilla, JavaScript Evangelisthttp://ejohn.org/
January 2006BarCampNYC
History
Richard D. Worth
![Page 4: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/4.jpg)
Minimal
Lightweight (19kb)
Unobtrusive
Richard D. Worth
![Page 5: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/5.jpg)
Browser Compatible
IE6+
Safari 3+Chrome
FF2+
Opera 9+
Richard D. Worth
![Page 6: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/6.jpg)
reddit.comespn.comibm.comboxee.tv
bit.lytwitpic.com
whitehouse.gov
microsoft.comamazon.comnetflix.com
stackoverflow.combing.com
monster.comtv.com
overstock.comtime.com
capitalone.comwordpress.com
dell.comtwitter.com
w3.org
Who’s Using jQuery
Richard D. Worth
![Page 7: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/7.jpg)
reddit.comddit.cespn.comn.comibm.comi m
oxee.tvboxebibit.ly
twitpic.comwhitehouse.gov
microsoft.comcamazon.comamnetflix.com
bing.commonster.com
tv.com
overstock.comtime.com
capitalone.comwordpress.com
dell.comtwitter.com
w3.org
Who’s Using jQuery
Richard D. Worth
stackoverflow.com
![Page 8: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/8.jpg)
Changes the wayyou writeJavaScript
Richard D. Worth
![Page 9: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/9.jpg)
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
![Page 10: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/10.jpg)
jQuery('table tr:nth-child(odd)')
.addClass('odd');
Richard D. Worth
![Page 11: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/11.jpg)
$ == jQuery
jQuery $ Alias
Richard D. Worth
![Page 12: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/12.jpg)
jQuery Pattern
Find ThingsDo Stuff
Richard D. Worth
![Page 13: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/13.jpg)
$( ). ();
jQuery Pattern
Find ThingsDo Stuff
Richard D. Worth
![Page 14: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/14.jpg)
$("div").hide();$("button").remove();$("form").submit();$("p").addClass("special");$("span").show("fast");
Richard D. Worth
![Page 15: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/15.jpg)
<!DOCTYPE html><html><body><ul> <li><a>home</a></li> <li><a>about</a></li></ul></body></html>
Richard D. Worth
![Page 16: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/16.jpg)
<!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
![Page 17: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/17.jpg)
<!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
![Page 18: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/18.jpg)
<!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
![Page 19: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/19.jpg)
<!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
![Page 20: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/20.jpg)
<!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
![Page 21: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/21.jpg)
<!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
![Page 22: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/22.jpg)
<!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
![Page 23: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/23.jpg)
<!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
![Page 24: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/24.jpg)
<!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
![Page 25: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/25.jpg)
<!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
![Page 26: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/26.jpg)
<!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
![Page 27: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/27.jpg)
jQuery Object
Collection of DOM Elements
Array-like
Holds the methods
Richard D. Worth
![Page 28: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/28.jpg)
Selectors
CSS 1-3 (better than most browsers)
Basic XPath via a plugin
Custom jQuery selectors
Richard D. Worth
![Page 29: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/29.jpg)
$("div#nav")$("form > table")$("tr:even")$("a strong")$("a[href^=https://]")
Richard D. Worth
![Page 30: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/30.jpg)
$(":hidden")$("ul:visible")$(":disabled")$("td:first *")$("fieldset:has(button)")
Richard D. Worth
![Page 31: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/31.jpg)
Method Calls
Safe (0, 1, more elements)
No need for loop
Some operate on first element
Richard D. Worth
![Page 32: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/32.jpg)
$("p").addClass("special")
.css("color", "red")
.append("hello")
.show("slow");
Chaining
Richard D. Worth
![Page 33: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/33.jpg)
Some methods modify chain
.end() to get back to previous
Most methods are chainable
Chaining
Richard D. Worth
![Page 34: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/34.jpg)
Concise, Natural, Consistent
Logical, Almost Guessable
Easy to read, understand, remember
jQuery API
Richard D. Worth
![Page 35: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/35.jpg)
jQuery’s Focus
DOM Manip.
Ajax
Events
Animation
Richard D. Worth
![Page 36: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/36.jpg)
.next() .prev()
.find() .children()
.parent() .parents()
.filter()
DOM Traversing
Richard D. Worth
![Page 37: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/37.jpg)
.text() .html()
.attr() .removeAttr()
.remove() // returns element
.css()
Attributes
Richard D. Worth
![Page 38: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/38.jpg)
.css(key, value)
.css({key: value, key: value})
.addClass() .removeClass()
.toggleClass()
CSS / Styles
Richard D. Worth
![Page 39: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/39.jpg)
.append() .prepend()
.before() .after()
.insertBefore() .insertAfter()
$("<div>New Element</div>")
DOM Construction
Richard D. Worth
![Page 40: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/40.jpg)
Overloaded
Richard D. Worth
$(selector)
$(HTML)
$(DOMElement)
$(function) // DOM Ready
![Page 41: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/41.jpg)
$(selector, context)
Optional Context
Richard D. Worth
![Page 42: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/42.jpg)
.click(fn) .click()
.toggle(fn, fn) .toggle()
.click(fn) -> .bind("click", fn)
.click() -> .trigger("click")
Events
Richard D. Worth
![Page 43: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/43.jpg)
Event Handler/Callback
Callback gets context (this)
‘this’ is always a DOMElement
First parameter is Event object
Richard D. Worth
![Page 44: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/44.jpg)
.load(url)
.load(url + " " + selector)
Ajax
Richard D. Worth
![Page 45: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/45.jpg)
$.get()
$.post()
$.getJSON()
$.getScript()
Ajax
Richard D. Worth
![Page 46: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/46.jpg)
$.ajaxSend()
$.ajaxStart() $.ajaxStop()
$.ajaxError() $.ajaxSuccess()
$.ajaxComplete()
Ajax Events
Richard D. Worth
![Page 47: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/47.jpg)
.show() .hide() .toggle()
.fadeIn() .fadeOut() .fadeTo()
.animate() .stop() .queue()
.slideUp() .slideDown() .slideToggle()
Animations
Richard D. Worth
![Page 48: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/48.jpg)
Richard D. Worth
Plugins KeepThe Core Lean
![Page 49: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/49.jpg)
Richard D. Worth
Writing a jQueryPlugin
![Page 50: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/50.jpg)
Richard D. Worth
Extending theSelector Engine
![Page 51: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/51.jpg)
Richard D. Worth
Custom Events
![Page 52: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/52.jpg)
Richard D. Worth
.data()
![Page 53: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/53.jpg)
Richard D. Worth
Q&A
![Page 54: jQuery Stack Overflow DevDays DC 2009](https://reader035.vdocuments.mx/reader035/viewer/2022062220/5558bdbad8b42a7e298b51bb/html5/thumbnails/54.jpg)
Books
Richard D. Worth
Learning jQuery (Packt)
jQuery in Action (Manning)Karl Swedberg, Jonathan Chaffer
Bear Bibeault, Yehuda Katz