Downloaded 23 times
![1) $('foo')
2) $()
3) []
4) [].join(',') // works](https://image.slidesharecdn.com/out-with-the-old-110609085447-phpapp01/75/jQuery-out-with-the-old-in-with-the-new-10-2048.jpg)
![$.when
var $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!');
});](https://image.slidesharecdn.com/out-with-the-old-110609085447-phpapp01/75/jQuery-out-with-the-old-in-with-the-new-36-2048.jpg)
Uploaded byRemy Sharp
jQuery: out with the old, in with the new
This document provides an overview and introduction to jQuery. It discusses understanding jQuery and its core functionality as a DOM library. It covers selecting elements, DOM navigation/filtering, debugging selectors, new features like deferreds/promises in jQuery's Ajax functionality. It also discusses best practices like letting the browser handle effects natively when possible, proper use of document ready, and designing well-behaved jQuery plugins.
More Related Content
Similar to jQuery: out with the old, in with the new
![[Coscup 2012] JavascriptMVC](https://cdn.slidesharecdn.com/ss_thumbnails/coscupjavascriptmvc-120818115356-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
jQuery: out with the old, in with the new
- 1. jQuery In with thenew, out with the old.
- 2. Agenda ๏ Understanding jQuery ๏What's new & interesting ๏ Where you don't need it
- 3.
- 4.
- 5.
- 6. Just a CSSselector $('div').append(html).click(doStuff);
- 7.
- 8.
- 9. if ( $('foo')) { doAmazing(); }
- 10. 1) $('foo') 2) $() 3)[] 4) [].join(',') // works
- 11. if ( $('foo')) { doAmazing(); }
- 12. if ( $('foo').length) { doAmazing(); }
- 13. If your jQuerycode fails, and there's no error: it's the selector
- 14.
- 15.
- 16. Filter Creates asubset
- 17.
- 19.
- 20. Ajax changes & Deferreds
- 21. $.get('foo.html', function (html){ var jqXHR = $.get('foo.html'); $('#latest').append(html); }); jqXHR.done(function (html) { $('#latest').append(html); });
- 22. $.ajax({ url:'foo.json', dataType: 'json', success: function () { // this === xhr }, error: function () { } });
- 23. $.ajax({ url:'foo.json', dataType: 'json', context: document.body, success: function () { // this === body element }, error: function () { } });
- 24. var jqXHR =$.ajax({ url: 'foo.json', dataType: 'json', context: document.body }); jqXHR.then(success, fail);
- 25. var jqXHR =$.ajax({ url: 'foo.json', dataType: 'json', context: document.body }); jqXHR.then(success, fail); // much later in the code jqXHR.done(success2);
- 26.
- 29. var jqXHR =$.ajax({ url: 'foo.json', dataType: 'json', context: document.body }); // much later in the code jqXHR.done(success);
- 30. .done(ok) // success .fail(fail) // error .always(fn) // complete .then(ok, fail)
- 31. var dfd =$.Deferred(); .resolve .reject .promise
- 32. var jqXHR =$.ajax({ url: 'foo.json', dataType: 'json', context: document.body }); // much later in the code jqXHR.done(success);
- 33. 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(); }
- 34. nction save(data) { vardfd = new $.Deferred(); // some validation done... if (!valid) { save({ /* some data */ }) dfd.reject(reason); .done(function () { } else { // show it's all good $.ajax({ }) url: '/app/save', data: data, .fail(function (reason) { success: dfd.resolve, // shows reason error: dfd.reject }); }); } return dfd.promise();
- 35.
- 36. $.when var $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!'); });
- 37.
- 38. (function ($) { $ = $.sub(); // sandbox $.fn $.fn.logger = function () { return this.each(function(){ console.log(this) }); } // my code that uses .logger() })(jQuery); // now: $.fn.logger === undefined
- 39. (function ($) { $ = $.sub(); // sandbox $.fn $.fn.logger = function () { return this.each(function(){ console.log(this) }); } // my code that uses .logger() })(jQuery); // now: $.fn.logger === undefined
- 40.
- 41. .ready? ... <!-- all myfunky markup --> ... <script> $(document).ready(function () { // add the extra funk }); </script> </body> </html>
- 42. .ready? ... <!-- all myfunky markup --> ... <script> // add the extra funk </script> </body> </html>
- 43. Add class ... <!-- allmy funky markup --> ... <script> $('#foo').addClass('amazing'); </script> </body> </html>
- 44. Add class ... <!-- allmy funky markup --> ... <script> var f = document.getElementById('foo'); foo.className += ' amazing'; </script> </body> </html>
- 45. Effects vs. CSS ๏Ifthe browser can do it natively, let it do it natively. ๏ Noone lost business because IE didn't do a cross fade.
- 46. return false $('a').click(function (){ // do the magic amazingMagic(); return false; });
- 47. return false ๏ Doyou know what's happening? ๏ event.preventDefault() ๏ event.stopPropagation()
- 48. Get to knowthis $('a').click(function (e) { e.preventDefault(); var href = $(this).attr('href'); // do the magic amazingMagic(href); });
- 49. Get to knowthis $('a').click(function (e) { e.preventDefault(); var href = this.href; // do the magic amazingMagic(href); });
- 50.
- 51. $.fn.myplugin = function() { var me = $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); }); return me; };
- 52. $.fn.myplugin = function() { var me = $(this).each(fn); return me; };
- 53. $.fn.myplugin = function() { return $(this).each(fn); };
- 54. $.fn.myplugin = function() { return $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); }); };
- 55. $.fn.myplugin = function() { return $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); }); };
- 56. $.fn.myplugin = function() { return this.each(function() { return $(this).bind('someEvent', function () { // does something }); }); };
- 57. $.fn.myplugin = function() { return this.each(function() { return $(this).bind('someEvent', function () { // does something }); }); };
- 58. $.fn.myplugin = function() { return this.each(function() { $(this).bind('someEvent', function () { // does something }); }); };
- 59. $.fn.myplugin = function() { return this.each(function() { $(this).bind('someEvent', function () { // does something }); }); };
- 60. $.fn.myplugin = function() { return this.bind('someEvent', function () { // does something }); };
- 61. (function ($) { $.fn.myplugin = function () { return this.bind('someEvent', function () { // does something }); }; })(jQuery);
- 62.