Advanced jQuery

Sergio
•http://
sergiopereira.com/
blog look

•@sergiopereira
•Chicago ALT.NET
•Chicago Code

The Plan
•not just Tips &
Tricks but, yeah,
some of those
•overlooked jQuery
features
•coding the jQuery

The Plan
Is Subject To
Change

end()
breadcrumbs for
your navigation

end() Command

<div class=menu>
<ul>
<li class=current>New</li>
<li>Open...</li>
<li>Print...</li>
</ul>
</div>
<div class=menu>
...
</div>

end() Command
$('.menu').find('li')

<div class=menu>
<ul>
<li>Open...</li>
<li>Print...</li>
</ul>
</div>
<div class=menu>
...
</div>

end() Command
.filter('.current')

<div class=menu>
<ul>
<li>Open...</li>
<li>Print...</li>
</ul>
</div>
<div class=menu>
...
</div>

end() Command
.filter('.current')
.end()
<div class=menu>
<ul>
<li>Open...</li>
<li>Print...</li>
</ul>
</div>
<div class=menu>
...
</div>

end() Command
.filter('.current')
.end().end()
<div class=menu>
<ul>
<li>Open...</li>
<li>Print...</li>
</ul>
</div>
<div class=menu>
...
</div>

Computed
for when a simple
expression isn’t
enough

Computed Values

$('#buttons li')
.css('margin-left', function(ix, val) {

return ix*10;
});

Computed Values
• attr(name,
function(i,v){ })
• prop(name,
function(i,v){ })
• val(function(i,v){ })
• css(name,
function(i,v){ })

Relative CSS

$('#volumeUp').click(function(){
var $volBar = $('#volBar');
var width = $volBar.css('width');
//easy mistake
$volBar.css('width', width + 10);
});

Relative CSS

$('#volumeUp').click(function(){
$('#vol').css('margin-left', '+=10');
});

data()
goodbye memory
leaks

data() Storage
var myForm = $('#myform')[0];
var formResult = {
errors: validateForm(myForm),
form: myForm
};
myForm.result = formResult;

//later...
var result = $('#myform')[0].result;
if(result.errors.length){
alert('Fix the errors.');
}

data() Storage
var formResult = {
errors: validateForm(myForm),
form: $('#myform')
};
$('#myform').data('result', formResult);

//later...
var result = $('#myform').data('result');
if(result.errors.length){
alert('Fix the errors.');
}

data() Storage
<ul>
<li data-movie-id="131">Crash</li>
<li data-movie-id="722">Up</li>
</ul>

var id = $('li:first').data('movieId');
// ==> id == 131

data() Storage
data attributes
•will try to use
correct data type
•parses JSON
values

map() Utility
projections for your
arrays

map() Utility
array-like: has
most of what's
needed to be used
as an array
var arrayLike = {
length: 2,
0: 'first',
1: 'second'
};

map() Utility
bonus utility:
makeArray()
var arr = $.makeArray(arrayLike);
// ==> ['first','second']

map() Utility

var users = getUsersArray();

var emails =
$.map(users, function(user, i){
return user.profile.email;
});

map() Utility
the callback
function
•return new value
for the position
•return null to
exclude that position

re
Quick

ca
•

p
end(): avoid
unnecessary
traversals
•computed
attributes
•relative CSS
attributes

jQuery
determine which
element and...

bind(), live(),
delegate(),
well, yes - choices

bind() vs. live()
$('#container .action')
.bind('click', function(){
//do stuff here
});
//same as: $('#container .action')
// .click(function(){...});

//prefer:
.live('click', function(){
//do stuff here
});

bind() vs. live()

•live(): more
efficient usage
•live(): works for
added elements
•live(): forces you
to deal with the

live() vs. delegate()

.live('click', doStuff);

$('#container')
.delegate('.action','click', doStuff);

live() vs. delegate()

• live(): syntax is
slightly easier
• live(): attaches to
document
• delegate():
attaches closer

Everything vs. on()
$('#close').bind('click', closeWindow);
$('#close').on('click', closeWindow);

$('.popup').delegate(
'.closeBtn','click', closePopup);

$('.popup').on(
'click','.closeBtn', closePopup);

Everything vs. on()
$('#close').bind('click', closeWindow);
$('#close').on('click', closeWindow);

$('.popup').delegate(
'.closeBtn','click', closePopup);

$('.popup').on(
'click','.closeBtn', closePopup);

1.7

Custom
they remove tight
coupling

Custom Events
$('#widget').on('start', function(){
//do stuff
});

//elsewhere, maybe in another js file:
$('#widget').on('start', function(){
//do other stuff
});

//when appropriate:
$('#widget').trigger('start');

Custom Events
$('#btn1').on('lock', function(){
$(this).prop('disabled', true);
});

//elsewhere, maybe in another js file:
$('#toolbar').on('lock', function(){
$(this).find('.icon').remove();
});

//when appropriate:
$.event.trigger('lock');

proxy()
let's put this in
context

proxy() Utility

var f = $.proxy(obj, 'doSomething');

var f = $.proxy(obj.doSomething, obj);

re
Event

ca
•

p
pick the right
binding command
•delegate() over
live()
•on() uniﬁes it all
•decouple with

Custom
the abc of jQuery
mastery

Custom Commands
function stripeTable(table, alt) {
$(table)
.find('tr:odd')
.addClass(alt||'alternate');
}
//...
var table = $('#mytable')[0];
stripeTable(table, 'altRow');

Custom Commands
jQuery.fn.stripe = function(alt) {
this
.children(':odd')
.addClass(alt||'alternate');
return this;
};
//...
$('#mytable').stripe('altRow');

Custom
expressive means
readable

Custom

$.expr[':'].myfilter = function(el) {
//return true if el(ement) matches
}
//...
$('div:myfilter').slideDown();

re
Extensions

ca
p
•commands
•expressions
•events

Futures,
decouple the task
from what
you do with its
outcome

Tidy Callbacks
startLongProcess(
function(result){
useResult(result);
logCompletion(result);
},
function(error){
logFailure(error);
}
);

Tidy Callbacks
startLongProcess(
function(result){
useResult(result, function(res2){
updateScreen(res2);
});
},
//...
);

Tidy Callbacks
var task = startLongProcess()
.done(useResult)
.always(logCompletion)
.fail(logFailure);

doSomethingElse();

//time passes...
task.fail(function(){
alert('error');
});

Tidy Callbacks
var task = startLongProcess()
.always(logCompletion)
.fail(logFailure);

$.when(task, otherTask)
.then(function(args1, args2){
useResult(args1[0])
.done(updateScreen);
});

Deferreds in
time to relearn
some features

Ajax

var fetch = $.get('/data.aspx')
.done(validateResponse)
.done(doSomething)
.done(doMoreStuff)
.fail(reportError);

fetch.fail(resetUI);

when() Utility
$.when(
$.get('/somedata'),
$.get('/moredata'),
$.post('/updatedata', data),
someOtherDeferred)

.then(function(){
alert('all done');
});

promise()
$('.widget')
.first().fadeOut(500).end()
.last().fadeOut(1000).end()
.promise() //default: 'fx' queue
.done(function(){
//do something...
});

re
Deferred

ca
p
•common way for
callbacks
•returned by jQuery
Ajax
•for command
queues too

github
https://
github.com/jquery

Reference

•http://
api.jquery.com
•Paul Irish's articles
and videos

Advanced jQuery

Related slideshows

More Related Content

Advanced jQuery

Editor's Notes