jQuery's Secrets

7,060 views

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

jQuery's Secrets

  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

×