More Related Content Similar to Understanding jQuery and New Features Similar to Understanding jQuery and New Features (20) More from Remy Sharp (14) Understanding jQuery and New Features6. Just a CSS selector
$('div').append(html).click(doStuff);
13. If your jQuery code fails,
and there's no error:
it's the selector
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);
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) {
var dfd = 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();
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!');
});
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
41. .ready?
...
<!-- all my funky markup -->
...
<script>
$(document).ready(function () {
// add the extra funk
});
</script>
</body>
</html>
43. Add class
...
<!-- all my funky markup -->
...
<script>
$('#foo').addClass('amazing');
</script>
</body>
</html>
44. Add class
...
<!-- all my 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.
47. return false
๏ Do you know what's happening?
๏ event.preventDefault()
๏ event.stopPropagation()
48. Get to know this
$('a').click(function (e) {
e.preventDefault();
var href = $(this).attr('href');
// do the magic
amazingMagic(href);
});
49. Get to know this
$('a').click(function (e) {
e.preventDefault();
var href = this.href;
// do the magic
amazingMagic(href);
});
51. $.fn.myplugin = function () {
var me = $(this).each(function() {
return $(this).bind('someEvent', function () {
// does something
});
});
return me;
};
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
});
});
};
61. (function ($) {
$.fn.myplugin = function () {
return this.bind('someEvent', function () {
// does something
});
};
})(jQuery);