jQuery: out with the old, in with the new
-
Upload
remy-sharp -
Category
Technology
-
view
1.755 -
download
0
Transcript of jQuery: out with the old, in with the new
![Page 1: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/1.jpg)
jQueryIn with the new, out with the old.
![Page 2: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/2.jpg)
Agenda๏Understanding jQuery๏What's new & interesting๏Where you don't need it
![Page 3: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/3.jpg)
Grokking jQuery
![Page 4: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/4.jpg)
DOM library
![Page 5: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/5.jpg)
$('div').append(html).click(doStuff);
![Page 6: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/6.jpg)
$('div').append(html).click(doStuff);
Just a CSS selector
![Page 7: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/7.jpg)
$('div').append(html).click(doStuff);
![Page 8: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/8.jpg)
$('div').append(html).click(doStuff);
![Page 9: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/9.jpg)
if ( $('foo') ) { doAmazing();}
![Page 10: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/10.jpg)
1) $('foo')
2) $()
3) []
4) [].join(',') // works
![Page 11: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/11.jpg)
if ( $('foo') ) { doAmazing();}
![Page 12: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/12.jpg)
if ( $('foo').length ) { doAmazing();}
![Page 13: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/13.jpg)
If your jQuery code fails, and there's no error:
it's the selector
![Page 14: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/14.jpg)
DOM Navigation
![Page 15: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/15.jpg)
Find
Changes the collection
![Page 16: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/16.jpg)
Filter
Creates a subset
![Page 17: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/17.jpg)
Debugging
![Page 18: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/18.jpg)
![Page 19: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/19.jpg)
New Stuff
![Page 20: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/20.jpg)
Ajax changes& Deferreds
![Page 21: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/21.jpg)
$.get('foo.html', function (html) { $('#latest').append(html);});
var jqXHR = $.get('foo.html');
jqXHR.done(function (html) { $('#latest').append(html);});
![Page 22: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/22.jpg)
$.ajax({ url: 'foo.json', dataType: 'json', success: function () { // this === xhr }, error: function () { }});
![Page 23: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/23.jpg)
$.ajax({ url: 'foo.json', dataType: 'json', context: document.body, success: function () { // this === body element }, error: function () { }});
![Page 24: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/24.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
jqXHR.then(success, fail);
![Page 25: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/25.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
jqXHR.then(success, fail);
// much later in the code
jqXHR.done(success2);
![Page 26: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/26.jpg)
jqXHR is a promise
![Page 27: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/27.jpg)
![Page 28: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/28.jpg)
![Page 29: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/29.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
// much later in the code
jqXHR.done(success);
![Page 30: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/30.jpg)
.done(ok) // success
.fail(fail) // error
.always(fn) // complete
.then(ok, fail)
![Page 31: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/31.jpg)
var dfd = $.Deferred();
.resolve
.reject
.promise
![Page 32: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/32.jpg)
var jqXHR = $.ajax({ url: 'foo.json', dataType: 'json', context: document.body});
// much later in the code
jqXHR.done(success);
![Page 33: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/33.jpg)
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();}
![Page 34: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/34.jpg)
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();
save({ /* some data */ }) .done(function () { // show it's all good }) .fail(function (reason) { // shows reason });
![Page 35: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/35.jpg)
$.when
![Page 36: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/36.jpg)
$.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!');});
![Page 37: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/37.jpg)
$.sub()
![Page 38: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/38.jpg)
(function ($) { $ = $.sub(); // sandbox $.fn
$.fn.logger = function () { return this.each(function(){ console.log(this) }); }
// my code that uses .logger()})(jQuery);
// now: $.fn.logger === undefined
![Page 39: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/39.jpg)
(function ($) { $ = $.sub(); // sandbox $.fn
$.fn.logger = function () { return this.each(function(){ console.log(this) }); }
// my code that uses .logger()})(jQuery);
// now: $.fn.logger === undefined
![Page 40: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/40.jpg)
Doing it wrong
![Page 41: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/41.jpg)
.ready?...<!-- all my funky markup -->...<script>$(document).ready(function () { // add the extra funk});</script></body></html>
![Page 42: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/42.jpg)
.ready?...<!-- all my funky markup -->...<script>
// add the extra funk
</script></body></html>
![Page 43: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/43.jpg)
Add class...<!-- all my funky markup -->...<script>
$('#foo').addClass('amazing');
</script></body></html>
![Page 44: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/44.jpg)
Add class...<!-- all my funky markup -->...<script>
var f = document.getElementById('foo');foo.className += ' amazing';
</script></body></html>
![Page 45: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/45.jpg)
Effects vs. CSS๏If the browser can do it natively, let it do it natively.
๏No one lost business because IE didn't do a cross fade.
![Page 46: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/46.jpg)
return false
$('a').click(function () { // do the magic amazingMagic();
return false;});
![Page 47: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/47.jpg)
return false
๏Do you know what's happening?๏event.preventDefault()๏event.stopPropagation()
![Page 48: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/48.jpg)
Get to know this$('a').click(function (e) { e.preventDefault();
var href = $(this).attr('href'); // do the magic amazingMagic(href);});
![Page 49: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/49.jpg)
Get to know this$('a').click(function (e) { e.preventDefault();
var href = this.href; // do the magic amazingMagic(href);});
![Page 50: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/50.jpg)
Poorly designed plugins
![Page 51: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/51.jpg)
$.fn.myplugin = function () { var me = $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); });
return me;};
![Page 52: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/52.jpg)
$.fn.myplugin = function () { var me = $(this).each(fn);
return me;};
![Page 53: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/53.jpg)
$.fn.myplugin = function () { return $(this).each(fn);};
![Page 54: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/54.jpg)
$.fn.myplugin = function () { return $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 55: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/55.jpg)
$.fn.myplugin = function () { return $(this).each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 56: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/56.jpg)
$.fn.myplugin = function () { return this.each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 57: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/57.jpg)
$.fn.myplugin = function () { return this.each(function() { return $(this).bind('someEvent', function () { // does something }); });};
![Page 58: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/58.jpg)
$.fn.myplugin = function () { return this.each(function() { $(this).bind('someEvent', function () { // does something }); });};
![Page 59: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/59.jpg)
$.fn.myplugin = function () { return this.each(function() { $(this).bind('someEvent', function () { // does something }); });};
![Page 60: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/60.jpg)
$.fn.myplugin = function () { return this.bind('someEvent', function () { // does something });};
![Page 61: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/61.jpg)
(function ($) { $.fn.myplugin = function () { return this.bind('someEvent', function () { // does something }); };})(jQuery);
![Page 62: jQuery: out with the old, in with the new](https://reader033.fdocuments.in/reader033/viewer/2022052619/5558bdebd8b42aa52a8b5080/html5/thumbnails/62.jpg)
Questions?@[email protected]