This is a super compressed presentation about some of the new features in jQuery 1.5 I gave at the amsterdamjs meetup on 2011/02/08.

1. JQUERY 1.5
amsterdamjs meetup - February 8th 2011
@mennovanslooten

2. IN THIS PRESENTATION...
• New features • Improvements
• jQuery.sub() • jQuery.ajax()
• Deferred objects • Performance

3. BUT FIRST...

4. WHO HERE USES JQUERY?

5. JQUERY MICRO TUTORIAL
// jQuery is...
// a function you can call to query or create DOM elements:
var old_element = $(‘#some > .css[selector]’);
var new_element = $(‘<div id=”hello”><span>world</span></div>’);

6. JQUERY MICRO TUTORIAL
// This function always returns an array-like collection with
// lots of convenient chain-able methods.
$(‘#target’)
.empty()
.append(new_element);

7. JQUERY MICRO TUTORIAL
// attaching events
some_element.bind(‘click’, function(e) {
// handler code
});
// triggering events
some_element.trigger(‘click’);

8. JQUERY MICRO TUTORIAL
// custom events
some_element.bind(‘whatever’, function(e) {
// handler code
});
// namespaced events
some_element.bind(‘click.myapp’, function(e) {
// handler code
});

9. JQUERY MICRO TUTORIAL
// jQuery is also...
// a collection of useful utilities (not chain-able)
var a = [0, 1, 2, 3];
$.each(a, function(i, val) {
alert(‘Index ‘ + i + ‘ has value ‘ + val);
});
var b = $.isArray(a);

10. JQUERY MICRO TUTORIAL
// ajax: load directly into element
$(‘#target’).load(‘file.html’);
// fine-grained control
$.ajax({
url : ‘file.html’,
type : ‘POST’,
async : false,
success: function(data, status, jqXHR) {
// handle response
}
});

11. THE NEW STUFF...

12. 1.5 IMPROVEMENT:
AJAX
• complete rewrite
• implemented as a “deferred
object”

13. NEW 1.5 FEATURE:
DEFERRED OBJECTS
A deferred object is a chainable utility object that can register
multiple callbacks into callback queues, invoke callback queues,
and relay the success or failure state of any synchronous or
asynchronous function.

14. WHAT?

15. DEFERRED AJAX EXAMPLE
// the old way
var success;
$.ajax(‘file.php’, {
success : function() { success = true; },
error : function() { success = false; }
});
// somewhere else
if (success) {
// ...
} else {
// ....
}

16. DEFERRED AJAX EXAMPLE
// the new way
var req = $.ajax(‘file.php)
.success(function() { ... })
.error(function() { ... });
// somewhere else
req.success(function() { ... });
req.error(function() { ... });

17. CREATE YOUR OWN
DEFERRED
var d1 = $.Deferred(),
var d2 = $.Deferred();
$('#button1').bind('click', function() {
d1.resolve();
});
$('#button2').bind('click', function() {
d2.resolve();
});
$.when( d1.promise(), d2.promise() )
.then(function() {
alert('both buttons clicked');
});

18. NEW 1.5 FEATURE:
$.SUB()
Creates a new copy of jQuery whose properties and methods
can be modified without affecting the original jQuery object.

19. $.SUB EXAMPLE
var sub = jQuery.sub();
sub.fn.bar = function(){ };
$('#foo').bar(); // no
sub('#foo').bar(); // yes

20. THANKS FOR LISTENING
@mennovanslooten