jQuery Overview: Core Concepts and API

Overview

• Who, what and why of jQuery
• 5 core jQuery concepts
• Overview of jQuery API
• Building a plugin in 6 steps
• jQuery News

Who's using jQuery

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

Who's using jQuery

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 exactly is jQuery
jQuery is a JavaScript library!

• Dealing with the DOM changing, etc)
(e.g. selecting, creating, traversing,

• JavaScript Events
• Animations
• Ajax interactions

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

It really is the

Write less, do more
JavaScript library!

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>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<ul>
</ul>
<script src="jquery.js"></script>
<script>
jQuery('ul');
</script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<body>
<ul id="nav">
<li><a href=”/home”>home</a></li>
<li><a href=”/about”>about</a></li>
</ul>
<script>
jQuery('#nav a').each(function(){
jQuery(this).attr(‘href’,
➥ ‘/’ + jQuery(this).text());
});
</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'>
</ul>
<script>
jQuery(‘<li>home</li>’)
➥.wrapInner(‘<a/>’);
jQuery(‘<li>about</li>’)
➥.wrapInner(‘<a/>’);
</script>
</body>
</html>

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

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>

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>

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

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

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

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

• 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

•

• 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
• Effects
$(‘.header, .footer’, ‘#main’)
• Ajax

• Utilities




• Traversing
$(‘a[title]’)
• Manipulation
• CSS
• Events
• Effects
• Ajax
http://codylindley.com/jqueryselectors
• Utilities




• Traversing
ry s elec tors
jQue $(‘a[title]’)
• Manipulation
ilen tly,
• fail s
CSS
SS d oes!
• Events just l ike C

• Effects
• Ajax
http://codylindley.com/jqueryselectors
• Utilities

• Core attr()

•
removeAttr()
Selectors
• Attributes
addClass()
hasClass()

• Traversing toggleClass()
removeClass()
• Manipulation
val()
• CSS

• Events

• Effects

• Ajax

• Utilities

• 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

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


•
<html>
Selectors <body>

• Attributes <p>Make me bold!</p>

• Traversing
• Manipulation </script>
<script>
• CSS
$('p')
• Events .contents()
.wrap('<strong />');
• Effects
</script>
• Ajax </body>

•
</html>
Utilities http://jsbin.com/owesu/edit

• 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


• Selectors
<html>
<body>
• Attributes
<p>jQuery’s <em>easy!</em></p>
• Traversing

•

• CSS <script>

• Events alert($(‘p’).text());

• Effects </script>

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

• Core css()

• Selectors offset()

• Attributes
offsetParent()
position()

• Traversing scrollTop()
scrollLeft()
• Manipulation
height()
• CSS width()
innerHeight()
• Events innerWidth()
outerHeight()
• Effects outerWidth()

• Ajax

• Utilities

<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

• 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


• Selectors
change()
bind() click()

• Acts on ﬁrst, and
Attributes
one()
trigger()
dbclick()
focus()

• Traversing
doesn’t chain! triggerHandler() keydown()
unbind() keypress()
• Manipulation live()
keyup()
mousedown()
mouseleave()
• Events hover()
toggle()
mouseout()
mouseup()
• Effects load()
resize()
scroll()

• Utilities
error() submit()

IE ﬁres on blur
•
change()
Selectors bind() click()

• Attributes
one()
trigger()
dbclick()
focus()

• Traversing triggerHandler() keydown()
unbind() keypress()
• Manipulation
live()
keyup()
mousedown()
mouseleave()
• Events hover()
toggle()
mouseout()
mouseup()
• Effects
load()
resize()
scroll()

•
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>clicked</p>’);
});
• Effects

•
</script>
Ajax </body>

• Utilities </html>
http://jsbin.com/ogahu/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 show()

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

• CSS fadeIn()
fadeOut()
• Events fadeTo()

• Effects animate()

•
stop()
Ajax

• Utilities

• 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

• 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

• 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

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

Why create a plugin?

The “do something” isn’t available in jQuery

Why create a plugin?

Roll your own “do something” with a plugin!

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


Plugins are simple,
just follow those steps.

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

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

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

jQuery Overview: Core Concepts and API

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to jQuery Overview: Core Concepts and API

Similar to jQuery Overview: Core Concepts and API (20)

More from Remy Sharp

More from Remy Sharp (20)

Recently uploaded

Recently uploaded (20)

jQuery Overview: Core Concepts and API