amsterdamjs - jQuery 1.5

1,353 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,353
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • amsterdamjs - jQuery 1.5

    1. 1. JQUERY 1.5amsterdamjs meetup - February 8th 2011 @mennovanslooten
    2. 2. IN THIS PRESENTATION...• New features • Improvements • jQuery.sub() • jQuery.ajax() • Deferred objects • Performance
    3. 3. BUT FIRST...
    4. 4. WHO HERE USES JQUERY?
    5. 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. 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. 7. JQUERY MICRO TUTORIAL// attaching eventssome_element.bind(‘click’, function(e) { // handler code});// triggering eventssome_element.trigger(‘click’);
    8. 8. JQUERY MICRO TUTORIAL// custom eventssome_element.bind(‘whatever’, function(e) { // handler code});// namespaced eventssome_element.bind(‘click.myapp’, function(e) { // handler code});
    9. 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. 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. 11. THE NEW STUFF...
    12. 12. 1.5 IMPROVEMENT: AJAX• complete rewrite• implemented as a “deferred object”
    13. 13. NEW 1.5 FEATURE: DEFERRED OBJECTSA deferred object is a chainable utility object that can registermultiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.
    14. 14. WHAT?
    15. 15. DEFERRED AJAX EXAMPLE// the old wayvar success;$.ajax(‘file.php’, { success : function() { success = true; }, error : function() { success = false; }});// somewhere elseif (success) { // ...} else { // ....}
    16. 16. DEFERRED AJAX EXAMPLE// the new wayvar req = $.ajax(‘file.php) .success(function() { ... }) .error(function() { ... });// somewhere elsereq.success(function() { ... });req.error(function() { ... });
    17. 17. CREATE YOUR OWN DEFERREDvar 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. 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. 19. $.SUB EXAMPLEvar sub = jQuery.sub();sub.fn.bar = function(){ };$(#foo).bar(); // nosub(#foo).bar(); // yes
    20. 20. THANKS FOR LISTENING @mennovanslooten

    ×