This document summarizes jQuery secrets including: 1. Utilities for saving and removing state from DOM elements using jQuery.data() and jQuery.removeData(). 2. Global AJAX settings that can be modified using jQuery.ajaxSetup(). 3. Shortcuts for AJAX calls like jQuery.get(), jQuery.post(), and jQuery.load(). 4. Methods for binding and namespacing events, and extending animation speeds.

1. jQuery secrets
Bastian Feder WebTechCon 2010
lapistano@php.net 12th October 2010

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

3. Utilities

4. 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.

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

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

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

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

9. AJAX

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

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

12. Shortcuts
jQuery.get(url, [data],
[callback(data, textStatus, XHR)], [dataType])
jQuery.post(url, [data],
[success(data, textStatus, XHR)], [dataType])
.load(url,[data],
[complete(responseText, textStatus, XHR)])

13. Shortcuts (II)
jQuery.getJSON(
url,[data ],[callback(data, textStatus)])
jQuery.getScript(
url,[success(data, textStatus)])

14. Events

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

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

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

18. Extending
jQuery

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

20. 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 );
});

21. 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