Más contenido relacionado La actualidad más candente (20) Similar a Write Less Do More (20) Write Less Do More2. Overview
• Who, what and why of jQuery
• 5 core jQuery concepts
• Overview of jQuery API
• Building a plugin in 6 steps
• jQuery News
5. Who's using jQuery
reddit.com whitehouse.gov overstock.com
espn.com microsoft.com time.com
ibm.com amazon.com capitalone.com
stackoverflow.com netflix.com wordpress.com
boxee.tv bing.com dell.com
bit.ly monster.com twitter.com
twitpic.com tv.com w3.org
http://trends.builtwith.com/javascript/jquery
6. Who's using jQuery
reddit.com whitehouse.gov overstock.com
espn.com microsoft.com time.com
ibm.com amazon.com capitalone.com
stackoverflow.com
netflix.com wordpress.com
boxee.tv bing.com dell.com
bit.ly monster.com twitter.com
twitpic.com tv.com w3.org
http://trends.builtwith.com/javascript/jquery
7. What exactly is jQuery
jQuery is a JavaScript library!
• Dealing with the DOM changing, etc)
(e.g. selecting, creating, traversing,
• JavaScript Events
• Animations
• Ajax interactions
9. 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';
}
}
}
11. jQuery simpli es
jQuery function
jQuery('table tr:nth-child(odd)').addClass('odd');
12. jQuery simpli es
jQuery function
jQuery('table tr:nth-child(odd)').addClass('odd');
CSS expression
13. jQuery simpli es
jQuery function jQuery method
jQuery('table tr:nth-child(odd)').addClass('odd');
CSS expression
15. It really is the
Write less, do more
JavaScript library!
16. Why use jQuery
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated
with browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms
• For both coder and designer (we don't discriminate)
17. Why use jQuery
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated
with browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms
• For both coder and designer (we don't discriminate)
19. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
Twitter jquery-dev
@jquery Help! jquery-ui-en
@jquerysites jquery-ui-dev
@jqueryui jquery-a11y
IRC channel
irc.freenode.net/#jquery
20. APIs Blogs, tutorials, screencasts,
docs.jquery.com plugins, development sprints
api.jquery.com
visualjquery.com
Google Groups
jquery-en
Twitter jquery-dev
@jquery Help! jquery-ui-en
@jquerysites jquery-ui-dev
@jqueryui jquery-a11y
IRC channel
irc.freenode.net/#jquery
22. • CSS selectors & custom CSS expressions
• HTML
• DOM elements
• A function (shortcut for DOM ready)
27. • CSS selectors jQuery(‘:first’)
jQuery(‘div’) &
& custom CSS expressions
• HTML
jQuery(‘<li><a href=”#”>link</a></li>’)
• DOM elements
jQuery(document) or jQuery(document.createElement(‘a’))
• A function (shortcut for DOM ready)
jQuery(function(){}) =
jQuery(document).ready(function(){})
30. <!DOCTYPE html>
<html>
<body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery('ul');
</script>
</body>
</html>
31. <!DOCTYPE html>
<html>
<body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery('ul').attr('id', 'nav');
</script>
</body>
</html>
32. <!DOCTYPE html>
<html>
<body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery('#nav a');
</script>
</body>
</html>
33. <!DOCTYPE html>
<html>
<body>
<ul id="nav">
<li><a href=”/home”>home</a></li>
<li><a href=”/about”>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery('#nav a').each(function(){
jQuery(this).attr(‘href’,
➥ ‘/’ + jQuery(this).text());
});
</script>
</body>
</html>
36. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘<li>home</li>’);
jQuery(‘<li>about</li>’);
</script>
</body>
</html>
37. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘<li>home</li>’)
➥.wrapInner(‘<a/>’);
jQuery(‘<li>about</li>’)
➥.wrapInner(‘<a/>’);
</script>
</body>
</html>
38. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘<li>home</li>’)
➥.wrapInner(‘<a/>’).appendTo(‘#nav’);
jQuery(‘<li>about</li>’)
➥.wrapInner(‘<a/>’).appendTo(‘#nav’);
</script>
</body>
</html>
40. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘ul’).attr(‘id’, ‘nav’);
jQuery(‘#nav li’).addClass(‘item’);
jQuery(‘#nav a’).each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
41. <!DOCTYPE html>
<html>
1
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
1 jQuery(‘ul’).attr(‘id’, ‘nav’);
jQuery(‘#nav li’).addClass(‘item’);
jQuery(‘#nav a’).each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
42. <!DOCTYPE html>
<html>
1
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul> 2
<script src=”jquery.js”></script>
<script>
1 jQuery(‘ul’).attr(‘id’, ‘nav’);
2
jQuery(‘#nav li’).addClass(‘item’);
jQuery(‘#nav a’).each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
43. <!DOCTYPE html>
<html>
1
<body>
<ul id='nav'> 3
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul> 2
<script src=”jquery.js”></script>
<script>
1 jQuery(‘ul’).attr(‘id’, ‘nav’);
2
jQuery(‘#nav li’).addClass(‘item’);
jQuery(‘#nav a’).each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
3
</body>
</html>
44. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘ul’).attr(‘id’, ‘nav’);
jQuery(‘#nav li’).addClass(‘item’);
jQuery(‘#nav a’).each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
45. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘ul’)
.attr(‘id’, ‘nav’)
.find(‘li’)
.addClass(‘item’)
.find(‘a’)
.each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
47. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘ul’)
.attr(‘id’, ‘nav’)
.find(‘li’)
.addClass(‘item’)
.find(‘a’)
.each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
48. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”><a href=”/home”>home</a></li>
<li class=”item”><a href=”/about”>about</a></li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘ul’)
.attr(‘id’, ‘nav’)
.find(‘li’)
.addClass(‘item’)
.find(‘a’)
.each(function () {
jQuery(this).attr(‘href’, ‘/’+jQuery(this).text());
});
</script>
</body>
</html>
49. Review
• Knowing the jQuery parameter types
• Find something, do something
• Create something, do something
• Chaining & Operating
• Understanding Implicit Iteration
54. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘li’).addClass(‘item’);
</script>
</body>
</html>
55. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
jQuery(‘li’).addClass(‘item’);
</script>
</body>
</html>
56. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
$(‘li’).addClass(‘item’);
</script>
</body>
</html>
57. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
$(‘li’).addClass(‘item’);
</script>
</body>
</html>
58. <!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
$(document).ready(function () {
$(‘li’).addClass(‘item’);
});
</script>
</body>
</html>
59. <!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
$(document).ready(function () {
$(‘li’).addClass(‘item’);
});
</script>
</body>
</html>
60. <!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script src=”jquery.js”></script>
<script>
$(document).ready(function () {
$(‘li’).addClass(‘item’);
});
</script>
</body>
</html>
66. • Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
67. • Core jQuery()
• Selectors each()
size()
• Attributes eq()
get()
• Traversing index()
• Manipulation length
selector
• CSS context
• Events data()
removeData()
• Effects queue()
dequeue()
• Ajax jQuery.fn.extend()
• Utilities jQuery.extend()
jQuery.noConflict()
68. • Core jQuery()
• Selectors each()
size()
• Attributes eq()
get()
• Traversing index()
• Manipulation length
selector
• CSS context
• Events data()
removeData()
• Effects queue()
dequeue()
• Ajax jQuery.fn.extend()
• Utilities jQuery.extend()
jQuery.noConflict()
69. • Core <!DOCTYPE html>
• Selectors
<html>
<body>
• Attributes
<p>Element Node</p>
• Traversing
•
<script src="jquery.js">
Manipulation </script>
• CSS <script>
alert($('p').get(0).nodeName);
• Events </script>
• Effects </body>
• Ajax </html>
• Utilities http://jsbin.com/ibito/edit
70. • Core <!DOCTYPE html>
• Selectors
<html>
<body>
• Attributes
<p>Element Node</p>
• Traversing
•
<script src="jquery.js">
Manipulation </script>
• CSS <script>
alert($('p').get(0).nodeName);
• Events alert($('p')[0].nodeName);
</script>
• Effects
• Ajax </body>
</html>
• Utilities http://jsbin.com/idiyi/edit
71. • Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
72. • Core $(‘#nav li.contact’)
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
73. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
74. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
75. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
76. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS
• Events
• Effects
• Ajax
• Utilities
77. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS
$(‘a:first[hash*=”foo”]’)
• Events
• Effects
• Ajax
• Utilities
78. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS
$(‘a:first[hash*=”foo”]’)
• Events
$(‘.header, .footer’)
• Effects
• Ajax
• Utilities
79. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS
$(‘a:first[hash*=”foo”]’)
• Events
$(‘.header, .footer’)
• Effects
$(‘.header, .footer’, ‘#main’)
• Ajax
• Utilities
80. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS
$(‘a:first[hash*=”foo”]’)
• Events
$(‘.header, .footer’)
• Effects
$(‘.header, .footer’, ‘#main’)
• Ajax
http://codylindley.com/jqueryselectors
• Utilities
81. • Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
ry s elec tors
jQue $(‘a[title]’)
• Manipulation
ilen tly,
• fail s
$(‘a[title][hash*=”foo”]’)
CSS
SS d oes!
• Events just l ike C
$(‘a:first[hash*=”foo”]’)
$(‘.header, .footer’)
• Effects
$(‘.header, .footer’, ‘#main’)
• Ajax
http://codylindley.com/jqueryselectors
• Utilities
82. • Core attr()
•
removeAttr()
Selectors
• Attributes
addClass()
hasClass()
• Traversing toggleClass()
removeClass()
• Manipulation
val()
• CSS
• Events
• Effects
• Ajax
• Utilities
83. • Core attr()
•
removeAttr()
Selectors
• Attributes
addClass()
hasClass()
• Traversing toggleClass()
removeClass()
• Manipulation
val()
• CSS
• Events
• Effects
• Ajax
• Utilities
84. • Core <!DOCTYPE html><html><body>
• Selectors <input type="text" value="search">
• Attributes <script src="jquery.js"></script>
<script>
• Traversing $('input').focus(function(){
• Manipulation
var v = $(this).val();
$(this).val(
•
v === this.defaultValue ? '' : v
CSS );
•
}).blur(function(){
Events var v = $(this).val();
$(this).val(
• Effects
);
$.trim(v) ? v : this.defaultValue
• Ajax });
• Utilities </script></body></html>
http://jsbin.com/akeqo3/edit
85. • Core add() eq()
•
children() filter()
Selectors closest() is()
• Attributes
contents()
find()
map()
not()
• Traversing next()
nextAll()
slice()
• Manipulation offsetParent()
parent()
• CSS parents()
prev()
• Events prevAll()
siblings()
• Effects
andSelf()
• Ajax end()
• Utilities
86. • Core add() eq()
• Selectors
children() filter()
closest() is()
• Searches down
Attributes
contents()
find()
map()
not()
• Traversing next()
nextAll()
slice()
• Manipulation offsetParent()
parent()
• CSS parents()
prev()
• Events prevAll()
siblings()
• Effects andSelf()
• Ajax end()
• Utilities
87. • Core add()
Filters across
eq()
•
children() filter()
Selectors closest() is()
• Attributes
contents()
find()
map()
not()
• Traversing next()
nextAll()
slice()
• Manipulation offsetParent()
parent()
• CSS parents()
prev()
• Events prevAll()
siblings()
• Effects
andSelf()
• Ajax end()
• Utilities
88. • Core add() eq()
•
children() filter()
Selectors closest() is()
• Attributes
contents()
find()
map()
not()
• Traversing next()
nextAll()
slice()
• Manipulation offsetParent()
parent()
• CSS parents()
prev()
• Events prevAll()
siblings()
• Effects
andSelf()
• Ajax end()
• Utilities
89. • Core <!DOCTYPE html>
•
<html>
Selectors <body>
• Attributes <p>Make me bold!</p>
• Traversing
<script src="jquery.js">
• Manipulation </script>
<script>
• CSS
$('p')
• Events .contents()
.wrap('<strong />');
• Effects
</script>
• Ajax </body>
•
</html>
Utilities http://jsbin.com/owesu/edit
90. • Core html() replaceWith()
•
text() replaceAll()
Selectors
• Attributes
append()
appendTo()
empty()
remove()
• Traversing prepend()
prependTo() clone()
• Manipulation
after()
• CSS before()
insert()
• Events insertAfter()
insertBefore
• Effects
wrap()
• Ajax wrapAll()
•
wrapInner()
Utilities
91. • Core html() replaceWith()
•
text() replaceAll()
Selectors
• Attributes
append()
appendTo()
empty()
remove()
• Traversing prepend()
prependTo() clone()
• Manipulation
after()
• CSS before()
insert()
• Events insertAfter()
insertBefore
• Effects
wrap()
• Ajax wrapAll()
•
wrapInner()
Utilities
92. • Core <!DOCTYPE html>
• Selectors
<html>
<body>
• Attributes
<p>jQuery’s <em>easy!</em></p>
• Traversing
•
<script src="jquery.js">
Manipulation </script>
• CSS <script>
• Events alert($(‘p’).text());
• Effects </script>
• Ajax </body>
</html>
• Utilities http://jsbin.com/inulu/edit
93. • Core css()
• Selectors offset()
• Attributes
offsetParent()
position()
• Traversing scrollTop()
scrollLeft()
• Manipulation
height()
• CSS width()
innerHeight()
• Events innerWidth()
outerHeight()
• Effects outerWidth()
• Ajax
• Utilities
94. • Core css()
• Selectors offset()
• Attributes
offsetParent()
position()
• Traversing scrollTop()
scrollLeft()
• Manipulation
height()
• CSS width()
innerHeight()
• Events innerWidth()
outerHeight()
• Effects outerWidth()
• Ajax
• Utilities
95. • Core <!DOCTYPE html>
<html>
• Selectors <head>
<style>
•
div { background: #ccc; width: 100px;
Attributes margin: 0 20px; float: left; }
</style>
• Traversing </head>
<body>
• Manipulation <div></div>
<div></div>
• CSS <div></div>
• Events
<script src=“jquery.js">
</script>
•
<script>
Effects
$('div').height($(document).height());
• Ajax </script>
•
</body>
Utilities </html> http://jsbin.com/erire3/edit
96. • Core ready() blur()
•
change()
Selectors bind() click()
• Attributes
one()
trigger()
dbclick()
focus()
• Traversing triggerHandler() keydown()
unbind() keypress()
• Manipulation
live()
keyup()
mousedown()
• CSS die() mousenter()
mouseleave()
• Events hover()
toggle()
mouseout()
mouseup()
• Effects
load()
resize()
scroll()
• Ajax unload() select()
•
error() submit()
Utilities
97. • Core ready() blur()
• Selectors
change()
bind() click()
• Acts on first, and
Attributes
one()
trigger()
dbclick()
focus()
• Traversing
doesn’t chain! triggerHandler() keydown()
unbind() keypress()
• Manipulation live()
keyup()
mousedown()
• CSS die() mousenter()
mouseleave()
• Events hover()
toggle()
mouseout()
mouseup()
• Effects load()
resize()
scroll()
• Ajax unload() select()
• Utilities
error() submit()
98. • Core ready() blur()
IE fires on blur
•
change()
Selectors bind() click()
• Attributes
one()
trigger()
dbclick()
focus()
• Traversing triggerHandler() keydown()
unbind() keypress()
• Manipulation
live()
keyup()
mousedown()
• CSS die() mousenter()
mouseleave()
• Events hover()
toggle()
mouseout()
mouseup()
• Effects
load()
resize()
scroll()
• Ajax unload() select()
•
error() submit()
Utilities
99. • Core ready() blur()
•
change()
Selectors bind() click()
• Attributes
one()
trigger()
dbclick()
focus()
• Traversing triggerHandler() keydown()
unbind() keypress()
• Manipulation
live()
keyup()
mousedown()
• CSS die() mousenter()
mouseleave()
• Events hover()
toggle()
mouseout()
mouseup()
• Effects
load()
resize()
scroll()
• Ajax unload() select()
•
error() submit()
Utilities
100. • Core <!DOCTYPE html>
•
<html>
Selectors <body>
• Attributes <p>1. click</p>
• Traversing <p>2. click</p>
• Manipulation <script src="jquery.js"></script>
<script>
• CSS
$(‘p’).bind(‘click’, function(){
• Events $(this).after(‘<p>clicked</p>’);
});
• Effects
•
</script>
Ajax </body>
• Utilities </html>
http://jsbin.com/ogahu/edit
101. • Core <!DOCTYPE html>
•
<html>
Selectors <body>
• Attributes <p>1. click</p>
• Traversing
<p>2. click</p>
• Manipulation <script src="jquery.js"></script>
<script>
• CSS
$(‘p’).live(‘click’, function(){
• Events $(this).after(‘<p>’ +
➥ $(this).text()+‘ clicked</p>’);
• Effects });
• Ajax </script>
</body>
• Utilities </html> http://jsbin.com/ihalu/edit
102. • Core show()
• Selectors
hide()
toggle()
• Attributes
slideDown()
• Traversing slideUp()
slideToggle()
• Manipulation
• CSS fadeIn()
fadeOut()
• Events fadeTo()
• Effects animate()
•
stop()
Ajax
• Utilities
103. • Core show()
• Selectors
hide()
toggle()
• Attributes
slideDown()
• Traversing slideUp()
slideToggle()
• Manipulation
• CSS fadeIn()
fadeOut()
• Events fadeTo()
• Effects animate()
•
stop()
Ajax
• Utilities
104. • Core <!DOCTYPE html><html><head>
<style>
• Selectors div {background:#bca; width:100px;
border:1px solid green;}
• Attributes </style>
</head>
• Traversing <body>
<div id="block">Hello!</div>
• Manipulation <script src="jquery.js"></script>
<script>
• CSS
$(‘#block’).animate({
• Events ! width: ‘70%’,
! opacity: 0.4,
• Effects ! marginLeft: ‘0.6in’,
! fontSize: ‘3em’,
• Ajax
! borderWidth: ‘10px’
}, 1500);
http://jsbin.com/oroto/edit
• Utilities </script></body></html>
105. • Core $.ajax() ajaxCompete()
• Selectors
$.get()
$.post()
ajaxError()
ajaxSend()
• Attributes $.getJSON()
$.getScript()
ajaxStart()
ajaxStop()
• Traversing $.ajaxSetup() ajaxSuccess()
• Manipulation load()
• CSS
serialize()
• Events serializeArray()
• Effects
• Ajax
• Utilities
106. • Core $.ajax() ajaxCompete()
• Selectors
$.get()
$.post()
ajaxError()
ajaxSend()
• Attributes $.getJSON()
$.getScript()
ajaxStart()
ajaxStop()
• Traversing $.ajaxSetup() ajaxSuccess()
• Manipulation load()
• CSS
serialize()
• Events serializeArray()
• Effects
• Ajax
• Utilities
107. • Core <!DOCTYPE html><html><body>
•
<script src="jquery.js">
Selectors </script>
• Attributes
<script>
• Traversing $.getJSON("http://twitter.com/
statuses/user_timeline.json?
• Manipulation screen_name=rem&callback=?",
function(data){
• CSS $.each(data,function(i,tweet){
$('<p/>').html
• Events (tweet.text).appendTo('body');
if ( i == 30 ) return false;
• Effects });
•
});
Ajax </script></body></html>
• Utilities http://jsbin.com/acisi/edit
108. • Core $.support $.isArray()
• Selectors
$.boxModel
$.browser
$.isFunction()
• Attributes
$.each()
$.trim()
$.param()
• Traversing $.extend()
$.grep()
• Manipulation $.makeArray()
• CSS $.map()
$.inArray()
• Events $.merge()
$.unique()
• Effects
• Ajax
• Utilities
109. • Core $.support $.isArray()
• Selectors
$.boxModel
$.browser
$.isFunction()
• Attributes
$.each()
$.trim()
$.param()
• Traversing $.extend()
$.grep()
• Manipulation $.makeArray()
• CSS $.map()
$.inArray()
• Events $.merge()
$.unique()
• Effects
• Ajax
• Utilities
110. • Core $.each(data, function(i, tweet){
•
$('<p />')
Selectors .html(tweet.text)
• Attributes
.appendTo('body');
• Traversing if ( i == 30 ) {
return false;
• Manipulation }
});
• CSS
• Events
• Effects
• Ajax
• Utilities http://jsbin.com/acisi/edit
112. What’s a plugin?
A plugin is nothing more than a custom
jQuery method created to extend the
functionality of the jQuery object
$(‘ul’).myPlugin()
113. Why create a plugin?
The “do something” isn’t available in jQuery
114. Why create a plugin?
Roll your own “do something” with a plugin!
120. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
$(this).text(
$(this).text().replace(/hate/g, ‘love’)
);
}; // end of plugin
})(jQuery);
$(‘p’).notHate();
</script></body></html>
122. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
this.each(function () {
$(this).text(
$(this).text().replace(/hate/g, ‘love’)
);
});
}; // end of plugin
})(jQuery);
$(‘p’).notHate();
</script></body></html>
124. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g, ‘love’)
);
});
}; // end of plugin
})(jQuery);
$(‘p’).notHate().hide();
</script></body></html>
126. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g,
➥ $.fn.notHate.defaults.text)
);
});
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);
$(‘p’).notHate();
</script></body></html>
128. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g,
➥ $.fn.notHate.defaults.text)
);
});
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
129. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g,
➥ $.fn.notHate.defaults.text)
);
});
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
130. <!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
var settings = $.extend({},
➥ $.fn.notHate.defaults, options);
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g,
➥ $.fn.notHate.defaults.text)
);
});
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
131. <!DOCTYPE html><html><body> http://jsbin.com/ifuga/edit
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function (options) {
var settings = $.extend({},
➥ $.fn.notHate.defaults, options);
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g,
➥ settings.text)
);
});
}; // end of plugin
$.fn.notHate.defaults = {text:‘love’};
})(jQuery);
$(‘p’).notHate({text: ‘love-love-love’});
</script></body></html>
134. News
• Four conferences next year:
London, Boston, San Francisco and online
• New plugin site
• jQuery Forum (moving from Google Groups)
• jQuery.org & Foundation (Software Freedom
Law Centre)
• Infrastructure upgrade
135. Remy Sharp @rem
jQuery team member
Co-author of O'Reilly
jQuery Cookbook
(due November 20th)
jqueryfordesigners.com
remysharp.com
Special thanks to Cody Lindley
136. Remy Sharp @rem
jQuery team member
Co-author of O'Reilly
jQuery Cookbook
(due November 20th)
jqueryfordesigners.com
?
Questions
remysharp.com
Special thanks to Cody Lindley