jquery for designer
Post on 09-Apr-2018
218 Views
Preview:
TRANSCRIPT
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 1/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 2/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 3/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 4/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 5/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 6/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 7/149
Help!
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!
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!
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 10/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 11/149
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';
}}
}
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');
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');
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');
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');
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');
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 18/149
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 20/149
http://getfirebug.com
http://firequery.binaryage.com
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 21/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 22/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 23/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 24/149
$.fn.jquery
T i p
(little 'q')
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 25/149
No fireQuery?
jQuery on every site?
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 26/149
No fireQuery?
jQuery on every site?
No Problem.
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 27/149
http://bit.ly/9JAcCj
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 28/149
Where does it all go?
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 29/149
• jQuery first
• Then jQuery plugins
• Then your code
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>
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
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
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.
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 34/149
$(document).ready(function () {
// < YOU >
});
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 35/149
$(document).ready(function () {
// < YOU >
});
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 36/149
$(function () {
// < YOU >
});
<!DOCTYPE ht l>
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>
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>
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 39/149
Sample Selectors
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 40/149
Selectors silently fail
$('remy')
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 41/149
Selectors silently fail
$('remy').length
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 42/149
$(‘#nav li.contact’)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 43/149
$(‘#nav li.contact’)
$(‘:visible’)
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 44/149
$(‘#nav li.contact’)
$(‘:visible’)
$(‘:radio:enabled:checked’)
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]’)
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 47/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 48/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 49/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 50/149
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
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 $=
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 53/149
$('a[href$="pdf"]').addClass('pdf');
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 $=
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”]’)
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’)
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 59/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 60/149
Filtering narrows
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 61/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 62/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 63/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 64/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 65/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 66/149
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 68/149
Finding changes
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 69/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 70/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 71/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 72/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 73/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 74/149
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 76/149
Eff ects
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 77/149
fadeIn/out/to
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 78/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 79/149
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 81/149
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);
});
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);
});
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 84/149
" l " 6
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 86/149
animate
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
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 90/149
$('#ball').addClass('big');
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 91/149
$('#ball').addClass('big', 500);
http://jsbin.com/ijidi
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 92/149
$('#ball').addClass('big', 500);
http://jsbin.com/ijidi
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 93/149
chained
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);
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,
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 96/149
easing
li (
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 97/149
linear :-(
O tB D
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 98/149
easeOutBounce :-D
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({
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 100/149
$( #ball ).animate({top: 500,left: 200,
}, 2000,
'easeOutBounce');
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 101/149
Per property easing
$('#ball').animate({
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 102/149
$( #ball ).animate({top: [500, 'easingOutBounce'],
left: 500}, 2000);
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
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...
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 107/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 108/149
No brainer Ajax
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 109/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 110/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 111/149
$('#detail').load('page.html');
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 112/149
$('#detail').load('page.html #id');
this hash
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
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 116/149
JSON
JavaScript Object
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 119/149
JSONP WTF?
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 120/149
JSONP WTF?
JSON+
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 123/149
Getting other
people's data
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 124/149
$.getJSON
Tip
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 125/149
Remember
callback=?
T i p
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 126/149
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;});
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;});
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;});
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;});
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;});
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;});
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;});
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
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
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
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
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 140/149
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 141/149
Ajax events
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
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
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 144/149
-webkit➽ jQuery
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
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
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 } }
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);});
8/7/2019 JQuery for Designer
http://slidepdf.com/reader/full/jquery-for-designer 149/149
@rem
remy@leftlogic com
top related