jQuery secrets
Bastian Feder       WebTechCon 2010
lapistano@php.net    12th October 2010
Me, myself & I

 JavaScript since 2002
 PHP since 2001
 Opensource addict
   PHP manual translations
   FluentDOM
Utilities
Saving the state

 jQuery.data(element, key[, value])
   Store any kind of information
   on a DOM element
   Circular ref...
Removing the state

 jQuery.removeData(element[, key])
   Low level function use
   $().removeData([key])
   instead.
   R...
State example

 var logo = $('#jq-siteLogo');

 $(document).data('logo', logo);

 $(logo).detach();

 $('fieldset[class="t...
Extending for the good

  jQuery.extend([deep], target[, object1][, objectN])

var empty = {};
var defaults = {
    valida...
jQuery.props[]

 Register of translations
 Used by .attr()
  jQuery.props = {
     "for": "htmlFor",
     "class": "classN...
AJAX
Global AJAX settings

  jQuery.ajaxSetup( options )

$.ajaxSetup({
   url: "/xmlhttp/",
   username: "paul",
   passwort: ...
Global AJAX settings                (II)


 Methods to set properties defined by $.ajax()
 Examples:
   $.ajaxSuccess()
  ...
Shortcuts

 jQuery.get(url, [data],
   [callback(data, textStatus, XHR)], [dataType])
 jQuery.post(url, [data],
   [succes...
Shortcuts        (II)


 jQuery.getJSON(
   url,[data ],[callback(data, textStatus)])
 jQuery.getScript(
   url,[success(d...
Events
Event binding

  .bind(type[, data], handler(event))
    'type' might also be an object

$('.clickable').bind({
  'click':...
Namespaces

$('.clickable').bind('click.namespace', function(e){});

$('.clickable').bind({
  'click.namespace': function(...
Selfdefined speeding

$.extend(jQuery.fx.speeds, {
   slow: 600,
   fast: 200,
   // Default speed
   _default: 400
},
{
 ...
Extending
 jQuery
jQuery plugins

  jQuery.error( message )

jQuery.error = function( message, errorcode ) {
  var error = [];
  error[msg] ...
jQuery UI

$.extend('ui.autosuggest.prototype, {
  _search: function( value ) {
    // always save the actual value,
    /...
License

 This set of slides and the source code included
  in the download package is licensed under the

 Creative Commo...
Upcoming SlideShare
Loading in...5
×

jQuery's Secrets

5,006

Published on

jQuery is one of the most used javaScript frameworks. It provides almost every feature a modern framework should give you (e.g. like easy extentability). This talk will not be about these obvious features, but it goes for the not so exposed features, like jQuery.data(). It give you a detail tour how these function works and why they might be handy.

Published in: Technology, Business
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,006
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

jQuery's Secrets

  1. 1. jQuery secrets Bastian Feder WebTechCon 2010 lapistano@php.net 12th October 2010
  2. 2. Me, myself & I JavaScript since 2002 PHP since 2001 Opensource addict PHP manual translations FluentDOM
  3. 3. Utilities
  4. 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. 5. Removing the state jQuery.removeData(element[, key]) Low level function use $().removeData([key]) instead. Removes all data if no key is passed.
  6. 6. State example var logo = $('#jq-siteLogo'); $(document).data('logo', logo); $(logo).detach(); $('fieldset[class="toc"]') .before($(document).data('logo')); $(document).removeData('logo');
  7. 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. 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. 9. AJAX
  10. 10. Global AJAX settings jQuery.ajaxSetup( options ) $.ajaxSetup({ url: "/xmlhttp/", username: "paul", passwort: "secret" }); $.ajax({ data: myData });
  11. 11. Global AJAX settings (II) Methods to set properties defined by $.ajax() Examples: $.ajaxSuccess() $.ajaxError() …
  12. 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. 13. Shortcuts (II) jQuery.getJSON( url,[data ],[callback(data, textStatus)]) jQuery.getScript( url,[success(data, textStatus)])
  14. 14. Events
  15. 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. 16. Namespaces $('.clickable').bind('click.namespace', function(e){}); $('.clickable').bind({ 'click.namespace': function(event) { //callback }, 'mousedown.namespace': function(event) { //callback } }); $('.clickable').unbind('.namespace');
  17. 17. Selfdefined speeding $.extend(jQuery.fx.speeds, { slow: 600, fast: 200, // Default speed _default: 400 }, { slowmotion: 100, }); $('#clickme').click(function() { $('#book').fadeIn('slowmotion'); });
  18. 18. Extending jQuery
  19. 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. 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. 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

×