![Page 1: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/1.jpg)
Yearning jQuery
![Page 2: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/2.jpg)
Hi, I’m Remy / @rem
Screencast @ jqueryfordesigners.com
Questions: interrupt me & ask!
![Page 3: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/3.jpg)
![Page 4: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/4.jpg)
1. Build without jQuery.
2. Design the start and end of your effects without jQuery.
3. Add jQuery a little at a time.
![Page 5: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/5.jpg)
"all about CSS"(a lot of it is...)
- Me, to many a colleague
![Page 6: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/6.jpg)
Dear designer/dev: if you're using JavaScript to do a job that CSS could have done perfectly well, you've lost some points in my book. Sorry
@remRemy Sharp
![Page 7: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/7.jpg)
The day someone loses business because an animated transition wasn't used to reveal a screenshot: I'll sell my left nut on eBay. #cssinstead
@remRemy Sharp
![Page 8: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/8.jpg)
What we're covering
• Getting friendly with the $
• DOM navigation & manipulation
• Events
• Ajax
• Tips
![Page 9: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/9.jpg)
APIsdocs.jquery.comapi.jquery.com
visualjquery.com
Blogs, tutorials, screencasts,plugins, development sprints
forum.jquery.com
IRC channelirc.freenode.net/#jquery
Twitter@jquery
@jquerysites@jqueryui
Help!
![Page 10: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/10.jpg)
jsbin.com
![Page 11: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/11.jpg)
Bling Function
![Page 12: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/12.jpg)
![Page 13: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/13.jpg)
It means no more of this
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';
}
}
}
![Page 14: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/14.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 15: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/15.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
jQuery function
![Page 16: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/16.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
jQuery function
CSS expression
![Page 17: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/17.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
jQuery function
CSS expression
jQuery method
![Page 18: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/18.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 19: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/19.jpg)
$('just css')
![Page 20: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/20.jpg)
Tools of the Trade
![Page 21: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/21.jpg)
• Firefox: Firebug (& FireQuery*)
• Safari & Chrome: Web Inspector
• Opera: DragonFly
• IE: Web Developer Toolbar
![Page 22: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/22.jpg)
![Page 23: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/23.jpg)
![Page 24: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/24.jpg)
![Page 25: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/25.jpg)
$.fn.jquery
Tip
(little 'q')
![Page 27: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/27.jpg)
jQuery on every site?
No Problem.
![Page 29: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/29.jpg)
Let's play.
![Page 30: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/30.jpg)
Installing jQuery
![Page 31: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/31.jpg)
dev or min?
![Page 32: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/32.jpg)
Hosting options• Host it yourself (good for offline
dev)
• Hotlink it:
• Media Temple
• Microsoft
• Google (my pick)http://docs.jquery.com/Downloading_jQuery
![Page 33: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/33.jpg)
CDN FTW
![Page 34: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/34.jpg)
Tip: keep a copy on your machine
![Page 35: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/35.jpg)
Where does it all go?
![Page 36: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/36.jpg)
• jQuery first
• Then jQuery plugins
• Then your code
![Page 37: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/37.jpg)
• Other JavaScript libraries
• jQuery last library
• Then jQuery plugin scripts
• Then your code
![Page 38: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/38.jpg)
<html><head> <styles> <!-- make me beautiful --> </styles></head><body> <content> <!-- make me learned --> </content> <behaviour> <!-- ooo, matron --> </behaviour></body></html>
![Page 39: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/39.jpg)
<html><head> <styles> <!-- make me beautiful --> </styles></head><body> <content> <!-- make me learned --> </content> <behaviour> <!-- ooo, matron --> </behaviour></body></html>
Styles first let's the page
render without scripts
blocking
![Page 40: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/40.jpg)
<html><head> <styles> <!-- make me beautiful --> </styles></head><body> <content> <!-- make me learned --> </content> <behaviour> <!-- ooo, matron --> </behaviour></body></html>
Then your content,
again so that it's delivered
to your visitor as early as possible
![Page 41: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/41.jpg)
<html><head> <styles> <!-- make me beautiful --> </styles></head><body> <content> <!-- make me learned --> </content> <behaviour> <!-- ooo, matron --> </behaviour></body></html>
Finally, add your
behaviour, the jQuery
and sexy magic jazz.
![Page 42: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/42.jpg)
$(document).ready(function () {
// < YOU >
});
![Page 43: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/43.jpg)
$(document).ready(function () {
// < YOU >
});
![Page 44: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/44.jpg)
$(function () {
// < YOU >
});
![Page 45: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/45.jpg)
jQuery(function ($) {
// < YOU >
});
Tip
Useful when giving code to a client
![Page 46: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/46.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset=utf-8 /><title>My first jQuery page</title></head><body><h1>Remy woz 'ere</h1><p>Lorem ipsum dolor sit amet.</p><script src="jquery.min.js"></script><script>$(function () { // < YOU >});</script></body></html>
![Page 47: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/47.jpg)
Is it jQuery or $?
![Page 48: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/48.jpg)
It's both.
![Page 49: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/49.jpg)
$('table tr:nth-child(odd)')
![Page 50: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/50.jpg)
jQuery('table tr:nth-child(odd)')
![Page 51: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/51.jpg)
$('table tr:nth-child(odd)')
![Page 52: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/52.jpg)
∞∞∞ Chaining ∞∞∞
![Page 53: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/53.jpg)
$('div').show().hide().slideUp().slideDown();
![Page 54: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/54.jpg)
$('div').show().hide().slideUp().slideDown();
Get the divs,
![Page 55: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/55.jpg)
$('div').show().hide().slideUp().slideDown();
and show them,
![Page 56: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/56.jpg)
$('div').show().hide().slideUp().slideDown();
now hide them,
![Page 57: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/57.jpg)
$('div').show().hide().slideUp().slideDown();
and then slide them up,
![Page 58: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/58.jpg)
$('div').show().hide().slideUp().slideDown();
then finally slide them down.
![Page 59: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/59.jpg)
Can't chain text getters
.val() .html() .text() .css(prop) .attr(prop), etc
![Page 60: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/60.jpg)
if ( $('foo') ) { doAmazing();}
Gotcha & Tip
![Page 61: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/61.jpg)
1) $('foo')
2) $()
3) []
4) [].join(',') // works
![Page 62: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/62.jpg)
if ( $('foo') ) { doAmazing();}
![Page 63: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/63.jpg)
if ( $('foo').length ) { doAmazing();}
![Page 64: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/64.jpg)
$('el').doStuffvs
$.doStuff
![Page 65: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/65.jpg)
$('el').doStuffruns against everything
matched.
![Page 66: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/66.jpg)
$.doStuffis a utility.
![Page 67: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/67.jpg)
$.browser.version$.browser.msie$.browser.safari $.browser.webkit
Deprecated
![Page 68: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/68.jpg)
Doing stuff
![Page 69: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/69.jpg)
$('a').click(function () { alert('I got clicked'); return false;});
![Page 70: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/70.jpg)
$('a').click(function () { alert('I got clicked'); return false;});
Find the anchors
![Page 71: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/71.jpg)
$('a').click(function () { alert('I got clicked'); return false;});
when they're clicked
![Page 72: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/72.jpg)
$('a').click(function () { alert('I got clicked'); return false;});
run this function - don't worryabout the crazy syntax.
![Page 73: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/73.jpg)
$('a').click(function () { alert('I got clicked'); return false;});
Cancel the browser's default action, which is to redirect.
![Page 74: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/74.jpg)
$('a').click(function(event){ event.preventDefault(); alert('I got clicked');});
Same thing as cancelling (almost), this is useful for debugging.
![Page 75: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/75.jpg)
• click, dblclick
• mousedown, mouseup, mousemove mouseover, mouseout, mouseenter mouseleave
• keydown, keypress, keyup
• submit, change, blur, focus, select
• scroll, resize, load, error
![Page 76: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/76.jpg)
Tabs freakin' everywhere!
![Page 77: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/77.jpg)
![Page 78: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/78.jpg)
![Page 79: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/79.jpg)
![Page 80: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/80.jpg)
![Page 81: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/81.jpg)
You get the idea.
![Page 82: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/82.jpg)
• A group of "panels"
• Tabs (or links) pointing to a panel
• Clicking tab, hides all panels, then shows just one
A tabbing system is...
![Page 83: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/83.jpg)
...the content can also be be Ajaxy
![Page 84: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/84.jpg)
A few words on this
![Page 85: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/85.jpg)
this is the element
that the event is
happening to.
![Page 86: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/86.jpg)
$('a').click(function () { console.log(this);});
this is the anchor element, not the jQuery wrapped element.
![Page 87: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/87.jpg)
$('a').click(function () { setTimeout(function () { $(this).text("I'm alive!"); }, 1000);});
Common mistake
![Page 88: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/88.jpg)
$('a').click(function () { setTimeout(function () { $(this).text("I'm alive!"); }, 1000);});
Common mistake
this is the window object, not the link
![Page 89: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/89.jpg)
$('a').click(function () { var el = this; setTimeout(function () { $(el).text("I'm alive!"); }, 1000);});
Common mistake
![Page 90: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/90.jpg)
Live codin' time!
tabs.html
![Page 91: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/91.jpg)
Events
![Page 92: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/92.jpg)
$('input').keydown(function (event) { // what's the event arg?});
![Page 93: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/93.jpg)
•.keyup(fn), .click(fn), etc
•.bind(type, fn)
•.trigger(type), unbind(type)
•.one(type, fn)
![Page 94: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/94.jpg)
Clickables
Tip
![Page 95: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/95.jpg)
$.event.special.click = { setup: function() { $(this).css('cursor','pointer'); return false; }, teardown: function() { $(this).css('cursor',''); return false; }};
All credit to David Walsh
![Page 96: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/96.jpg)
Problem
![Page 97: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/97.jpg)
<h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><script src="jquery.js"><script>$('img').click(function(){ showDetails(this);});</script>
When the page has finished
loading, the jQuery runs
![Page 98: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/98.jpg)
<h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><script src="jquery.js"><script>$('img').click(function(){ showDetails(this);});</script>
Clicking these images
"shows details"
![Page 99: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/99.jpg)
<h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><script src="jquery.js"><script>$('img').click(function(){ showDetails(this);});</script>
Now Ajax (or something else) add new images to the
page
![Page 100: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/100.jpg)
<h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><img src="mothernature.jpg"><script src="jquery.js"><script>$('img').click(function(){ showDetails(this);});</script>
Now Ajax (or something else) add new images to the
page
![Page 101: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/101.jpg)
<h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><img src="mothernature.jpg"><script src="jquery.js"><script>$('img').click(function(){ showDetails(this);});</script>
Clicking this image doesn't do anything.
![Page 102: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/102.jpg)
Solution: delegation
![Page 103: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/103.jpg)
<h1>Super Ted</h1><img src="superted.jpg"><img src="spotty.jpg"><img src="txspete.jpg"><script src="jquery.js"><script>$('#superTed').delegate('img','click',function(){ showDetails(this);});</script>
![Page 104: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/104.jpg)
![Page 105: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/105.jpg)
These images are loaded after
the DOM has loaded via Ajax
![Page 106: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/106.jpg)
We're going to "delegate" the task of listening for particular
events to this <div>
![Page 107: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/107.jpg)
We've "delegate" clicks, looking for the "img" selector
![Page 108: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/108.jpg)
$('div').delegate('img','click',function(){ /* do funky stuff */ });
![Page 109: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/109.jpg)
Now, any new images inserted in this <div> can be clicked and will fire the
"funky stuff" function
![Page 110: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/110.jpg)
Ajax Warning: wear your tech-hat
![Page 111: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/111.jpg)
No brainer Ajax
![Page 112: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/112.jpg)
.load
![Page 113: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/113.jpg)
![Page 114: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/114.jpg)
Example
![Page 115: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/115.jpg)
$('#detail').load('page.html');
![Page 116: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/116.jpg)
$('#detail').load('page.html #id');
![Page 117: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/117.jpg)
1. Ajax load the page
2. Search for the selector passed (#dizzy)
3. Squirt contents found into original selector
![Page 118: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/118.jpg)
$('#tabs a').click(function (event) { // this.pathname = 'ajax-load-detail.html' $('#detail').load(this.pathname); return false;});
![Page 119: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/119.jpg)
$('#tabs a').click(function (event) { $('#detail').load(this.pathname + ' ' + this.hash); return false;});
this.hash
![Page 120: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/120.jpg)
JSON
![Page 121: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/121.jpg)
{ screen_name : "@rem", height : "short", fingers : 5, brit : true}
JavaScript Object
![Page 122: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/122.jpg)
{ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true}
JSON
![Page 123: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/123.jpg)
JSONP WTF
![Page 124: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/124.jpg)
{ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true}
JSON+...
![Page 125: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/125.jpg)
callback({ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true});
JSON+Padding
![Page 126: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/126.jpg)
Getting other people's data
![Page 127: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/127.jpg)
$.getJSON
![Page 128: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/128.jpg)
Remember =?
![Page 129: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/129.jpg)
ajax/twitter.html
![Page 130: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/130.jpg)
$(document).ready(function () { $.getJSON('http://twitter.com/statuses/user_timeline/rem.json?callback=?', function (data) { $('#tweets').empty();
$.each(data, function (i, item) { $('#tweets').append('<li class="tweet">' + item.text + '</li>'); }); });});
![Page 131: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/131.jpg)
Giving users feedback
Loading...
![Page 132: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/132.jpg)
Ajax order
1. ajaxStart
2. ajaxSuccess (or ajaxError)
3. ajaxComplete
http://api.jquery.com/?s=ajax
![Page 133: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/133.jpg)
$('#status').ajaxStart(function () { $(this).fadeIn();}).ajaxComplete(function () { $(this).fadeOut();});
![Page 134: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/134.jpg)
Deferreds
![Page 135: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/135.jpg)
$.get('foo.html', function (html) { $('#latest').append(html);});
var jqXHR = $.get('foo.html');
jqXHR.done(function (html) { $('#latest').append(html);});
![Page 136: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/136.jpg)
$.ajax({ url: 'foo.json', dataType: 'json', success: function () { // this === xhr }, error: function () { }});
![Page 137: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/137.jpg)
$.ajax({ url: 'foo.json', dataType: 'json', context: document.body, success: function () { // this === body element }, error: function () { }});
![Page 138: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/138.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
jqXHR.then(success, fail);
![Page 139: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/139.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
jqXHR.then(success, fail);
// much later in the code
jqXHR.done(success2);
![Page 140: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/140.jpg)
jqXHR is a promise
![Page 141: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/141.jpg)
![Page 142: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/142.jpg)
![Page 143: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/143.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
// much later in the code
jqXHR.done(success);
![Page 144: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/144.jpg)
.done(ok) // success
.fail(fail) // error
.always(fn) // complete
.then(ok, fail)
![Page 145: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/145.jpg)
Plugins
![Page 146: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/146.jpg)
What’s a plugin?A plugin is nothing more than a custom jQuery method created to extend the functionality of the jQuery object
$(‘ul’).myPlugin()
![Page 147: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/147.jpg)
Plugin design in 6 steps
![Page 148: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/148.jpg)
Step 1:
create a private scope for $ alias
![Page 149: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/149.jpg)
<!DOCTYPE html><html><body><script src=”jquery.js”></script><script>(function ($) {
})(jQuery);</script></body></html>
![Page 150: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/150.jpg)
Step 2:
attach plugin to fn alias (aka prototype)
![Page 151: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/151.jpg)
<!DOCTYPE html><html><body><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) );}; // end of plugin})(jQuery);</script></body></html>
![Page 152: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/152.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) );}; // end of plugin})(jQuery);
$(‘p’).notHate();</script></body></html>
![Page 153: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/153.jpg)
Step 3:
add implicit iteration
![Page 154: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/154.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);
$(‘p’).notHate();</script></body></html>
![Page 155: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/155.jpg)
Step 4:
enable chaining
![Page 156: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/156.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);
$(‘p’).notHate().hide();</script></body></html>
![Page 157: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/157.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);
$(‘p’).notHate().hide();</script></body></html>
this == jQuery
![Page 158: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/158.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ‘love’) ); });}; // end of plugin})(jQuery);
$(‘p’).notHate().hide();</script></body></html>
this == DOM element
this == jQuery
![Page 159: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/159.jpg)
Step 5:
add default options
![Page 160: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/160.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate();</script></body></html>
![Page 161: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/161.jpg)
Step 6:
add custom options
![Page 162: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/162.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function () { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
![Page 163: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/163.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
![Page 164: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/164.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options);
return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ $.fn.notHate.defaults.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
![Page 165: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/165.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options);
return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ settings.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
http://jsbin.com/ifuga/edit
![Page 166: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/166.jpg)
![Page 167: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/167.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options);
return this.each(function () { $(this).text( $(this).text().replace(/hate/g, ➥ settings.text) ); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
![Page 168: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/168.jpg)
<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src=”jquery.js”></script><script>(function ($) {$.fn.notHate = function (options) { var settings = $.extend({}, ➥ $.fn.notHate.defaults, options);
return this.text(function (i, text) { return text.replace(/hate/g, ➥ settings.text); });}; // end of plugin$.fn.notHate.defaults = {text:‘love’};})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});</script></body></html>
![Page 169: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/169.jpg)
Poorly designed plugins
![Page 170: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/170.jpg)
$.fn.myplugin = function () { var me = $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); });
return me;};
![Page 171: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/171.jpg)
$.fn.myplugin = function () { var me = $(this).each(fn);
return me;};
![Page 172: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/172.jpg)
$.fn.myplugin = function () { return $(this).each(fn);};
![Page 173: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/173.jpg)
$.fn.myplugin = function () { return $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 174: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/174.jpg)
$.fn.myplugin = function () { return $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 175: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/175.jpg)
$.fn.myplugin = function () { return this.each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 176: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/176.jpg)
$.fn.myplugin = function () { return this.each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 177: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/177.jpg)
$.fn.myplugin = function () { return this.each(function() { $(this).bind('someEvent', function () { // does something }); });};
![Page 178: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/178.jpg)
$.fn.myplugin = function () { return this.each(function() { $(this).bind('someEvent', function () { // does something }); });};
![Page 179: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/179.jpg)
$.fn.myplugin = function () { return this.bind('someEvent', function () { // does something });};
![Page 180: Yearning jQuery - O'Reilly Mediaassets.en.oreilly.com/1/event/61/Learning jQuery Paper.pdf · 1. Build without jQuery. 2. Design the start and end of your effects without jQuery](https://reader031.vdocuments.mx/reader031/viewer/2022020121/5b98144709d3f2fd558b7804/html5/thumbnails/180.jpg)
(function ($) { $.fn.myplugin = function () { return this.bind('someEvent', function () { // does something }); };})(jQuery);