jQuery
JavaScript Library of the Future
Matt Taylor

YOUR
WEBAPP
SUCKS

YOUR
WEBAPP
SUCKS

“Most of the people
writing in JavaScript
are not
programmers”
- Douglas Crockford

“Programmers who
attempt to use JavaScript
for non-trivial tasks often
find the process
frustrating if they do not
have a solid understanding
of the language.”
- David Flanagan

1998

The
“Accidental”
RIA Developer

THEY
USE
jQUERY

UNOBTRUSIVE

UNOBTRUSIVE
FUNCTIONAL

UNOBTRUSIVE
PRAGMATIC
FUNCTIONAL

IT IS OKAY
NOT TO BE
OBJECT
ORIENTED

IT IS OKAY
NOT TO BE
OBJECT
ORIENTED

jQuery Object
jQuery

jQuery Object
jQuery(...)

jQuery Object
$(...)

$() returns $

Accessing the DOM
with Selectors

Accessing the DOM
with Selectors
$(‘#myId’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)
$(‘#myId .myClass’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)
$(‘#myId .myClass’)
$(‘#myTable tr.eq(3)’)

Accessing the DOM
with Selectors
$(‘#myId’)
$(‘.myClass’)
$(‘div.myClass’)
http://tinyurl.com/jlotf
$(‘li > p’)
$(‘a[href^=mailto:’)
$(‘li:even’)
$(‘li:not(:last)’)
$(‘#myId .myClass’)
$(‘#myTable tr.eq(3)’)

WHAT
YOU
GET
BACK

Implicit Iteration
$(‘li’).addClass(‘highlight’)

Explicit Iteration
$(‘li’).each(function() {
$(this).addClass(‘highlight’);
});

Modifying
Appearance of a
Webpage

Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)

Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,

Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})

Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})
.height(‘100px’)

Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})
.height(‘100px’)
.addClass() .removeClass()

Modifying
Appearance of a
Webpage
.css(‘border’, ‘solid red’)
.css({‘height’:‘100px’,
‘width’:‘200px’})
.height(‘100px’)
.addClass() .removeClass()
.toggleClass()

EVENTS
$(‘p’).click(function() {
// do stuff
});
$(‘p’).click() // triggers
$(‘p’).live(‘click’, function() {
// do stuff
}

AJAX
$.ajax({
type: "POST",
url: "saveUrl",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
Ajax Event Callbacks
ajaxStart, ajaxStop, ajaxComplete,
beforeSend, ajaxError, ajaxSend, etc.

EFFECTS
.hide()
.show() speeds
.fadeIn() callbacks
.fadeOut() compound effects
.toggle()
.slideToggle()
animate()

jQuery UI
Open source UI components
built on jQuery

Plugins
Nearly 500 plugins
Simply include the .js and
call a function

Matthew Taylor
rhyolight@gmail.com
http://dangertree.net
@rhyolight

Matthew Taylor
rhyolight@gmail.com
http://dangertree.net
@rhyolight