jQuery Loves Developers - Oredev 2009

Overview
• Who, what, why of jQuery
• Core concepts of jQuery
• API overview & tips
• Plugin design pattern
• News
• Live demo

Who?

reddit.com whitehouse.gov overstock.com
espn.com microsoft.com time.com
ibm.com amazon.com capitalone.com
stackoverﬂow.com netﬂix.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

What?
jQuery is a JavaScript library.

• Selector engine: Sizzle
• DOM manipulation
• Events
• Effects
• Ajax

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';
}
}
}

jQuery simpli es

jQuery('table tr:nth-child(odd)').addClass('odd');

jQuery simpli es

jQuery function


jQuery simpli es

jQuery function


CSS expression

jQuery simpli es

jQuery function jQuery method

CSS expression

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)

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

Concept 1:
knowing the jQuery
parameter types

• CSS selectors & custom CSS expressions
• HTML
• DOM elements
• A function (shortcut for DOM ready)

jQuery(‘div’) & jQuery(‘:first’)

• CSS selectors & custom CSS expressions
• HTML
• DOM elements

jQuery(‘<li><a href=”#”>link</a></li>’)

• CSS selectors jQuery(‘:first’)
jQuery(‘div’) &
& custom CSS expressions

• HTML
• DOM elements

jQuery(document) or jQuery(document.createElement(‘a’))

jQuery(‘div’) &

• HTML

• DOM elements

jQuery(function(){}) =
jQuery(document).ready(function(){})

jQuery(‘div’) &

• HTML

• DOM elements


jQuery(‘div’) &

• HTML

• DOM elements

jQuery(function(){}) =
jQuery(document).ready(function(){})

Concept 2:
nd something,
do something

<!DOCTYPE html>
<html>
<body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id="nav">
</ul>
<script src="jquery.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id="nav">
</ul>
<script>
jQuery('#nav li');
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id="nav">
<li class="item"><a>home</a></li>
<li class="item"><a>about</a></li>
</ul>
<script>
jQuery('#nav li').addClass('item');
</script>
</body>
</html>

Concept 3:
create something,
do something

<!DOCTYPE html>
<html>
<body>
<ul id='nav'>
</ul>
</body>
</html>

<!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>

<!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li>home</li>
<li>about</li>
</ul>
<script>
jQuery(‘<li>home</li>’)
➥.appendTo(‘#nav’);
jQuery(‘<li>about</li>’)
➥.appendTo(‘#nav’);
</script>
</body>
</html>

Insi de
tip

createDocumentFragment

Insi de
tip

createDocumentFragment

(IE6 || IE7) &&
innerHTML && HTML5
== fail

Concept 4:
chaining & operating

<!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>
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>

<!DOCTYPE html>
<html>
1
<body>
<ul id='nav'>
</ul>
<script>
1 jQuery(‘ul’).attr(‘id’, ‘nav’);
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
1
<body>
<ul id='nav'>
</ul> 2
<script>
2
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
1
<body>
<ul id='nav'> 3
</ul> 2
<script>
2
});
</script>
3
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id='nav'>
</ul>
<script>
jQuery(‘ul’)
.attr(‘id’, ‘nav’)
.find(‘li’)
.addClass(‘item’)
.find(‘a’)
.each(function () {
});
</script>
</body>
</html>

jQuery returns itself
containing the current
DOM collection

Concept 5:
understanding
implicit iteration

Review

• Knowing the jQuery parameter types
• Find something, do something
• Create something, do something
• Chaining & Operating
• Understanding Implicit Iteration

“What about the
bling function?”

<!DOCTYPE html>
<html>
<body>
<ul id='nav'>
<li class=”item”>home</li>
<li class=”item”>about</li>
</ul>
<script>
jQuery(‘li’).addClass(‘item’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id='nav'>
</ul>
<script>
$(‘li’).addClass(‘item’);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul id='nav'>
</ul>
<script>
$(document).ready(function () {
});
</script>
</body>
</html>

app.js
$(document).ready(function () {
});

app.js
$(function () {
});

app.js
jQuery(function ($) {
});

Tip

Include jQuery after styles

• Core

• 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 <!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


• Selectors
<html>
<body>
• Attributes
<p>Element Node</p>
• Traversing

•
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 $(‘#nav li.contact’)

• Selectors

• Attributes

• Traversing

• Manipulation

• CSS

• Events

• Effects

• Ajax

• Utilities


• Selectors $(‘:visible’)

• Attributes

• Traversing

• Manipulation

• CSS

• Events

• Effects

• Ajax

• Utilities



• Attributes $(‘:radio:enabled:checked’)

• Traversing

• Manipulation

• CSS

• Events

• Effects

• Ajax

• Utilities




• Traversing
$(‘a[title]’)
• Manipulation

• CSS

• Events

• Effects

• Ajax

• Utilities




• Traversing
$(‘a[title]’)
• Manipulation
$(‘a[title][hash*=”foo”]’)
• CSS

• Events

• Effects

• Ajax

• Utilities




• Traversing
$(‘a[title]’)
• Manipulation
• CSS
$(‘a:first[hash*=”foo”]’)
• Events

• Effects

• Ajax

• Utilities




• Traversing
$(‘a[title]’)
• Manipulation
• CSS
• Events
$(‘.header, .footer’)
• Effects

• Ajax

• Utilities




• Traversing
$(‘a[title]’)
• Manipulation
• CSS
• Events
$(‘.header, .footer’)
• Effects
$(‘.header, .footer’, ‘#main’)
• Ajax

• Utilities

Insi de
tip
Performance
getElementById

getElementsByTagName

getElementsByClassName

querySelectorAll

Insi de
tip
Performance

ry s elec tors
Que
getElementById
j
fail s ilen tly,
getElementsByTagName
SS d oes!
ju st l ike C
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

Ne•wCore
in add() eq()

• .3
children() filter()
Selectors
1 Attributes
•
closest()
contents()
is()
map()
find() not()

nextAll()
slice()

parent()
• CSS parents()
prev()
siblings()
• Effects andSelf()
• Ajax end()

• Utilities

• Core add() eq()

• Selectors
children() filter()
closest() is()

• Searches down
Attributes
contents()
find()
map()
not()

nextAll()
slice()

parent()
• CSS parents()
prev()
siblings()
• Effects andSelf()
• Ajax end()

• Utilities

• Core add()
Filters across
eq()

•
children() filter()
Selectors closest() is()

• Attributes
contents()
find()
map()
not()

nextAll()
slice()

parent()
• CSS parents()
prev()
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>
• 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()

• 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

• Core ready() blur()
IE ﬁres 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


•
<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>’ +
➥ $(this).text()+‘ clicked</p>’);
• Effects });

• Ajax </script>
</body>
• Utilities </html> http://jsbin.com/ededi/edit


•
<html>
Selectors <body>

• Attributes <p>1. click</p>

• Traversing
<p>2. click</p>

<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

• Core $.fx.off

• Selectors show()
• Attributes hide()
toggle()
• Traversing
slideDown()
• Manipulation slideUp()

• CSS slideToggle()

• Events fadeIn()
fadeOut()
• Effects fadeTo()

• Ajax animate()
• Utilities stop()

• Core control ew in
Blanket FX $.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 <!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>
<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>

• 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>

•
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

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()

Step 1:
create a private
scope for $ alias

<!DOCTYPE html><html><body>
<script>
(function ($) {

})(jQuery);
</script></body></html>

Step 2:
attach plugin to fn
alias (aka prototype)

<p>I hate jQuery!</p>
<script>
(function ($) {
$(this).text(
);
}; // end of plugin
})(jQuery);

$(‘p’).notHate();

Step 3:
add implicit iteration

<p>I mean really hate jQuery!</p>
<script>
(function ($) {
this.each(function () {
$(this).text(
);
});
}; // end of plugin
})(jQuery);


<!DOCTYPE html><html><body> http://jsbin.com/ifuga/edit
<script>
(function ($) {
var settings = $.extend({},
➥ $.fn.notHate.defaults, options);

$(this).text(
➥ settings.text)
);
});
}; // end of plugin
})(jQuery);


News

• Four conferences next year:
London, Boston, San Francisco and online
• New plugin site
• jQuery Forum (moving from Google Groups)
• Mobile jQuery

Remy Sharp @rem

jQuery team member
Co-author of O'Reilly
jQuery Cookbook
(due November 20th)

jqueryfordesigners.com
remysharp.com

Remy Sharp @rem

jQuery team member
Co-author of O'Reilly
jQuery Cookbook
(due November 20th)

jqueryfordesigners.com
?
Questions
remysharp.com

jQuery Loves Developers - Oredev 2009

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to jQuery Loves Developers - Oredev 2009

Similar to jQuery Loves Developers - Oredev 2009 (20)

More from Remy Sharp

More from Remy Sharp (20)

Recently uploaded

Recently uploaded (20)

jQuery Loves Developers - Oredev 2009