Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

jQuery's Secrets

7.268 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie, Business
  • Als Erste(r) kommentieren

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

×