jquery for designer
TRANSCRIPT
![Page 1: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/1.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 1/149
![Page 2: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/2.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 2/149
![Page 3: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/3.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 3/149
![Page 4: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/4.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 4/149
![Page 5: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/5.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 5/149
![Page 6: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/6.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 6/149
![Page 7: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/7.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 7/149
Help!
![Page 8: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/8.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 8/149
APIs
docs.jquery.com
api.jquery.comvisualjquery.com
Blogs, tutorials, screencasts,
plugins, development sprints
forum.jquery.com
IRC channelirc.freenode.net/#jquery
Twitter@jquery
@jquerysites
@jqueryui
Help!
![Page 9: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/9.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 9/149
APIs
docs.jquery.com
api.jquery.comvisualjquery.com
Blogs, tutorials, screencasts,
plugins, development sprints
forum.jquery.com
IRC channelirc.freenode.net/#jquery
Twitter@jquery
@jquerysites
@jqueryui
Help!
![Page 10: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/10.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 10/149
![Page 11: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/11.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 11/149
![Page 12: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/12.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 12/149
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 13: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/13.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 13/149
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 14: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/14.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 14/149
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 15: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/15.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 15/149
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 16: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/16.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 16/149
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 17: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/17.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 17/149
jQuery simplifies
$('table tr:nth-child(odd)').addClass('odd');
![Page 18: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/18.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 18/149
![Page 19: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/19.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 19/149
• Firefox: Firebug
•Safari & Chrome: Web Inspector
• Opera: DragonFly
• IE: Web Developer Toolbar
![Page 20: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/20.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 20/149
http://getfirebug.com
http://firequery.binaryage.com
![Page 21: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/21.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 21/149
![Page 22: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/22.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 22/149
![Page 23: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/23.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 23/149
![Page 24: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/24.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 24/149
$.fn.jquery
T i p
(little 'q')
![Page 25: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/25.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 25/149
No fireQuery?
jQuery on every site?
![Page 26: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/26.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 26/149
No fireQuery?
jQuery on every site?
No Problem.
![Page 27: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/27.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 27/149
http://bit.ly/9JAcCj
![Page 28: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/28.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 28/149
Where does it all go?
![Page 29: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/29.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 29/149
• jQuery first
• Then jQuery plugins
• Then your code
![Page 30: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/30.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 30/149
<html>
<head>
<styles>
<!-- make me beautiful --></styles>
</head>
<body>
<content>
<!-- make me learned -->
</content>
<behaviour><!-- ooo, matron -->
</behaviour>
</body>
</html>
![Page 31: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/31.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 31/149
<html>
<head>
<styles>
<!-- make me beautiful --></styles>
</head>
<body>
<content>
<!-- make me learned -->
</content>
<behaviour><!-- ooo, matron -->
</behaviour>
</body>
</html>
Styles firstlet's the page
render
withoutscripts
blocking
![Page 32: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/32.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 32/149
<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 asearly as
possible
![Page 33: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/33.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 33/149
<html>
<head>
<styles>
<!-- make me beautiful --></styles>
</head>
<body>
<content>
<!-- make me learned -->
</content>
<behaviour><!-- ooo, matron -->
</behaviour>
</body>
</html>
Finally, addyour
behaviour,
the jQueryand sexy
magic jazz.
![Page 34: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/34.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 34/149
$(document).ready(function () {
// < YOU >
});
![Page 35: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/35.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 35/149
$(document).ready(function () {
// < YOU >
});
![Page 36: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/36.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 36/149
$(function () {
// < YOU >
});
<!DOCTYPE ht l>
![Page 37: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/37.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 37/149
<!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>
<!DOCTYPE ht l>
![Page 38: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/38.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 38/149
<!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 () {
$('p').doStuff();});</script></body>
</html>
![Page 39: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/39.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 39/149
Sample Selectors
![Page 40: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/40.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 40/149
Selectors silently fail
$('remy')
![Page 41: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/41.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 41/149
Selectors silently fail
$('remy').length
![Page 42: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/42.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 42/149
$(‘#nav li.contact’)
![Page 43: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/43.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 43/149
$(‘#nav li.contact’)
$(‘:visible’)
![Page 44: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/44.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 44/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
![Page 45: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/45.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 45/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
![Page 46: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/46.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 46/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
jQuery lets me
query based on
DOM attributes
![Page 47: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/47.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 47/149
![Page 48: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/48.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 48/149
![Page 49: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/49.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 49/149
![Page 50: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/50.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 50/149
![Page 51: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/51.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 51/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
jQuery lets me
query based on
DOM attributes
![Page 52: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/52.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 52/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
"contains", also
have ^= and $=
![Page 53: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/53.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 53/149
$('a[href$="pdf"]').addClass('pdf');
![Page 54: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/54.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 54/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
"contains", also
have ^= and $=
![Page 55: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/55.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 55/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
$(‘a:first[hash*=”bio”]’)
![Page 56: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/56.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 56/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
$(‘a:first[hash*=”bio”]’)
$(‘.header, .footer’)
![Page 57: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/57.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 57/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”bio”]’)
$(‘a:first[hash*=”bio”]’)
$(‘.header, .footer’)
$(‘.header, .footer’, ‘#main’)
#
Tip
![Page 58: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/58.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 58/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
$(‘a[title]’)
$(‘a[title][hash*=”foo”]’)
$(‘a:first[hash*=”foo”]’)
$(‘.header, .footer’)
$(‘.header, .footer’, ‘#main’)
Better written as
$('#main').find('.header,.footer');
T i p
![Page 59: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/59.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 59/149
![Page 60: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/60.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 60/149
Filtering narrows
![Page 61: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/61.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 61/149
![Page 62: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/62.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 62/149
![Page 63: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/63.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 63/149
![Page 64: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/64.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 64/149
![Page 65: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/65.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 65/149
![Page 66: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/66.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 66/149
![Page 67: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/67.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 67/149
$('a')// 5 anchors
$('a').filter('[title]')// 5, then down to 3
![Page 68: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/68.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 68/149
Finding changes
![Page 69: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/69.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 69/149
![Page 70: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/70.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 70/149
![Page 71: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/71.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 71/149
![Page 72: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/72.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 72/149
![Page 73: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/73.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 73/149
![Page 74: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/74.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 74/149
![Page 75: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/75.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 75/149
$('div')// 5 divs
$('div').find('h2')// 4 headings
Effects
![Page 76: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/76.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 76/149
Eff ects
![Page 77: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/77.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 77/149
fadeIn/out/to
![Page 78: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/78.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 78/149
![Page 79: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/79.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 79/149
![Page 80: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/80.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 80/149
FX todo
opacity: 1
opacity: 0
opacity: 1
opacity: 0
opacity: 1
1
2
3
4
5
![Page 81: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/81.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 81/149
![Page 82: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/82.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 82/149
$('div.picture a').hover(function () {
$(this).find('strong').fadeIn(1000);
}, function () {
$(this).find('strong').fadeOut(1000);
});
![Page 83: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/83.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 83/149
$('div.picture a').hover(function () {
$(this).find('strong').stop().fadeTo(1000, 1);
}, function () {
$(this).find('strong').stop().fadeTo(1000, 0);
});
![Page 84: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/84.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 84/149
" l " 6
![Page 85: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/85.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 85/149
$('a').stop().fadeTo(1000, 1);
"slow" = 600ms
"normal" = 400ms"fast" = 200ms
![Page 86: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/86.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 86/149
animate
![Page 87: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/87.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 87/149
$('#ball').animate({top: 500,left: '200px',
height: '10em',width: '10em',opacity: 0.5
}, 2000);
Animate any numeric value
iTip
![Page 88: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/88.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 88/149
$('#ball').animate({top: '+=500',left: '+=200px',
height: '-=20'}, 500);
Relative T i p
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
![Page 89: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/89.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 89/149
$('#ball').animate({
top: 500,left: '200px',height: '10em',width: '10em',opacity: 0.5,
color: '#ff0'}, 2000);
For colours, add jQuery UI
![Page 90: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/90.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 90/149
$('#ball').addClass('big');
![Page 91: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/91.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 91/149
$('#ball').addClass('big', 500);
http://jsbin.com/ijidi
![Page 92: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/92.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 92/149
$('#ball').addClass('big', 500);
http://jsbin.com/ijidi
![Page 93: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/93.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 93/149
chained
![Page 94: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/94.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 94/149
$('#ball').animate({
top: 250,left: '200px'
}, 2000)
.animate({height: '20em',width: '20em'
}, 2000)
.animate({opacity: 0.5
}, 2000);
![Page 95: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/95.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 95/149
$('#ball').animate({
top: 250,left: '200px'
}, 2000)
.delay(500).animate({height: '20em',width: '20em'
}, 2000).delay(500).animate({opacity: 0.5,
![Page 96: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/96.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 96/149
easing
li (
![Page 97: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/97.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 97/149
linear :-(
O tB D
![Page 98: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/98.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 98/149
easeOutBounce :-D
![Page 99: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/99.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 99/149
http://gsgd.co.uk/sandbox/jquery/easing/
http://bit.ly/cKstRK
$('#ball') animate({
![Page 100: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/100.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 100/149
$( #ball ).animate({top: 500,left: 200,
}, 2000,
'easeOutBounce');
![Page 101: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/101.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 101/149
Per property easing
$('#ball').animate({
![Page 102: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/102.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 102/149
$( #ball ).animate({top: [500, 'easingOutBounce'],
left: 500}, 2000);
![Page 103: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/103.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 103/149
callbacksdo something when it's done
O f d d t
![Page 104: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/104.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 104/149
$('div').fadeOut(function () {
$(this).remove();
});
Once faded out...
Animate something else...
![Page 105: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/105.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 105/149
g$('#box1').animate({
top: 200,
left: 200
}, 2000, function () {
$('#box2').animate({
height: 500,
width: 500}, 200);
});
Tipdi bl ff
![Page 106: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/106.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 106/149
T i p
$.fx.off = true;
disable eff ects
![Page 107: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/107.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 107/149
![Page 108: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/108.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 108/149
No brainer Ajax
![Page 109: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/109.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 109/149
![Page 110: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/110.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 110/149
![Page 111: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/111.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 111/149
$('#detail').load('page.html');
![Page 112: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/112.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 112/149
$('#detail').load('page.html #id');
this hash
![Page 113: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/113.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 113/149
$('#tabs a').click(function () {$('#detail').load('cats.html ' + this.hash);return false;
});
this.hashthe secret sauce
this hash
![Page 114: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/114.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 114/149
$('#tabs a').click(function () {$('#detail').load('cats.html #dizzy');return false;
});
this.hashthe secret sauce
this hash
![Page 115: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/115.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 115/149
$('#tabs a').click(function () {$('#detail').load('cats.html ' + this.hash);return false;
});
this.hashthe secret sauce
![Page 116: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/116.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 116/149
JSON
JavaScript Object
![Page 117: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/117.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 117/149
{screen_name : "@rem",height : "short",fingers : 5,brit : true
}
JavaScript Object
JSON
![Page 118: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/118.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 118/149
{ "screen_name": "@rem", "height": "short", "fingers": 5, "brit": true}
JSON
![Page 119: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/119.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 119/149
JSONP WTF?
![Page 120: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/120.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 120/149
JSONP WTF?
JSON+
![Page 121: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/121.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 121/149
{"screen_name": "@rem","height": "short","fingers": 5,"brit": true}
JSON+...
JSON+Padding
![Page 122: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/122.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 122/149
callback({"screen_name": "@rem","height": "short","fingers": 5,"brit": true});
JSON+Padding
![Page 123: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/123.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 123/149
Getting other
people's data
![Page 124: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/124.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 124/149
$.getJSON
Tip
![Page 125: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/125.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 125/149
Remember
callback=?
T i p
![Page 126: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/126.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 126/149
![Page 127: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/127.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 127/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
![Page 128: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/128.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 128/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
![Page 129: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/129.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 129/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
![Page 130: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/130.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 130/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
![Page 131: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/131.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 131/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
![Page 132: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/132.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 132/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {
$('#tweets').append('<li>' + item.text + '</li>');});
});
return false;});
![Page 133: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/133.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 133/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets).empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
![Page 134: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/134.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 134/149
var twitterURL = 'http://search.twitter.com/search.json?callback=?&q=';
$('a').click(function () {$.getJSON(twitterURL + $(this).text(), function (data) {
$('#tweets').empty();$.each(data.results, function (i, item) {$('#tweets').append('<li>' + item.text + '</li>');
});});
return false;});
Tip Cancelling
![Page 135: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/135.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 135/149
$('a').click(function () {// do some Ajax magicreturn false;
});
T i p
browser actions
Tip Cancelling
![Page 136: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/136.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 136/149
$('a').click(function () {// do some Ajax magicreturn false;
});
T i p
browser actions
Tip Cancelling
![Page 137: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/137.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 137/149
$('a').click(function (event) {// do some Ajax magicreturn false;
});
T i p
browser actions
Tip Cancelling
![Page 138: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/138.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 138/149
$('a').click(function (event) {// do some Ajax magic
});
T i p
browser actions
Tip Cancelling
![Page 139: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/139.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 139/149
$('a').click(function (event) {event.preventDefault()// do some Ajax magic
});
T i p
browser actions
![Page 140: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/140.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 140/149
![Page 141: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/141.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 141/149
Ajax events
![Page 142: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/142.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 142/149
Ajax events
1. ajaxStart
2. ajaxSuccess (or ajaxError)
3. ajaxComplete
![Page 143: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/143.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 143/149
$('#status').ajaxStart(function () {$(this).fadeIn();
}).ajaxComplete(function () {$(this).fadeOut();
});
Note: this refers to the #status node
![Page 144: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/144.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 144/149
-webkit➽ jQuery
![Page 145: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/145.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 145/149
.shadow {display : block;z-index : 1;
iti b l t
![Page 146: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/146.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 146/149
position : absolute;bottom : 0;
right : -800px;left : auto;
width : 840px;height : 1000px;background-image : url(../img/shadow.png);background-repeat : no-repeat;
background-position : 0 100%;-webkit-animation-name : shadow;-webkit-animation-iteration-count : 1;-webkit-animation-timing-function : linear;-webkit-animation-duration : 20s;
-webkit-animation-delay : 5s;}
@-webkit-keyframes shadow {from { right : -800px; }to { right : 1900px } }
width : 840px;height : 1000px;background-image : url(../img/shadow.png);backgro nd repeat no repeat
![Page 147: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/147.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 147/149
background-repeat : no-repeat;background-position : 0 100%;-webkit-animation-name : shadow;-webkit-animation-iteration-count : 1;-webkit-animation-timing-function : linear;-webkit-animation-duration : 20s;
-webkit-animation-delay : 5s;}
@-webkit-keyframes shadow {
from { right : -800px; }to { right : 1900px } }
![Page 148: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/148.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 148/149
$('.shadow')
.css('backgroundImage',
'url(assets/img/new/unicorn.png)')
.delay(5000)
.animate({
right: 1900
}, 20 * 1000);});
![Page 149: JQuery for Designer](https://reader030.vdocuments.site/reader030/viewer/2022021214/577d2ea01a28ab4e1eaf925d/html5/thumbnails/149.jpg)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 149/149
@rem
remy@leftlogic com