Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
jQuery: out with the old, in with the new
jQuery: out with the old, in with the new
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery: out with the old, in with the new

1,759

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,759
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQueryIn with the new,out with the old.
  • 2. Agenda๏ Understanding jQuery๏ Whats new & interesting๏ Where you dont need it
  • 3. GrokkingjQuery
  • 4. DOM library
  • 5. $(div).append(html).click(doStuff);
  • 6. Just a CSS selector$(div).append(html).click(doStuff);
  • 7. $(div).append(html).click(doStuff);
  • 8. $(div).append(html).click(doStuff);
  • 9. if ( $(foo) ) { doAmazing();}
  • 10. 1) $(foo)2) $()3) []4) [].join(,) // works
  • 11. if ( $(foo) ) { doAmazing();}
  • 12. if ( $(foo).length ) { doAmazing();}
  • 13. If your jQuery code fails,and theres no error:its the selector
  • 14. DOM Navigation
  • 15. FindChanges the collection
  • 16. Filter Creates a subset
  • 17. Debugging
  • 18. NewStuff
  • 19. Ajax changes & Deferreds
  • 20. $.get(foo.html, function (html) {var jqXHR = $.get(foo.html); $(#latest).append(html);});jqXHR.done(function (html) { $(#latest).append(html);});
  • 21. $.ajax({ url: foo.json, dataType: json, success: function () { // this === xhr }, error: function () { }});
  • 22. $.ajax({ url: foo.json, dataType: json, context: document.body, success: function () { // this === body element }, error: function () { }});
  • 23. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);
  • 24. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});jqXHR.then(success, fail);// much later in the codejqXHR.done(success2);
  • 25. jqXHR is apromise
  • 26. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  • 27. .done(ok) // success.fail(fail) // error.always(fn) // complete.then(ok, fail)
  • 28. var dfd = $.Deferred(); .resolve .reject .promise
  • 29. var jqXHR = $.ajax({ url: foo.json, dataType: json, context: document.body});// much later in the codejqXHR.done(success);
  • 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. 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. $.when
  • 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. $.sub()
  • 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. (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. Doing itwrong
  • 38. .ready?...<!-- all my funky markup -->...<script>$(document).ready(function () { // add the extra funk});</script></body></html>
  • 39. .ready?...<!-- all my funky markup -->...<script> // add the extra funk</script></body></html>
  • 40. Add class...<!-- all my funky markup -->...<script>$(#foo).addClass(amazing);</script></body></html>
  • 41. Add class...<!-- all my funky markup -->...<script>var f = document.getElementById(foo);foo.className += amazing;</script></body></html>
  • 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. return false$(a).click(function () { // do the magic amazingMagic(); return false;});
  • 44. return false๏ Do you know whats happening?๏ event.preventDefault()๏ event.stopPropagation()
  • 45. Get to know this$(a).click(function (e) { e.preventDefault(); var href = $(this).attr(href); // do the magic amazingMagic(href);});
  • 46. Get to know this$(a).click(function (e) { e.preventDefault(); var href = this.href; // do the magic amazingMagic(href);});
  • 47. Poorly designed plugins
  • 48. $.fn.myplugin = function () {  var me = $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });  return me;};
  • 49. $.fn.myplugin = function () {  var me = $(this).each(fn);  return me;};
  • 50. $.fn.myplugin = function () {  return $(this).each(fn);};
  • 51. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  • 52. $.fn.myplugin = function () {  return $(this).each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  • 53. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  • 54. $.fn.myplugin = function () {  return this.each(function() {    return $(this).bind(someEvent, function () {      // does something    });  });};
  • 55. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  • 56. $.fn.myplugin = function () {  return this.each(function() {    $(this).bind(someEvent, function () {      // does something    });  });};
  • 57. $.fn.myplugin = function () { return this.bind(someEvent, function () {  // does something  });};
  • 58. (function ($) { $.fn.myplugin = function () {   return this.bind(someEvent, function () {    // does something  }); };})(jQuery);
  • 59. Questions?@remremy@leftlogic.com

×