![Page 1: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/1.jpg)
![Page 2: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/2.jpg)
a bit more lots
^
![Page 3: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/3.jpg)
I'm Remy.
Who uses jQuery.
![Page 4: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/4.jpg)
I'm Remy.
Who uses jQuery?
![Page 5: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/5.jpg)
• Who & Why
• Get going
• What's new
• Oldies but goodies
• Dev patterns
![Page 6: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/6.jpg)
WARNING!A LOT OF CODE AHEAD.
![Page 7: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/7.jpg)
Who's using jQuery?
![Page 8: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/8.jpg)
![Page 9: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/9.jpg)
Who's using jQuery?reddit.com
espn.com
ibm.com
boxee.tv
bit.ly
tv.com
dell.com
twitter.com
twitpic.com
whitehouse.gov
microsoft.com
amazon.com
netflix.com
bing.com
monster.com
overstock.com
time.com
capitalone.comstackoverflow.com
wordpress.com
w3.org
http://trends.builtwith.com/javascript/jquery
![Page 10: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/10.jpg)
Why use jQuery
• Simplifies and speeds up web development
• Avoid cross-browser headaches
• Large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms
• Accessible to both coder and designer
![Page 11: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/11.jpg)
Why use jQuery
• Simplifies and speeds up web development
• Avoid cross-browser headaches
• Large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms
• Accessible to both coder and designer
![Page 12: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/12.jpg)
Installation
![Page 13: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/13.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 14: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/14.jpg)
CDN FTW
![Page 15: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/15.jpg)
<html><head> <styles> <!-- make me beautiful --> </styles></head><body> <content> <!-- make me learned --> </content> <behaviour> <!-- ooo, matron --> </behaviour></body></html>
![Page 16: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/16.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 17: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/17.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 18: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/18.jpg)
The quick start guide
![Page 19: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/19.jpg)
DOM Scriptingvar 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 20: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/20.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 21: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/21.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
jQuery function
![Page 22: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/22.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
jQuery function
CSS expression
![Page 23: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/23.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
jQuery function
CSS expression
jQuery method
![Page 24: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/24.jpg)
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 25: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/25.jpg)
API features1. Events: click,
mouseover, load, hover, keydown
2. Ajax: JSON, post, get, events, roll your own
3. Effects: slide, fade, show/hide, roll your own
4. DOM navigation: children, parent, find, filter
![Page 26: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/26.jpg)
API features1. Events: click,
mouseover, load, hover, keydown
2. Ajax: JSON, post, get, events, roll your own
3. Effects: slide, fade, show/hide, roll your own
4. DOM navigation: children, parent, find, filter
![Page 27: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/27.jpg)
API features1. Events: click,
mouseover, load, hover, keydown
2. Ajax: JSON, post, get, events, roll your own
3. Effects: slide, fade, show/hide, roll your own
4. DOM navigation: children, parent, find, filter
![Page 28: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/28.jpg)
API features1. Events: click,
mouseover, load, hover, keydown
2. Ajax: JSON, post, get, events, roll your own
3. Effects: slide, fade, show/hide, roll your own
4. DOM navigation: children, parent, find, filter
![Page 29: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/29.jpg)
API features1. Events: click,
mouseover, load, hover, keydown
2. Ajax: JSON, post, get, events, roll your own
3. Effects: slide, fade, show/hide, roll your own
4. DOM navigation: children, parent, find, filter
and a whole lot more!
![Page 30: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/30.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 31: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/31.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 32: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/32.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 33: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/33.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 34: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/34.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 35: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/35.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 36: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/36.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 37: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/37.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 38: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/38.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 39: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/39.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 40: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/40.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 41: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/41.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 42: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/42.jpg)
$('div').click(function () {
alert('you clicked me');
$(this).fadeOut();
return false;
}).fadeIn();
![Page 43: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/43.jpg)
1.4.2The sexy bits.
![Page 44: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/44.jpg)
Attributes in $
![Page 45: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/45.jpg)
$('<a id="printlink">Print this
page</a>').click(function () {
window.print();
return false;
});
![Page 46: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/46.jpg)
$('<a/>')
.attr('id', 'printlink')
.text('Print this page')
.click(function () {
window.print();
return false;
});
![Page 47: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/47.jpg)
$('<a/>', {
id: 'printlink',
text: 'Print this page',
click: function () {
window.print();
return false;
}
});
![Page 48: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/48.jpg)
Bulk binding
![Page 49: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/49.jpg)
$('a')
.focus(updateDisplay)
.keydown(updateDisplay)
.blur(somethingElse);
![Page 50: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/50.jpg)
$('a').bind({
focus: updateDisplay,
keydown: updateDisplay,
blur: somethingElse
});
![Page 51: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/51.jpg)
$('a').bind({
'keydown focus':
updateDisplay,
blur: somethingElse
});
![Page 52: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/52.jpg)
callback for setters
![Page 53: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/53.jpg)
• css
• attr
• val
• text
• html
• addClass
• toggleClass
• removeClass
• after
• before
• append
• prepend
• wrap
• wrapAll
• wrapInner
• replaceWith
![Page 54: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/54.jpg)
$('div').each(function () { $(this).html( $(this).html().replace(/foo/, 'bar') );});
![Page 55: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/55.jpg)
$('div').each(function () { $(this).html( $(this).html().replace(/foo/, 'bar') );});
$('div').html(function (i, html) { return html.replace(/foo/, 'bar');});
![Page 56: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/56.jpg)
$('input').attr('value', function (i, attr) { return attr + i;});
<input type="text" value="remy" /><input type="text" value="bruce" /><input type="text" value="andy" /><input type="text" value="ribot" />
![Page 57: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/57.jpg)
$('input').attr('value', function (i, attr) { return attr + i;});
<input type="text" value="remy0" /><input type="text" value="bruce1" /><input type="text" value="andy2" /><input type="text" value="ribot3" />
![Page 58: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/58.jpg)
$('li').addClass(function () { return 'who-' + $(this).find('a').text();});
<li><a href="#remy">Remy</a></li>
<li><a href="#bruce">Bruce</a></li>
<li><a href="#andy">Andy</a></li>
<li><a href="#ribot">Ribot</a></li>
![Page 59: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/59.jpg)
$('li').addClass(function () { return 'who-' + $(this).find('a').text();});
<li class="who-Remy"><a href="#remy">Remy</a></li>
<li class="who-Bruce"><a href="#bruce">Bruce</a></li>
<li class="who-Andy"><a href="#andy">Andy</a></li>
<li class="who-Ribot"><a href="#ribot">Ribot</a></li>
![Page 60: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/60.jpg)
$('*').css('backgroundColor', function (i, css) {
css = css.replace(/[^\d,]/g, '').split(',');
return 'rgb(' + $.map(css, function (i) {
return 255 - i;
}).join(',') + ')';
});
![Page 61: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/61.jpg)
![Page 62: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/62.jpg)
![Page 63: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/63.jpg)
$('*').css('backgroundColor', function (i, css) {
css = css.replace(/[^\d,]/g, '').split(',');
return 'rgb(' + $.map(css, function (i) {
return 255 - i;
}).join(',') + ')';
});
![Page 64: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/64.jpg)
jQuery.parseJSON
![Page 65: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/65.jpg)
Segue: .live
![Page 66: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/66.jpg)
Problem
![Page 67: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/67.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 68: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/68.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 69: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/69.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 70: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/70.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 71: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/71.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 72: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/72.jpg)
Solution: event delegation
![Page 73: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/73.jpg)
$('p').live('click', fn);
<p>Ninja</p><p>Dizzy</p><script src="jquery.js"></script><script>$('p').live('click', function () { $(this).after('<p>' + $(this).text() + ' clicked</p>'); });</script>
![Page 74: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/74.jpg)
$('p').live('click', fn);
<p>Ninja</p><p>Dizzy</p><script src="jquery.js"></script><script>$('p').live('click', function () { $(this).after('<p>' + $(this).text() + ' clicked</p>'); });</script>
![Page 75: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/75.jpg)
$('p').live('click', fn);
<p>Ninja</p><p>Dizzy</p><script src="jquery.js"></script><script>$('p').live('click', function () { $(this).after('<p>' + $(this).text() + ' clicked</p>'); });</script>
![Page 76: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/76.jpg)
$('p').live('click', fn);
<p>Ninja</p><p>Dizzy</p><script src="jquery.js"></script><script>$('p').live('click', function () { $(this).after('<p>' + $(this).text() + ' clicked</p>'); });</script>
![Page 77: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/77.jpg)
$('p').live('click', fn);
<p>Ninja</p><p>Dizzy</p><script src="jquery.js"></script><script>$('p').live('click', function () { $(this).after('<p>' + $(this).text() + ' clicked</p>'); });</script>
![Page 78: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/78.jpg)
![Page 79: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/79.jpg)
$('p').live('click',fn)
![Page 80: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/80.jpg)
1. jQuery registers 'click' for live events
$('p').live('click',fn)
![Page 81: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/81.jpg)
1. jQuery registers 'click' for live events
2. When click fires on the top level element, run the selector ('p')
$('p').live('click',fn)
![Page 82: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/82.jpg)
1. jQuery registers 'click' for live events
2. When click fires on the top level element, run the selector ('p')
3. If the $(event.target).is(selector) then run handler
$('p').live('click',fn)
![Page 83: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/83.jpg)
live events
![Page 84: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/84.jpg)
• submit
• change
• focus (via "focusin")
• blur (via "focusout")
Now Full Coverage
![Page 85: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/85.jpg)
focusout
"This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports events bubbling).
![Page 86: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/86.jpg)
delegate
![Page 87: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/87.jpg)
$('root').delegate(selector, event, fn);
![Page 88: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/88.jpg)
$('div').delegate('a', 'click', fn);
![Page 89: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/89.jpg)
$('div').delegate('a', 'click', fn);
div handles the event delegation
![Page 90: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/90.jpg)
$('div').delegate('a', 'click', fn);
watching for when 'a' elements are -
![Page 91: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/91.jpg)
$('div').delegate('a', 'click', fn);
- clicked.
![Page 92: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/92.jpg)
$('div').delegate('a', 'click', fn);
running the event handler when that
happens
![Page 93: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/93.jpg)
.live is slow(er)
![Page 94: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/94.jpg)
$('div').live('click', doStuff);
![Page 95: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/95.jpg)
$('div').live('click', doStuff);
wasteful selection of 'div's
![Page 96: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/96.jpg)
$('div').live('click', doStuff);
Better done using delegate
![Page 97: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/97.jpg)
$(document).delegate( 'div', 'click', doStuff);
![Page 98: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/98.jpg)
$.root = $(document);$.root.delegate( 'div', 'click', doStuff);
Hat tip: Cory Hart
![Page 99: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/99.jpg)
$.proxy
![Page 100: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/100.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
![Page 101: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/101.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
user.test();
![Page 102: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/102.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
user.test();
![Page 103: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/103.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
// user.test();$('a').click(user.test);
![Page 104: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/104.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
// user.test();$('a').click(user.test);
Fail :(
![Page 105: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/105.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
// user.test();$('a').click(user.test);
Fail :(
![Page 106: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/106.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
$('a').click( $.proxy(user.test, user));
![Page 107: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/107.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
$('a').click( $.proxy(user.test, user));
![Page 108: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/108.jpg)
var user = { name: "rem", test: function () { alert(this.name); }};
$('a').click( $.proxy(user.test, user));
![Page 109: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/109.jpg)
What about that this?
![Page 110: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/110.jpg)
var user = { name: "rem", test: function () {
alert(this.name); }};
$('a').click( $.proxy(user.test, user));
![Page 111: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/111.jpg)
var user = { name: "rem", test: function (event) { alert(event.currentTarget); alert(this.name); }};
$('a').click( $.proxy(user.test, user));
![Page 112: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/112.jpg)
Per property easing
![Page 113: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/113.jpg)
$('#ball').animate({ top: 500, left: 200,}, 2000, 'easeOutBounce');
http://gsgd.co.uk/sandbox/jquery/easing/
![Page 114: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/114.jpg)
$('#ball').animate({ top: [500, 'easingOutBounce'], left: 500}, 2000);
![Page 115: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/115.jpg)
$('#ball').animate({ top: [500, 'easingOutBounce'], left: 500}, 2000);
![Page 116: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/116.jpg)
delay
![Page 117: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/117.jpg)
$('#ball') .animate({ left: 400, }, 200) .animate({ top: 400, }, 200) .animate({ left: 50, }, 200) .animate({ top: 50, }, 200);
![Page 118: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/118.jpg)
$('#ball') .animate({ left: 250, }, 200) .delay(1000) .animate({ top: 250, }, 200) .delay(1000) .animate({ left: 50, }, 200) .delay(1000) .animate({ top: 50,
![Page 119: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/119.jpg)
What's not new
![Page 120: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/120.jpg)
$('div').length
![Page 121: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/121.jpg)
$('remy').length
![Page 122: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/122.jpg)
$.fn.doStuff = function () { return this.each(function () { // do...stuff });
};
![Page 123: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/123.jpg)
$.fn.doStuff = function () { return this.length ? this.each(function () { // do...stuff }) : this;};
![Page 124: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/124.jpg)
$.fn.doStuff = function () { return this.length ? this.each(function () { // do...stuff }) : this;};
![Page 125: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/125.jpg)
$.fn.doStuff = function () { return this.length ? this.each(function () { // do...stuff }) : this;};
![Page 126: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/126.jpg)
$.fx.off = true
![Page 127: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/127.jpg)
Ajax events
Loading...
![Page 128: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/128.jpg)
![Page 129: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/129.jpg)
Ajax events
1. ajaxStart
2. ajaxSuccess (or ajaxError)
3. ajaxComplete
![Page 130: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/130.jpg)
$('#status').ajaxStart(function () { $(this).fadeIn();}).ajaxComplete(function () { $(this).fadeOut();});
![Page 131: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/131.jpg)
$.extend
![Page 132: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/132.jpg)
s = $.extend({}, defaults, options);
size:'M'size:'L'colour:'blue'
![Page 133: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/133.jpg)
s = $.extend({}, defaults, options);
size:'M'size:'L'colour:'blue'
![Page 134: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/134.jpg)
size:'M'size:'L'colour:'blue'
size:'M'colour:'blue'
s = $.extend({}, defaults, options);
![Page 135: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/135.jpg)
size:'M'size:'L'colour:'blue'
size:'M'colour:'blue'
s = $.extend({}, defaults, options);
's' is the result of {} extended
![Page 136: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/136.jpg)
s = $.extend(defaults, options);
size:'M'size:'L'colour:'blue'
![Page 137: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/137.jpg)
s = $.extend(defaults, options);
size:'M'size:'M'colour:'blue'
![Page 138: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/138.jpg)
s = $.extend(defaults, options);
size:'M'size:'M'colour:'blue'
s === defaults
![Page 139: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/139.jpg)
var linkTemplate = { mouseover: function () { // default mouse over stuff }, focus: function () { // default focus } click: function () { // do default click stuff }};
![Page 140: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/140.jpg)
$('<a/>', $.extend({},linkTemplate,{ click: function () { // do custom click }}));
![Page 141: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/141.jpg)
$('<a/>', $.extend({},linkTemplate,{ click: function () { // do custom click }}));
![Page 142: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/142.jpg)
$('<a/>', $.extend({},linkTemplate,{ click: function () { // do custom click }}));
![Page 143: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/143.jpg)
$('<a/>', $.extend({},linkTemplate,{ click: function () { // do custom click }}));
![Page 144: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/144.jpg)
$('<a/>', $.extend({},linkTemplate,{ click: function () { // do custom click }}));
![Page 145: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/145.jpg)
7 deadly sins
![Page 146: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/146.jpg)
.live or .delegate?
1
![Page 147: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/147.jpg)
live vs. delegate• Wasteful selection
• Doesn't chain
• Doesn't work with DOM elements
• No wasteful selection
• Less distance for event to bubble
• Chains
![Page 148: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/148.jpg)
Use .delegate
![Page 149: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/149.jpg)
$('div').get(0)
2
![Page 150: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/150.jpg)
// Get the Nth element in the matched element set OR// Get the whole matched element set as a clean arrayget: function( num ) { return num == null ?
// Return a 'clean' array this.toArray() :
// Return just the object ( num < 0 ? this.slice(num)[ 0 ] : this[ num ] );},
![Page 151: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/151.jpg)
// Get the Nth element in the matched element set OR// Get the whole matched element set as a clean arrayget: function( num ) { return num == null ?
// Return a 'clean' array this.toArray() :
// Return just the object ( num < 0 ? this.slice(num)[ 0 ] : this[ num ] );},
![Page 152: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/152.jpg)
$('div')[0]
![Page 153: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/153.jpg)
$('div').click(fn)
3
![Page 154: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/154.jpg)
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error").split(" "), function( i, name ) {
// Handle event binding jQuery.fn[ name ] = function( fn ) { return fn ? this.bind( name, fn ) : this.trigger( name ); };
if ( jQuery.attrFn ) { jQuery.attrFn[ name ] = true; }});
![Page 155: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/155.jpg)
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + "change select submit keydown keypress keyup error").split(" "), function( i, name ) {
// Handle event binding jQuery.fn[ name ] = function( fn ) { return fn ? this.bind( name, fn ) : this.trigger( name ); };
if ( jQuery.attrFn ) { jQuery.attrFn[ name ] = true; }});
![Page 156: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/156.jpg)
$('div').bind('click',fn)
![Page 157: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/157.jpg)
$(this).data('key')
4
![Page 158: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/158.jpg)
$(this).data({ key1: 'foo', key2: 'bar'});
![Page 159: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/159.jpg)
var obj = $(this).data();obj.key1; // 'foo'
![Page 160: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/160.jpg)
data: function( key, value ) { if ( typeof key === "undefined" && this.length ) { return jQuery.data( this[0] ); } else if ( typeof key === "object" ) { return this.each(function() { jQuery.data( this, key ); }); }
![Page 161: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/161.jpg)
data: function( key, value ) { if ( typeof key === "undefined" && this.length ) { return jQuery.data( this[0] ); } else if ( typeof key === "object" ) { return this.each(function() { jQuery.data( this, key ); }); }
![Page 162: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/162.jpg)
$.data(this, 'key')
![Page 163: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/163.jpg)
var obj = $.data(this);obj.key1; // "foo"
![Page 164: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/164.jpg)
5CSS belongs in
style sheets.
![Page 165: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/165.jpg)
$('.foo').css({ position: 'absolute', top: 0, left: '50%', background: '#c00'});
![Page 166: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/166.jpg)
.foo { position: absolute; top: 0; left: 50%; background: #c00;}
![Page 167: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/167.jpg)
$('div').addClass('foo');
![Page 168: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/168.jpg)
$('div', '#foo')
6
![Page 169: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/169.jpg)
// HANDLE: $(expr, context)// (which is just equivalent to: $(context).find(expr)} else { return jQuery( context ).find( selector );}
![Page 170: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/170.jpg)
$('#foo').find('div')
![Page 171: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/171.jpg)
Avoid the DOM
7
![Page 172: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/172.jpg)
The DOM is slow, reduce when you
touch it.
![Page 173: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/173.jpg)
$.each(tweets, function (tweet) { $('#tweets').append(tweet);});
![Page 174: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/174.jpg)
var html = [];$.each(tweets, function (tweet) { html.push(tweet);});$('#tweets').append(html.join(''));
![Page 175: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/175.jpg)
var html = [];$.each(tweets, function (tweet) { html.push(tweet);});$('#tweets').append(html.join(''));
![Page 176: reWhy use jQuery • Simplifies and speeds up web development • Avoid cross-browser headaches • Large pool of plugins • Large and active community • Tested on 50 browsers,](https://reader035.vdocuments.site/reader035/viewer/2022070917/5fb784a810fd601e3f114a80/html5/thumbnails/176.jpg)
@rem
slides: http://j.mp/jquery-rs
You've now been jQuerified!
Any questions?