SlideShare ist ein Scribd-Unternehmen logo
1 von 28
Downloaden Sie, um offline zu lesen
Bastian Feder | Liip Ag


jQuery secrets
jQuery secrets
Bastian Feder       IPC Spring 2011 Berlin
lapistano@php.net           31th May 2011
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 references avoided
   Low level function use
   $().data() instead.
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
Removing the state

 jQuery.removeData(element[, key])
   Low level function use
   $().removeData([key])
   instead.
   Removes all data if no key is
   passed.
State example

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

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

 $(logo).detach();

 $('fieldset[class="toc"]')
   .before($(document).data('logo'));

 $(document).removeData('logo');
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);
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);
jQuery.props[]

 Register of translations
 Used by .attr()
  jQuery.props = {
     "for"         : "htmlFor",
     "class"       : "className",
     "frameborder" : "frameBorder",
     …
  };

  jQuery.props['uiwDiv'] =
      'ui-jeopardysection-gameboard-header';
AJAX
Global AJAX settings

  jQuery.ajaxSetup( options )

$.ajaxSetup({
   url: "/xmlhttp/",
   username: "paul",
   passwort: "secret"

});
$.ajax({ data: myData });
Global AJAX settings                (II)


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

  .load(url,[data,]
     [complete(responseText, textStatus, XHR)])

$('#ticker').load('http://liip.ch#entry1790');
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.')
}
Events
Event binding

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

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

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

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

$('.clickable').unbind('.namespace');
„global“ Events

  ajaxStart
  ajaxStop

$('#indicator')
  .bind({
    'ajaxStart.ajaxindicator': function() {
       // show tumble image
    },
    'ajaxStop.ajaxindicator': function() {
       // hide tumble image
    }
});
Selfdefined speeding

$.extend(jQuery.fx.speeds, {
   slow: 600,
   fast: 200,
   // Default speed
   _default: 400
},
{
   slowmotion: 100,
});

$('#clickme').click(function() {
  $('#book').fadeIn('slowmotion');
});
Extending
 jQuery
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;
}
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 );
});
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.
     }
   });
Book recommendation

             Jakob Westhoff
             http://westhoffswelt.de
             ISBN:
             978-3-86802-052-6
             E-Book-ISBN:
             978-3-86802-237-7
Feedback, pls

 Joind.in
 http://joind.in/talk/view/3511
 Slides
 http://slideshare.net/lapistano
 Email
 lapstano@php.net
 IRC on freenode
 lapistano
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

Más contenido relacionado

Was ist angesagt?

The History of PHPersistence
The History of PHPersistenceThe History of PHPersistence
The History of PHPersistenceHugo Hamon
 
The Origin of Lithium
The Origin of LithiumThe Origin of Lithium
The Origin of LithiumNate Abele
 
Lithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate FrameworksLithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate FrameworksNate Abele
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologyDaniel Knell
 
Design Patterns in PHP5
Design Patterns in PHP5 Design Patterns in PHP5
Design Patterns in PHP5 Wildan Maulana
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICKonstantin Kudryashov
 
The Zen of Lithium
The Zen of LithiumThe Zen of Lithium
The Zen of LithiumNate Abele
 
PhpUnit - The most unknown Parts
PhpUnit - The most unknown PartsPhpUnit - The most unknown Parts
PhpUnit - The most unknown PartsBastian Feder
 
Design how your objects talk through mocking
Design how your objects talk through mockingDesign how your objects talk through mocking
Design how your objects talk through mockingKonstantin Kudryashov
 
Silex meets SOAP & REST
Silex meets SOAP & RESTSilex meets SOAP & REST
Silex meets SOAP & RESTHugo Hamon
 
Crafting beautiful software
Crafting beautiful softwareCrafting beautiful software
Crafting beautiful softwareJorn Oomen
 
Mocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnitMocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnitmfrost503
 
Php unit the-mostunknownparts
Php unit the-mostunknownpartsPhp unit the-mostunknownparts
Php unit the-mostunknownpartsBastian Feder
 
Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Fabien Potencier
 
Doctrine fixtures
Doctrine fixturesDoctrine fixtures
Doctrine fixturesBill Chang
 
Dependency Injection IPC 201
Dependency Injection IPC 201Dependency Injection IPC 201
Dependency Injection IPC 201Fabien Potencier
 

Was ist angesagt? (19)

The History of PHPersistence
The History of PHPersistenceThe History of PHPersistence
The History of PHPersistence
 
The Origin of Lithium
The Origin of LithiumThe Origin of Lithium
The Origin of Lithium
 
Lithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate FrameworksLithium: The Framework for People Who Hate Frameworks
Lithium: The Framework for People Who Hate Frameworks
 
Quebec pdo
Quebec pdoQuebec pdo
Quebec pdo
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
 
Design Patterns in PHP5
Design Patterns in PHP5 Design Patterns in PHP5
Design Patterns in PHP5
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
 
The Zen of Lithium
The Zen of LithiumThe Zen of Lithium
The Zen of Lithium
 
PhpUnit - The most unknown Parts
PhpUnit - The most unknown PartsPhpUnit - The most unknown Parts
PhpUnit - The most unknown Parts
 
Unittests für Dummies
Unittests für DummiesUnittests für Dummies
Unittests für Dummies
 
Design how your objects talk through mocking
Design how your objects talk through mockingDesign how your objects talk through mocking
Design how your objects talk through mocking
 
Silex meets SOAP & REST
Silex meets SOAP & RESTSilex meets SOAP & REST
Silex meets SOAP & REST
 
Crafting beautiful software
Crafting beautiful softwareCrafting beautiful software
Crafting beautiful software
 
Mocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnitMocking Dependencies in PHPUnit
Mocking Dependencies in PHPUnit
 
Php unit the-mostunknownparts
Php unit the-mostunknownpartsPhp unit the-mostunknownparts
Php unit the-mostunknownparts
 
Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2Unit and Functional Testing with Symfony2
Unit and Functional Testing with Symfony2
 
Doctrine fixtures
Doctrine fixturesDoctrine fixtures
Doctrine fixtures
 
Dependency Injection IPC 201
Dependency Injection IPC 201Dependency Injection IPC 201
Dependency Injection IPC 201
 
Mocking Demystified
Mocking DemystifiedMocking Demystified
Mocking Demystified
 

Andere mochten auch

international PHP2011_Kore Nordmann_Designing multilingual applications
international PHP2011_Kore Nordmann_Designing multilingual applications international PHP2011_Kore Nordmann_Designing multilingual applications
international PHP2011_Kore Nordmann_Designing multilingual applications smueller_sandsmedia
 
international PHP2011_Jordi Boggiano_PHP Reset
international PHP2011_Jordi Boggiano_PHP Resetinternational PHP2011_Jordi Boggiano_PHP Reset
international PHP2011_Jordi Boggiano_PHP Resetsmueller_sandsmedia
 
international PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHPinternational PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHPsmueller_sandsmedia
 
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"smueller_sandsmedia
 
international PHP2011_Bastian Hofmann_Mashing up java script
international PHP2011_Bastian Hofmann_Mashing up java scriptinternational PHP2011_Bastian Hofmann_Mashing up java script
international PHP2011_Bastian Hofmann_Mashing up java scriptsmueller_sandsmedia
 
international PHP2011_Bastian Feder_The most unknown Parts of PHPUnit
international PHP2011_Bastian Feder_The most unknown Parts of PHPUnitinternational PHP2011_Bastian Feder_The most unknown Parts of PHPUnit
international PHP2011_Bastian Feder_The most unknown Parts of PHPUnitsmueller_sandsmedia
 
webinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnen
webinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnenwebinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnen
webinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnensmueller_sandsmedia
 

Andere mochten auch (8)

international PHP2011_Kore Nordmann_Designing multilingual applications
international PHP2011_Kore Nordmann_Designing multilingual applications international PHP2011_Kore Nordmann_Designing multilingual applications
international PHP2011_Kore Nordmann_Designing multilingual applications
 
international PHP2011_Jordi Boggiano_PHP Reset
international PHP2011_Jordi Boggiano_PHP Resetinternational PHP2011_Jordi Boggiano_PHP Reset
international PHP2011_Jordi Boggiano_PHP Reset
 
Golf
GolfGolf
Golf
 
international PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHPinternational PHP2011_ilia alshanetsky_Hidden Features of PHP
international PHP2011_ilia alshanetsky_Hidden Features of PHP
 
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
 
international PHP2011_Bastian Hofmann_Mashing up java script
international PHP2011_Bastian Hofmann_Mashing up java scriptinternational PHP2011_Bastian Hofmann_Mashing up java script
international PHP2011_Bastian Hofmann_Mashing up java script
 
international PHP2011_Bastian Feder_The most unknown Parts of PHPUnit
international PHP2011_Bastian Feder_The most unknown Parts of PHPUnitinternational PHP2011_Bastian Feder_The most unknown Parts of PHPUnit
international PHP2011_Bastian Feder_The most unknown Parts of PHPUnit
 
webinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnen
webinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnenwebinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnen
webinale2011_Kai Radusch_Landingpage-Optimierung für Adwords-Kampagnen
 

Ähnlich wie international PHP2011_Bastian Feder_jQuery's Secrets

Ähnlich wie international PHP2011_Bastian Feder_jQuery's Secrets (20)

jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
jQuery's Secrets
jQuery's SecretsjQuery's Secrets
jQuery's Secrets
 
J query training
J query trainingJ query training
J query training
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
Virtual Madness @ Etsy
Virtual Madness @ EtsyVirtual Madness @ Etsy
Virtual Madness @ Etsy
 
Building Large jQuery Applications
Building Large jQuery ApplicationsBuilding Large jQuery Applications
Building Large jQuery Applications
 
jQuery
jQueryjQuery
jQuery
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
 
Taming that client side mess with Backbone.js
Taming that client side mess with Backbone.jsTaming that client side mess with Backbone.js
Taming that client side mess with Backbone.js
 
Hooks WCSD12
Hooks WCSD12Hooks WCSD12
Hooks WCSD12
 
jQuery, CSS3 and ColdFusion
jQuery, CSS3 and ColdFusionjQuery, CSS3 and ColdFusion
jQuery, CSS3 and ColdFusion
 
WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015WordPress Realtime - WordCamp São Paulo 2015
WordPress Realtime - WordCamp São Paulo 2015
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
jQuery
jQueryjQuery
jQuery
 
Jquery optimization-tips
Jquery optimization-tipsJquery optimization-tips
Jquery optimization-tips
 
JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
Separation of concerns - DPC12
Separation of concerns - DPC12Separation of concerns - DPC12
Separation of concerns - DPC12
 

Mehr von smueller_sandsmedia

webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...smueller_sandsmedia
 
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekteninternational PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projektensmueller_sandsmedia
 
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...smueller_sandsmedia
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5smueller_sandsmedia
 
international PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHPinternational PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHPsmueller_sandsmedia
 
webinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummieswebinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummiessmueller_sandsmedia
 

Mehr von smueller_sandsmedia (6)

webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
webinale 2011_Gabriel Yoran_Der Schlüssel zum erfolg: Besser aussehen, als ma...
 
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekteninternational PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
international PHP2011_Henning Wolf_ Mit Retrospektivenzu erfolgreichen Projekten
 
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
international PHP2011_Kore Nordmann_Tobias Schlitt_Modular Application Archit...
 
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
 
international PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHPinternational PHP2011_J.Hartmann_DevOps für PHP
international PHP2011_J.Hartmann_DevOps für PHP
 
webinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummieswebinale2011_Daniel Höpfner_Förderprogramme für dummies
webinale2011_Daniel Höpfner_Förderprogramme für dummies
 

Último

My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 

Último (20)

My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 

international PHP2011_Bastian Feder_jQuery's Secrets

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