Professional Documents
Culture Documents
Overview
• Who, what, why of jQuery
• Core concepts of jQuery
• API overview & tips
• Plugin design pattern
• News
• Live demo
Quick survey first
Who?
Who?
Who?
http://trends.builtwith.com/javascript/jquery
What?
jQuery is a JavaScript library.
jQuery('table tr:nth-child(odd)').addClass('odd');
jQuery simplifies
jQuery function
jQuery('table tr:nth-child(odd)').addClass('odd');
jQuery simplifies
jQuery function
jQuery('table tr:nth-child(odd)').addClass('odd');
CSS expression
jQuery simplifies
CSS expression
jQuery simplifies
jQuery('table tr:nth-child(odd)').addClass('odd');
Why use jQuery
• Helps us to simplify and speed up web development
•jQuery(‘div’)
CSS selectors & custom CSS expressions
& jQuery(‘:first’)
• HTML
• DOM elements
• A function (shortcut for DOM ready)
jQuery(document) or jQuery(document.createElement(‘a’))
•jQuery(‘div’)
CSS selectors & custom CSS expressions
& jQuery(‘:first’)
•jQuery(‘<li><a
HTML
href=”#”>link</a></li>’)
• DOM elements
• A function (shortcut for DOM ready)
jQuery(function(){}) =
jQuery(document).ready(function(){})
•jQuery(‘div’)
CSS selectors & custom CSS expressions
& jQuery(‘:first’)
•jQuery(‘<li><a
HTML
href=”#”>link</a></li>’)
• DOM elements
jQuery(document) or jQuery(document.createElement(‘a’))
•jQuery(‘<li><a
HTML
href=”#”>link</a></li>’)
• DOM elements
jQuery(document) or jQuery(document.createElement(‘a’))
createDocumentFragment
Ins ide
tip
createDocumentFragment
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• 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()
• 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()
• 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
• 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
• Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Core $(‘#nav li.contact’)
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
• Core $(‘#nav li.contact’)
• Selectors $(‘:visible’)
• Attributes $(‘:radio:enabled:checked’)
• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS
• Events
• Effects
• Ajax
• Utilities
• 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
• 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
• 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
Ins ide
tip
Performance
getElementById
getElementsByTagName
getElementsByClassName
querySelectorAll
Ins ide
tip
Performance
s e l e c t o r s
e r y
getElementById
j Q u
l s i l e n t l y,
f a i
getElementsByTagName
!
C S S d o e s
ju s t l i k e
getElementsByClassName
querySelectorAll
• 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
N e•w i n
Core add() eq()
•1.Selectors
3 children() filter()
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
• Core add() eq()
• Selectors
children() filter()
closest() is()
• Searches
Attributes
down
contents()
find()
map()
not()
• Traversing next()
nextAll()
slice()
• Manipulation offsetParent()
parent()
• CSS parents()
prev()
• Events prevAll()
siblings()
• Effects andSelf()
• Ajax end()
• Utilities
• 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
• 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
• Core <!DOCTYPE html><html><body>
•
<ul>
Selectors <li><a>one</a></li>
• Attributes
<li><a>two</a></li>
<li><a>three</a></li>
• Traversing </ul>
<script src="jquery.js">
• Manipulation </script>
<script>
• CSS $('a').click(function () {
alert( $(this)
• Events .parent()
.prevAll()
• Effects
)
.length
• Ajax });
•
</script>
Utilities </body></html>http://jsbin.com/ubuhe/edit
• Core ready() blur()
•
change()
Selectors bind() click()
• Attributes
one()
trigger()
dbclick()
focus()
•
error() submit()
Utilities
• Core ready() blur()
IE fires on blur
•
change()
Selectors bind() click()
• Attributes
one()
trigger()
dbclick()
focus()
•
error() submit()
Utilities
• Core ready() blur()
•
change()
Selectors bind() click()
• Attributes
one()
trigger()
dbclick()
focus()
•
error() submit()
Utilities
• Core <!DOCTYPE html>
•
<html>
Selectors <body>
• Traversing
<p>2. click</p>
• CSS
$(‘p’).bind(‘click’, function(){
• Events $(this).after(‘<p>’ +
➥ $(this).text()+‘ clicked</p>’);
• Effects });
• Ajax </script>
</body>
• Utilities </html> http://jsbin.com/ededi/edit
• Core <!DOCTYPE html>
•
<html>
Selectors <body>
• Traversing
<p>2. click</p>
• CSS
$(‘p’).live(‘click’, function(){
• Events $(this).after(‘<p>’ +
➥ $(this).text()+‘ clicked</p>’);
• Effects });
• Ajax </script>
</body>
• Utilities </html> http://jsbin.com/ihalu/edit
• Core $.fx.off
• Selectors show()
• Attributes hide()
toggle()
• Traversing
slideDown()
• Manipulation slideUp()
• CSS slideToggle()
• Events fadeIn()
fadeOut()
• Effects fadeTo()
• Ajax animate()
• Utilities stop()
•Blanket
CoreFX control ew i n
$.fx.off N
• Selectors show() 1.3
• Attributes hide()
toggle()
• Traversing slideDown()
• Manipulation slideUp()
• CSS slideToggle()
• Events fadeIn()
fadeOut()
• Effects fadeTo()
• Ajax animate()
• Utilities stop()
• Core $.fx.off
• Selectors show()
• Attributes hide()
toggle()
• Traversing
slideDown()
• Manipulation slideUp()
• CSS slideToggle()
• Events fadeIn()
fadeOut()
• Effects fadeTo()
• Ajax animate()
• Utilities stop()
• 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({
• Ajax
! borderWidth: ‘10px’
}, 1500);
http://jsbin.com/oroto/edit
• Utilities </script></body></html>
• 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
• 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
• 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
Plugins
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()
Plugin design in 6 steps
Step 1:
create a private
scope for $ alias
<!DOCTYPE html><html><body>
<script src=”jquery.js”></script>
<script>
(function ($) {
})(jQuery);
</script></body></html>
Step 2:
attach plugin to fn
alias (aka prototype)
<!DOCTYPE html><html><body>
<script src=”jquery.js”></script>
<script>
(function ($) {
$.fn.notHate = function () {
$(this).text(
$(this).text().replace(/hate/g, ‘love’)
);
}; // end of plugin
})(jQuery);
</script></body></html>
<!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>
Step 3:
add implicit iteration
<!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>
Step 4:
enable chaining
<!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>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
this == jQuery
(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>
<!DOCTYPE html><html><body>
<p>I hate jQuery!</p>
<p>I mean really hate jQuery!</p>
<script src=”jquery.js”></script>
<script>
this == jQuery
(function ($) {
$.fn.notHate = function () {
return this.each(function () {
$(this).text(
$(this).text().replace(/hate/g, ‘love’)
);
});
}; // endthis
of == DOM element
plugin
})(jQuery);
$(‘p’).notHate().hide();
</script></body></html>
Step 5:
add default options
<!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>
Step 6:
add custom options
<!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>
<!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>
<!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>
<!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>
News
jqueryfordesigners.com
remysharp.com
Remy Sharp @rem
jqueryfordesigners.com
?
Questions
remysharp.com