jQueryIn with the new,out with the old.
Agenda๏ Understanding jQuery๏ Whats new & interesting๏ Where you dont need it
GrokkingjQuery
DOM library
$(div).append(html).click(doStuff);
Just a CSS selector$(div).append(html).click(doStuff);
$(div).append(html).click(doStuff);
$(div).append(html).click(doStuff);
if ( $(foo) ) {  doAmazing();}
1) $(foo)2) $()3) []4) [].join(,) // works
if ( $(foo) ) {  doAmazing();}
if ( $(foo).length ) {  doAmazing();}
If your jQuery code fails,and theres no error:its the selector
DOM Navigation
FindChanges the collection
Filter Creates a subset
Debugging
NewStuff
Ajax changes  & Deferreds
$.get(foo.html, function (html) {var jqXHR = $.get(foo.html);  $(#latest).append(html);});jqXHR.done(function (html) {  $(...
$.ajax({  url: foo.json,  dataType: json,  success: function () {     // this === xhr  },  error: function () {  }});
$.ajax({  url: foo.json,  dataType: json,  context: document.body,  success: function () {     // this === body element  }...
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});jqXHR.then(success, fail);
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});jqXHR.then(success, fail);// much later in...
jqXHR is apromise
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});// much later in the codejqXHR.done(succes...
.done(ok)   // success.fail(fail) // error.always(fn) // complete.then(ok, fail)
var dfd = $.Deferred();    .resolve    .reject    .promise
var jqXHR = $.ajax({  url: foo.json,  dataType: json,  context: document.body});// much later in the codejqXHR.done(succes...
function save(data) {  var dfd = new $.Deferred();    // some validation done...    if (!valid) {      dfd.reject(reason);...
nction save(data) {var dfd = new $.Deferred();// some validation done...if (!valid) {             save({ /* some data */ }...
$.when
$.whenvar $boxes = $(div),    rand = Math.random,    dfds = [];for (var i = 0; i < 3; i++) {  dfds.push($.Deferred());  $b...
$.sub()
(function ($) {  $ = $.sub(); // sandbox $.fn  $.fn.logger = function () {    return this.each(function(){      console.lo...
(function ($) {  $ = $.sub(); // sandbox $.fn  $.fn.logger = function () {    return this.each(function(){      console.lo...
Doing itwrong
.ready?...<!-- all my funky markup -->...<script>$(document).ready(function () {  // add the extra funk});</script></body>...
.ready?...<!-- all my funky markup -->...<script>  // add the extra funk</script></body></html>
Add class...<!-- all my funky markup -->...<script>$(#foo).addClass(amazing);</script></body></html>
Add class...<!-- all my funky markup -->...<script>var f = document.getElementById(foo);foo.className +=  amazing;</script...
Effects vs. CSS๏ Ifthe browser can do it natively, let it do it natively.๏ Noone lost business because IE didnt do a cross...
return false$(a).click(function () {  // do the magic  amazingMagic();  return false;});
return false๏ Do you know whats happening?๏ event.preventDefault()๏ event.stopPropagation()
Get to know this$(a).click(function (e) {  e.preventDefault();  var href = $(this).attr(href);  // do the magic  amazingMa...
Get to know this$(a).click(function (e) {  e.preventDefault();  var href = this.href;  // do the magic  amazingMagic(href)...
Poorly designed plugins
$.fn.myplugin = function () {  var me = $(this).each(function() {    return $(this).bind(someEvent, function () {      // ...
$.fn.myplugin = function () {  var me = $(this).each(fn);  return me;};
$.fn.myplugin = function () {  return $(this).each(fn);};
$.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // do...
$.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // do...
$.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does ...
$.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does ...
$.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does somethi...
$.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does somethi...
$.fn.myplugin = function () {   return this.bind(someEvent, function () {     // does something  });};
(function ($) {  $.fn.myplugin = function () {    return this.bind(someEvent, function () {       // does something     })...
Questions?@remremy@leftlogic.com
jQuery: out with the old, in with the new
jQuery: out with the old, in with the new
jQuery: out with the old, in with the new
Upcoming SlideShare
Loading in...5
×

jQuery: out with the old, in with the new

1,818

Published on

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
  • @mathias - absolutely right. I quickly added that slide last minute and I did have a gut feeling that .attr('href') was the source value of the markup, rather than the DOM. The real examples I see they don't care whether it's relative or absolute, and often it's used to get the hash out - which should just be this.hash. Thanks for the comment though - I'll update my future slides (/if/ I do this deck again... :) - cheers.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slide 48 and 49: `$(this).attr('href')` equals `this.getAttribute('href')`, not `this.href`. The latter usually gets normalized into the full resolved URL while the attribute value can be a relative reference.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,818
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery: out with the old, in with the new

  1. 1. jQueryIn with the new,out with the old.
  2. 2. Agenda๏ Understanding jQuery๏ Whats new & interesting๏ Where you dont need it
  3. 3. GrokkingjQuery
  4. 4. DOM library
  5. 5. $(div).append(html).click(doStuff);
  6. 6. Just a CSS selector$(div).append(html).click(doStuff);
  7. 7. $(div).append(html).click(doStuff);
  8. 8. $(div).append(html).click(doStuff);
  9. 9. if ( $(foo) ) { doAmazing();}
  10. 10. 1) $(foo)2) $()3) []4) [].join(,) // works
  11. 11. if ( $(foo) ) { doAmazing();}
  12. 12. if ( $(foo).length ) { doAmazing();}
  13. 13. If your jQuery code fails,and theres no error:its the selector
  14. 14. DOM Navigation
  15. 15. FindChanges the collection
  16. 16. Filter Creates a subset
  17. 17. Debugging
  18. 18. NewStuff
  19. 19. Ajax changes & Deferreds
  20. 20. $.get(foo.html, function (html) {var jqXHR = $.get(foo.html); $(#latest).append(html);});jqXHR.done(function (html) { $(#latest).append(html);});
  21. 21. $.ajax({ url: foo.json, dataType: json, success: function () { // this === xhr }, error: function () { }});
  22. 22. $.ajax({ url: foo.json, dataType: json, context: document.body, success: function () { // this === body element }, error: function () { }});
  23. 23. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);
  24. 24. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);// much later in the codejqXHR.done(success2);
  25. 25. jqXHR is apromise
  26. 26. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  27. 27. .done(ok) // success.fail(fail) // error.always(fn) // complete.then(ok, fail)
  28. 28. var dfd = $.Deferred(); .resolve .reject .promise
  29. 29. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  30. 30. function save(data) { var dfd = new $.Deferred(); // some validation done... if (!valid) { dfd.reject(reason); } else { $.ajax({ url: /app/save, data: data, success: dfd.resolve, error: dfd.reject }); } return dfd.promise();}
  31. 31. nction save(data) {var dfd = new $.Deferred();// some validation done...if (!valid) { save({ /* some data */ }) dfd.reject(reason); .done(function () {} else { // show its all good $.ajax({ }) url: /app/save, data: data, .fail(function (reason) { success: dfd.resolve, // shows reason error: dfd.reject }); });}return dfd.promise();
  32. 32. $.when
  33. 33. $.whenvar $boxes = $(div), rand = Math.random,    dfds = [];for (var i = 0; i < 3; i++) {  dfds.push($.Deferred());  $boxes.eq(i).fadeTo(rand() * 5000, 1, dfds[i].resolve);}$.when.apply($, dfds).done(function () {  alert(all done!);});
  34. 34. $.sub()
  35. 35. (function ($) { $ = $.sub(); // sandbox $.fn $.fn.logger = function () { return this.each(function(){ console.log(this) }); } // my code that uses .logger()})(jQuery);// now: $.fn.logger === undefined
  36. 36. (function ($) { $ = $.sub(); // sandbox $.fn $.fn.logger = function () { return this.each(function(){ console.log(this) }); } // my code that uses .logger()})(jQuery);// now: $.fn.logger === undefined
  37. 37. Doing itwrong
  38. 38. .ready?...<!-- all my funky markup -->...<script>$(document).ready(function () { // add the extra funk});</script></body></html>
  39. 39. .ready?...<!-- all my funky markup -->...<script> // add the extra funk</script></body></html>
  40. 40. Add class...<!-- all my funky markup -->...<script>$(#foo).addClass(amazing);</script></body></html>
  41. 41. Add class...<!-- all my funky markup -->...<script>var f = document.getElementById(foo);foo.className += amazing;</script></body></html>
  42. 42. Effects vs. CSS๏ Ifthe browser can do it natively, let it do it natively.๏ Noone lost business because IE didnt do a cross fade.
  43. 43. return false$(a).click(function () { // do the magic amazingMagic(); return false;});
  44. 44. return false๏ Do you know whats happening?๏ event.preventDefault()๏ event.stopPropagation()
  45. 45. Get to know this$(a).click(function (e) { e.preventDefault(); var href = $(this).attr(href); // do the magic amazingMagic(href);});
  46. 46. Get to know this$(a).click(function (e) { e.preventDefault(); var href = this.href; // do the magic amazingMagic(href);});
  47. 47. Poorly designed plugins
  48. 48. $.fn.myplugin = function () {  var me = $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });  return me;};
  49. 49. $.fn.myplugin = function () {  var me = $(this).each(fn);  return me;};
  50. 50. $.fn.myplugin = function () {  return $(this).each(fn);};
  51. 51. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  52. 52. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  53. 53. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  54. 54. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  55. 55. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  56. 56. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  57. 57. $.fn.myplugin = function () { return this.bind(someEvent, function () {  // does something  });};
  58. 58. (function ($) { $.fn.myplugin = function () {   return this.bind(someEvent, function () {    // does something  }); };})(jQuery);
  59. 59. Questions?@remremy@leftlogic.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×