1. Bastian Feder | Liip Ag
jQuery secrets

2. jQuery secrets
Bastian Feder IPC Spring 2011 Berlin
lapistano@php.net 31th May 2011

3. Me, myself & I
JavaScript since 2002
PHP since 2001
Opensource addict
PHP manual translations
FluentDOM

4. Utilities

5. Saving the state
jQuery.data(element, key[, value])
Store any kind of information
on a DOM element
Circular references avoided
Low level function use
$().data() instead.

6. Saving possible?
jQuery.acceptData( element )
Low level function invoked by
$(elem).data()
Extend jQuery.noData to set
additional constraints
Does not raise an
error/exception

7. Removing the state
jQuery.removeData(element[, key])
Low level function use
$().removeData([key])
instead.
Removes all data if no key is
passed.

8. State example
var logo = $('#jq-siteLogo');
$(document).data('logo', logo);
$(logo).detach();
$('fieldset[class="toc"]')
.before($(document).data('logo'));
$(document).removeData('logo');

9. Extending for the good
jQuery.extend([deep], target[, object1][, objectN])
var defaults = {
validate: false,
limit: {max: 5, min: 1},
name: "foo"
};
var options = {
validate: true,
limit: {max:10}
};
var settings = $.extend(true, {}, defaults, options);

10. Extending for the good (II)
(function($, jQuery, undefined) {
jQuery.fn.myPlugin = function( options ) {
var options = $.extend(
{},
jQuery.fn.myPlugin.defaults,
Options
);
// put plugin code here //
}
jQuery.fn.myPlugin.defaults = {
'color': '#fff',
'myPublicMethod': function(){}
};
})(jQuery, jQuery);

11. jQuery.props[]
Register of translations
Used by .attr()
jQuery.props = {
"for" : "htmlFor",
"class" : "className",
"frameborder" : "frameBorder",
…
};
jQuery.props['uiwDiv'] =
'ui-jeopardysection-gameboard-header';

12. AJAX

13. Global AJAX settings
jQuery.ajaxSetup( options )
$.ajaxSetup({
url: "/xmlhttp/",
username: "paul",
passwort: "secret"
});
$.ajax({ data: myData });

14. Global AJAX settings (II)
Methods to set properties defined by $.ajax()
Examples:
$.ajaxSuccess()
$.ajaxError()
$.ajaxStart()
…

15. Shortcuts
.load(url,[data,]
[complete(responseText, textStatus, XHR)])
$('#ticker').load('http://liip.ch#entry1790');

16. Promises & Deferreds
Proposed by CommonJS
Since jQuery 1.5
var a1 = $.ajax('page1');
var a2 = $.ajax('page2');
$.when(a1, a2).then(
function() { alert('Called when request successful!'),
function() { alert('Called, when request failed.')
}

17. Events

18. Event binding
.bind(type[, data], handler(event))
'type' might also be an object
$('.clickable').bind({
'click': function(event) { //callback },
'mousedown': function(event) { //callback }
});

19. Namespaces
$('.clickable').bind('click.namespace', function(e){});
$('.clickable').bind({
'click.namespace': function(event) { //callback },
'mousedown.namespace': function(event) { //callback }
});
$('.clickable').unbind('.namespace');

20. „global“ Events
ajaxStart
ajaxStop
$('#indicator')
.bind({
'ajaxStart.ajaxindicator': function() {
// show tumble image
},
'ajaxStop.ajaxindicator': function() {
// hide tumble image
}
});

21. Selfdefined speeding
$.extend(jQuery.fx.speeds, {
slow: 600,
fast: 200,
// Default speed
_default: 400
},
{
slowmotion: 100,
});
$('#clickme').click(function() {
$('#book').fadeIn('slowmotion');
});

22. Extending
jQuery

23. jQuery plugins
jQuery.error( msg )
jQuery.error = function( msg, code ) {
var error = [];
error[msg] = message;
error['code'] = $errorcode;
if (typeof console != undefined) {
console.error(error)
}
throw msg;
}

24. jQuery UI
$.extend('ui.autosuggest.prototype, {
_search: function( value ) {
// always save the actual value,
// not the one passed as an argument
this.term = this.element
.addClass( "ui-autocomplete-loading"
.val();
this.source( { term: value }, this.response );
});

25. Sizzle.selectors
jQuery.expr.filters
jQuery.expr[':']
$.extend(
$.expr.filters,
{
"myPseudoSelector": function( node, index, match ) {
// return true, if s.th. Was selected
// return false, if not.
}
});

26. Book recommendation
Jakob Westhoff
http://westhoffswelt.de
ISBN:
978-3-86802-052-6
E-Book-ISBN:
978-3-86802-237-7

27. Feedback, pls
Joind.in
http://joind.in/talk/view/3511
Slides
http://slideshare.net/lapistano
Email
lapstano@php.net
IRC on freenode
lapistano

28. License
This set of slides and the source code included
in the download package is licensed under the
Creative Commons Attribution-
Noncommercial-Share Alike 2.0 Generic
License
http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en