stackoverflow devdays: jquery introduction for developers
DESCRIPTION
Slides from my jQuery Introduction session at DevDays Amsterdam, including jsbin.com links for all code example (added a few missing ones).TRANSCRIPT
![Page 1: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/1.jpg)
Introduction for Developers
![Page 2: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/2.jpg)
Survey
![Page 3: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/3.jpg)
Who Me?
• Jörn Zaefferer from Cologne• Consultant for maxence integration
technologies• jQuery team member• jQuery UI lead developer• Co-Author jQuery Cookbook, due this month
![Page 4: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/4.jpg)
Why bother?
![Page 5: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/5.jpg)
Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery
![Page 6: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/6.jpg)
Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery
reddit.comespn.comibm.com
stackoverflow.comkickball.com
boxee.tvbit.ly
twitpic.com
whitehouse.govwikipedia.orgmicrosoft.comamazon.comnetflix.combing.com
monster.comtv.com
overstock.comtime.com
capitalone.comusatoday.com
ning.comwordpress.com
dell.comtwitter.com
![Page 7: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/7.jpg)
Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery
reddit.comespn.comibm.com
stackoverflow.comkickball.com
boxee.tvbit.ly
twitpic.com
whitehouse.govwikipedia.orgmicrosoft.comamazon.comnetflix.combing.com
monster.comtv.com
overstock.comtime.com
capitalone.comusatoday.com
ning.comwordpress.com
dell.comtwitter.com
![Page 8: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/8.jpg)
What exactly is jQuery
jQuery is a JavaScript Library!
• Dealing with the DOM• JavaScript Events• Animations• Ajax interactions
![Page 9: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/9.jpg)
What does that mean?
![Page 10: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/10.jpg)
It means no more of this
var tables = document.getElementsByTagName("table");for (vart = 0; t<tables.length; t++) {var rows = tables[t].getElementsByTagName("tr"); for (vari = 1; i<rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += " odd"; } }};
http://jsbin.com/esewu/edit
![Page 11: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/11.jpg)
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
![Page 12: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/12.jpg)
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
![Page 13: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/13.jpg)
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
jQuery Selector (CSS expression)
![Page 14: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/14.jpg)
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
jQuery Selector (CSS expression)
jQuery Wrapper Set
![Page 15: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/15.jpg)
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
jQuery Selector (CSS expression)
jQuery MethodjQuery Wrapper Set
![Page 16: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/16.jpg)
It really is the
“write less, do more”
JavaScript Library!
![Page 17: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/17.jpg)
Why use jQuery
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated with browser development
• Provides a large pool of plugins• Large and active community• Tested on 50 browsers, 11 platforms• Its for both coders and designers
![Page 18: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/18.jpg)
Why use jQuery over other solutions
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated with browser development
• Provides a large pool of plugins• Large and active community• Tested on 50 browsers, 11 platforms• Its for both coders and designers
![Page 19: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/19.jpg)
Concept 1. Find something, do something
![Page 20: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/20.jpg)
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul><li><a>home</a></li><li><a>about</a></li>
</ul></body></html>
![Page 21: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/21.jpg)
Concept 1. Find something, do something
<!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>
![Page 22: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/22.jpg)
Concept 1. Find something, do something
<!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>
![Page 23: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/23.jpg)
Concept 1. Find something, do something
<!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("#nav li");</script></body></html>
![Page 24: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/24.jpg)
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li class="navLiItem"><a>home</a></li><li class="navLiItem"><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("#nav li").addClass("navLiItem");</script></body></html>
![Page 25: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/25.jpg)
Concept 1. Find something, do something
<!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("#nav a");</script></body></html>
![Page 26: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/26.jpg)
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li><a href="/home">home</a></li><li><a href="/about">about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("#nav a").each(function(){jQuery(this).attr("href", "/" +
jQuery(this).text());});
</script></body></html>
![Page 27: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/27.jpg)
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav"></ul></body></html>
![Page 28: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/28.jpg)
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav"></ul><script src="jquery.js"></script><script>
jQuery("<li>home</li>");jQuery("<li>about</li>");
</script></body></html>
![Page 29: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/29.jpg)
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav"></ul><script src="jquery.js"></script><script>
jQuery("<li>home</li>").wrapInner("a");jQuery("<li>about</li>").wrapInner("a");
</script></body></html>
![Page 30: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/30.jpg)
Concept 2. Create something, do something
<!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("<li>home</li>").wrapInner("a").appendTo("#nav");
jQuery("<li>about</li>").wrapInner("a").appendTo("#nav");</script></body></html>
![Page 31: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/31.jpg)
Concept 3. Chaining<!DOCTYPE html><html><body>
<ul id="nav"><li class="navLiItem"><a href="/home">home</a></li><li class="navLiItem"><a
href="/about">about</a></li></ul>
<script src="jquery.js"></script><script>
jQuery("ul").attr("id","nav");jQuery("#nav li").addClass("navLiItem");jQuery("#nav a").each(function(){
jQuery(this).attr("href", "/" + jQuery(this).text());
});</script></body></html>
![Page 32: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/32.jpg)
Concept 3. Chaining<!DOCTYPE html><html><body>
<ul id="nav"><li class="navLiItem"><a href="/home">home</a></li><li class="navLiItem"><a
href="/about">about</a></li></ul>
<script src="jquery.js"></script><script>
jQuery("ul").attr("id","nav").find("li").addClass("navLiItem").find("a").each(function(){
jQuery(this).attr("href","/" + jQuery(this).text());
});</script></body></html>
![Page 33: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/33.jpg)
Concept 4. jQuery parameter types
• CSS Selectors & custom CSS expressions jQuery("#nav") and jQuery(":first")
• HTML jQuery("<li><a href=“#”>link</a></li>")
• DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target)
• A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})
![Page 34: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/34.jpg)
Review
• Find something, do something• Create something, do something• Chaining• jQuery parameter types
![Page 35: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/35.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 36: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/36.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery()
each() map()size()lengthselectorcontextindex()get()
![Page 37: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/37.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery()
each()map() size()lengthselectorcontext index()get()
![Page 38: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/38.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>Gold</p><p>Silver</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>alert(jQuery("p").map(function() {
return $(this).text();}).get());</script></body></html> http://jsbin.com/orani/edit#html
![Page 39: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/39.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 40: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/40.jpg)
Overview of jQuery API
jQuery("#nav li.contact")• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 41: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/41.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 42: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/42.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 43: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/43.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 44: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/44.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 45: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/45.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
jQuery("a:first[href*='foo']")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 46: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/46.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
jQuery("a:first[href*='foo']")
jQuery("#header, #footer")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 47: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/47.jpg)
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
jQuery("a:first[href*='foo']")
jQuery("#header, #footer")
jQuery("#header, #footer").filter(":visible")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 48: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/48.jpg)
Overview of jQuery API
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 49: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/49.jpg)
Overview of jQuery API
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
![Page 50: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/50.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
http://jsbin.com/irico/edit#html
<!DOCTYPE html><html><body>
<input type="text" value="search" />
<script src="jquery.js"></script><script>
$("input").focus(function(){ var v = $(this).val(); $(this).val( v == this.defaultValue ? "" : v);}).blur(function(){ var v = $(this).val(); $(this).val( !v ? this.defaultValue : v);});
</script></body></html>
http://jsbin.com/ihale/edit#html
![Page 51: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/51.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
add()children()closest()find()next()nextAll()prev() prevAll() siblings()
parent() parents()
andSelf()end()
eq()filter()is()not()slice()
![Page 52: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/52.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
add()children()closest()find()next()nextAll()prev() prevAll() siblings()
parent() parents()
andSelf()end()
eq()filter()is()not()slice()
![Page 53: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/53.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<h3>Quotes</h3><div>
<p>Now or never</p><p>Because he could</p>
</div>
<script src="jquery.js"></script><script>$("h3").click(function() {
$(this).next().toggle();}).next().hide();</script></body></html> http://jsbin.com/uhole/edit#html
![Page 54: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/54.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
html()text()
append()appendTo()prepend()prependTo()
after()insertAfter()before()insertBefore()
wrap()wrapAll()wrapInner()
replaceWith()replaceAll()
empty()remove()
clone()
![Page 55: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/55.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
html()text()
append()appendTo()prepend()prependTo()
after()insertAfter()before()insertBefore()
wrap()wrapAll()wrapInner()
replaceWith()replaceAll()
empty()remove()
clone()
![Page 56: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/56.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>Make me bold!</p>
<script src="jquery.js"></script><script>
jQuery("p").wrapInner("<b></b>");
</script></body></html>
http://jsbin.com/esuwu/edit#html
![Page 57: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/57.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
css()
offset()offsetParent()postion()scrollTop()scrollLeft()
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
![Page 58: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/58.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
css()
offset()offsetParent()postion()scrollTop()scrollLeft()
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
![Page 59: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/59.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><head><style>div{background-color:#ccc; width:100px; margin:0 20px; float:left;}</style></head><body>
<div></div><div></div><div></div>
<script src=“jquery.js" ></script><script>
jQuery("div").height(jQuery(document).height());
</script></body></html>
http://jsbin.com/iseti/edit#html
![Page 60: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/60.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
blur()change()click()dbclick()error()focus()keydown()keypress()keyup()mousedown()mousenter()mouseleave()mouseout()mouseup()resize()scroll()select()submit()unload()
ready()
bind()one()trigger()triggerHandler()unbind()
live()die()
hover()toggle()
![Page 61: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/61.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
blur()change()click()dbclick()error()focus()keydown()keypress()keyup()mousedown()mousenter()mouseleave()mouseout()mouseup()resize()scroll()select()submit()unload()
ready()
bind()one()trigger()triggerHandler()unbind()
live()die()
hover()toggle()
![Page 62: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/62.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>click me</p><p>click me</p>
<script src="jquery.js"></script><script>
jQuery("p").bind("click", function(){ $(this).after("<p>click me</p>"); });
</script></body></html>
http://jsbin.com/ehuki/edit#html
![Page 63: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/63.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>click me</p><p>click me</p>
<script src="jquery.js"></script><script>
jQuery("p").live("click", function(){ $(this).after("<p>click me</p>"); });
</script></body></html>
http://jsbin.com/epeha/edit#html
![Page 64: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/64.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
![Page 65: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/65.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
![Page 66: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/66.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
var tooltip = $("<div/>").addClass("tooltip").appendTo("body");$("input").mouseover(function(event) {
tooltip.text(this.title).css({left: event.pageX,top: event.pageY
}).fadeIn();}).mouseout(function() {
tooltip.fadeOut();});
http://jsbin.com/enoco3/edit#html
![Page 67: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/67.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
![Page 68: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/68.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><head><style>div{background-color:#bca;width:100px;border:1px solid green;}</style></head><body><div id="block">Hello!</div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script><script>
jQuery("#block").animate({ width: "70%",opacity: 0.4,
}, 1500);
</script></body></html>
http://jsbin.com/ulexu/edit#html
![Page 69: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/69.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.ajax()jQuery.get()jQuery.getJSON() jQuery,getScript() jQuery.post()
load()
ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
jQuery.ajaxSetup() serialize()serializeArray()
![Page 70: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/70.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript() jQuery.post()
load()
ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
jQuery.ajaxSetup() serialize()serializeArray()
![Page 71: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/71.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
http://jsbin.com/erase/edit#html
<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script><script>
jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?",function(data){
jQuery.each(data.items, function(i,item){ jQuery("<img/>").attr("src", item.media.m).appendTo("body");
if ( i == 30 ) return false; }); });</script></body></html> http://jsbin.com/ivifa/edit#html
![Page 72: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/72.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.supportjQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery,isFunction()
jQuery.trim()
jQuery.param()
![Page 73: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/73.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.supportjQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery.isFunction()
jQuery.trim()
jQuery.param()
![Page 74: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/74.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
// returns "hello"jQuery.trim(" hello ");
![Page 75: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/75.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.supportjQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery.isFunction()
jQuery.trim()
jQuery.param()
![Page 76: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/76.jpg)
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
// returns "name=John&url=ejohn.org"jQuery.param({ name: "John", url: "ejohn.org" });
![Page 77: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/77.jpg)
jQuery and $
var jQuery = window.jQuery = window.$ = function() {}
![Page 78: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/78.jpg)
jQuery and $
jQuery(document).ready(function($) {// ready code
});
or
jQuery(function($) {// ready code
});
![Page 79: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/79.jpg)
jQuery.noConflict()
![Page 80: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/80.jpg)
Plugins
![Page 81: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/81.jpg)
A jQueryplugin in 6 steps
http://jsbin.com/asice/edit
![Page 82: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/82.jpg)
A jQueryplugin in 6 stepsStep 1. create a private scope for $ alias<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
})(jQuery);</script></body></html>
![Page 83: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/83.jpg)
A jQueryplugin in 6 stepsStep 2. attach plugin to fn alias (aka prototype)<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){$(this).text($(this).text().replace(/hate/g,"love"));
};
})(jQuery);</script></body></html>
![Page 84: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/84.jpg)
A jQueryplugin in 6 stepsStep 2. attach plugin to fn alias (aka prototype)<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){$(this).text($(this).text().replace(/hate/g,"love"));
};
})(jQuery);jQuery("p").loveNotHate();</script></body></html>
![Page 85: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/85.jpg)
A jQueryplugin in 6 stepsStep 3. add implicit iteration<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ this.each(function(){
$(this).text($(this).text().replace(/hate/g,"love"));
}); };
})(jQuery);jQuery("p").loveNotHate();</script></body></html>
![Page 86: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/86.jpg)
A jQueryplugin in 6 stepsStep 3. add implicit iteration<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ this.each(function(){
$(this).text($(this).text().replace(/hate/g,"love"));
}); };
})(jQuery);jQuery("p").loveNotHate();</script></body></html>
![Page 87: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/87.jpg)
A jQueryplugin in 6 stepsStep 4. enable chaining<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,"love"));
}); };
})(jQuery);jQuery("p").loveNotHate();</script></body></html>
![Page 88: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/88.jpg)
A jQueryplugin in 6 stepsStep 4. enable chaining<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,"love"));
}); };
})(jQuery);jQuery("p").loveNotHate().hide();</script></body></html>
![Page 89: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/89.jpg)
A jQueryplugin in 6 stepsStep 5. add default options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate();</script></body></html>
![Page 90: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/90.jpg)
A jQueryplugin in 6 stepsStep 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
![Page 91: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/91.jpg)
A jQueryplugin in 6 stepsStep 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(options){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
![Page 92: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/92.jpg)
A jQueryplugin in 6 stepsStep 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options);return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
![Page 93: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/93.jpg)
A jQueryplugin in 6 stepsStep 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options);return this.each(function(){
$(this).text($(this).text().replace(/hate/g,options.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
![Page 94: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/94.jpg)
Plugins are simple,just follow the steps!
![Page 95: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/95.jpg)
jQuery News
• Moving towards a Conservancy (Software Freedom Law Center) owning the code
• Tax-deductible donations• Four conferences next year (Boston, San Francisco,
London, and online)• jQuery.org project site• T-shirts• jQuery Forum moving away from Google Groups• Revamp of the plugin site
![Page 96: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/96.jpg)
?
![Page 97: Stackoverflow DevDays: jQuery Introduction for Developers](https://reader031.vdocuments.net/reader031/viewer/2022012918/5558bdd0d8b42aa52a8b506d/html5/thumbnails/97.jpg)
Thank you!