StarTechConf 2011                          jQuery(#knowledge)                            .appendTo(#you);                 ...
StarTechConf 2011                           Who am I?                          ¿Quién soy? @mikehostetlerTuesday, December...
StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
StarTechConf 2011                          http://learn.appendto.com @mikehostetlerTuesday, December 6, 11
StarTechConf 2011                          The jQuery Project                          El proyecto jQuery @mikehostetlerTu...
StarTechConf 2011                                jQuery Project - jquery.org                             (Software Freedom...
StarTechConf 2011                                             Using	  jQuery   ‣ jquery.com           Downloading / Descar...
StarTechConf 2011                           Including jQuery                          Incluyendo jQuery @mikehostetlerTues...
StarTechConf 2011                          http://jquery.com/download   https://github.com/jquery/jquery                  ...
StarTechConf 2011                                    Source                          Minified @mikehostetlerTuesday, Decemb...
StarTechConf 2011                          Add the <script> tags ...      <!DocType HTML>      <html>        <head>       ...
StarTechConf 2011                           Your first jQuery                          Su primera jQuery @mikehostetlerTues...
StarTechConf 2011        jQuery Function / Función de jQuery      jQuery( );      // That’s it @mikehostetlerTuesday, Dece...
StarTechConf 2011                             The $      // $ is an allowed variable in JavaScript      window.jQuery = wi...
StarTechConf 2011                           Finding Something                          Para encontrar algo @mikehostetlerT...
StarTechConf 2011                          Finding	  Something      // Select By ID / Selección por ID      <div id=”foo”>...
StarTechConf 2011                          Finding	  Something      // Select by class / Selección por ‘class’      <div c...
StarTechConf 2011                          Finding	  Something      // Select by tag / Selección por ‘tag’      <ul>      ...
StarTechConf 2011                          Finding	  Something	  in	  Context                          Encontrar	  algo	  ...
StarTechConf 2011                          Do Something                           Hacer algo @mikehostetlerTuesday, Decemb...
StarTechConf 2011                          Do	  Something      <p>One</p>      <p>Two</p>      <p>Three</p>      // Find S...
StarTechConf 2011                          Showing	  and	  Hiding      // HTML      <p>One</p>      <p>Two</p>      <p>Thr...
StarTechConf 2011                          Showing	  and	  Hiding      // HTML      <p>One</p>      <p>Two</p>      <p>Thr...
StarTechConf 2011                          Iteration	  /	  Iteración      <p>One</p>      <p>Two</p>      <p>Three</p>    ...
StarTechConf 2011                          Iteration	  /	  Iteración      <p>One</p>      <p>Two</p>      <p>Three</p>    ...
StarTechConf 2011                          Iteration	  /	  Iteración      <p>One</p>      <p>Two</p>      <p>Three</p>    ...
StarTechConf 2011                                    Styling      // HTML      <p>One</p>      <p class=”foo”>Two</p>     ...
StarTechConf 2011                                    Styling      // HTML      <p class=”enabled”>One</p>      <p class=”e...
StarTechConf 2011                                    Styling      // HTML      <p class=”enabled”>One</p>      <p class=”e...
StarTechConf 2011                                    Styling      // HTML      <p class=”enabled foo”>One</p>      <p clas...
StarTechConf 2011                   Method Chaining              Encadenamiento de métodos @mikehostetlerTuesday, December...
StarTechConf 2011                          Method	  Chaining      // Good / Bueno      $(‘tr:odd’).addClass(‘odd’).find(‘td...
StarTechConf 2011                          Method	  Chaining      $(‘tr’)       .filter(‘:odd’)         .addClass(‘odd’)   ...
StarTechConf 2011                           DOM Manipulation                          Manipulación del DOM @mikehostetlerT...
StarTechConf 2011   Creating	  Elements	  /	  Creación	  de	  elementos      $("<div/>", {       class: "test",       text...
StarTechConf 2011          Inserting	  Elements	  /	  Insertar	  elementos      // Before / Antes      <p>Apple</p>      <...
StarTechConf 2011          Inserting	  Elements	  /	  Insertar	  elementos      // Before / Antes      <p id=”apple”>Apple...
StarTechConf 2011     Removing	  Elements	  /	  Remover	  elementos      // Before / Antes      <div>       <p>Red</p>    ...
StarTechConf 2011      Wrapping	  Elements	  /	  Envolver	  elementos      // Before / Antes      <p>Hello world</p>      ...
StarTechConf 2011                          Unwrapping	  Elements      // Before / Antes      <div><p>Hello world</p></div>...
StarTechConf 2011        Binding Events / Definir Eventos @mikehostetlerTuesday, December 6, 11
StarTechConf 2011                          Click	  Event	  /	  Evento	  de	  Clic      // HTML      <p>One</p>      <p>Two...
StarTechConf 2011                          Click	  Event	  /	  Evento	  de	  Clic      // HTML      <p>One</p>      <p sty...
StarTechConf 2011           Hover	  Pseudo	  Event	  /	  Evento	  de	  Hover	        // HTML      <p>One</p>      <p>Two</...
StarTechConf 2011            Binding	  &	  Unbinding	  /	  Definir	  &	  liberar      // HTML      <p>One</p>      <p>Two</...
StarTechConf 2011                          Binding	  Events	  with	  .bind()      // Binding an event / Definir Evento     ...
StarTechConf 2011                          Binding	  Events      // Bind an event to execute once /          Definar Evento...
StarTechConf 2011                          Ajax @mikehostetlerTuesday, December 6, 11
StarTechConf 2011                Making	  a	  Request	  /	  Hacer	  un	  pedido      $.get(‘page.php’, function(data) {   ...
StarTechConf 2011                          Making	  a	  Request	  with	  JSON	                             Hacer	  un	  pe...
StarTechConf 2011                          Making	  a	  Request	  JSON      // Response      { “names”: [“Jonathan”, “Mike...
StarTechConf 2011                          Writing Your First Plugin                          Escribe tu primer plugin @mi...
StarTechConf 2011                          Writing	  your	  first	  Plugin      // Function Namespace      $.fn      // Defi...
StarTechConf 2011           Plugins	  &	  Iteration	  /	  Plugins	  &	  Iteración      $.fn.elementCount = function() {   ...
StarTechConf 2011                          Plugins	  and	  Chaining      // Add support for chaining      $.fn.elementCoun...
StarTechConf 2011                          Plugins	  and	  Chaining      // Plugin is required to return this      $.fn.Sa...
StarTechConf 2011                          The Plugin Pattern                          El patrón de Plugin @mikehostetlerT...
StarTechConf 2011                          The	  Plugin	  Pattern      (function($) {        $.fn.SantiagoAMil = function(...
StarTechConf 2011                          The	  Plugin	  Pattern      (function($, undefined) {        $.fn.SantiagoAMil =...
StarTechConf 2011                          The	  Plugin	  Pattern      (function($) {        $.fn.SantiagoAMil = function(...
StarTechConf 2011                          The	  Plugin	  Pattern      (function($) {        $.fn.SantiagoAMil = function(...
StarTechConf 2011                               Thank You!                                ¡Gracias!                       ...
Upcoming SlideShare
Loading in...5
×

Mike hostetler - jQuery knowledge append to you

945

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
945
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mike hostetler - jQuery knowledge append to you

  1. 1. StarTechConf 2011 jQuery(#knowledge) .appendTo(#you); Mike Hostetler @mikehostetler http://mike-hostetler.com @mikehostetlerTuesday, December 6, 11
  2. 2. StarTechConf 2011 Who am I? ¿Quién soy? @mikehostetlerTuesday, December 6, 11
  3. 3. StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
  4. 4. StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
  5. 5. StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
  6. 6. StarTechConf 2011 http://learn.appendto.com @mikehostetlerTuesday, December 6, 11
  7. 7. StarTechConf 2011 The jQuery Project El proyecto jQuery @mikehostetlerTuesday, December 6, 11
  8. 8. StarTechConf 2011 jQuery Project - jquery.org (Software Freedom Conservancy) jQuery Core jQuery UI jquery.com jqueryUI.com jQuery Mobile QUnit jquerymobile.com qunitjs.com @mikehostetlerTuesday, December 6, 11
  9. 9. StarTechConf 2011 Using  jQuery ‣ jquery.com Downloading / Descargar ‣ api.jquery.com Documentation / Documentación ‣ forum.jquery.com Community / Comunidad ‣ meetups.jquery.com Local Community / Comunidad local ‣ plugins.jquery.com Extending / Extensión ‣ jqueryui.com Project Supported UI Library ‣ jquerymobile.com Project Supported Mobile Library @mikehostetlerTuesday, December 6, 11
  10. 10. StarTechConf 2011 Including jQuery Incluyendo jQuery @mikehostetlerTuesday, December 6, 11
  11. 11. StarTechConf 2011 http://jquery.com/download https://github.com/jquery/jquery or use a CDN ... @mikehostetlerTuesday, December 6, 11
  12. 12. StarTechConf 2011 Source Minified @mikehostetlerTuesday, December 6, 11
  13. 13. StarTechConf 2011 Add the <script> tags ... <!DocType HTML> <html> <head> .... </head> <body> .... <script src="http://code.jquery.com/jquery-1.7.min.js"></script> </body> </html> (Use http://html5boilerplate.com/) @mikehostetlerTuesday, December 6, 11
  14. 14. StarTechConf 2011 Your first jQuery Su primera jQuery @mikehostetlerTuesday, December 6, 11
  15. 15. StarTechConf 2011 jQuery Function / Función de jQuery jQuery( ); // That’s it @mikehostetlerTuesday, December 6, 11
  16. 16. StarTechConf 2011 The $ // $ is an allowed variable in JavaScript window.jQuery = window.$ = jQuery; $ === jQuery // TRUE @mikehostetlerTuesday, December 6, 11
  17. 17. StarTechConf 2011 Finding Something Para encontrar algo @mikehostetlerTuesday, December 6, 11
  18. 18. StarTechConf 2011 Finding  Something // Select By ID / Selección por ID <div id=”foo”></div> <div></div> $(‘#foo’); <div id=”foo”></div> <div></div> @mikehostetlerTuesday, December 6, 11
  19. 19. StarTechConf 2011 Finding  Something // Select by class / Selección por ‘class’ <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> $(‘.myClass’) <div class=”myClass foo bar”></div> <div class=”baz myClass”></div> <div class=”bar”></div> @mikehostetlerTuesday, December 6, 11
  20. 20. StarTechConf 2011 Finding  Something // Select by tag / Selección por ‘tag’ <ul> <li>Apple</li> <li>Pear</li> </ul> $(“li”); <ul> <li>Apple</li> <li>Pear</li> </ul> @mikehostetlerTuesday, December 6, 11
  21. 21. StarTechConf 2011 Finding  Something  in  Context Encontrar  algo  en  su  contexto ‣ Entire Document / Documento completo $(‘div’) ‣ Scope your selector / Ámbito de su selección $(‘selector’, <context>) $(‘#table’).find(‘selector’) ‣ $(‘a’).click(function() { $(‘span’, this)... }); @mikehostetlerTuesday, December 6, 11
  22. 22. StarTechConf 2011 Do Something Hacer algo @mikehostetlerTuesday, December 6, 11
  23. 23. StarTechConf 2011 Do  Something <p>One</p> <p>Two</p> <p>Three</p> // Find Something / Encontrar algo $(‘p’) // Do Something / Hacer algo $(‘p’).hide(); // Generic Syntax $(‘p’) . <Method Name> ( [PARAMETERS] ); @mikehostetlerTuesday, December 6, 11
  24. 24. StarTechConf 2011 Showing  and  Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements / Mostrar los elementos $(‘p’).show(); // Hide the elements / Ocultar los elementos $(‘p’).hide(); @mikehostetlerTuesday, December 6, 11
  25. 25. StarTechConf 2011 Showing  and  Hiding // HTML <p>One</p> <p>Two</p> <p>Three</p> // Show the elements / Mostrar los elementos $(‘p’).show(); // Hide the elements / Ocultar los elementos $(‘p’).hide(); @mikehostetlerTuesday, December 6, 11
  26. 26. StarTechConf 2011 Iteration  /  Iteración <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); @mikehostetlerTuesday, December 6, 11
  27. 27. StarTechConf 2011 Iteration  /  Iteración <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); @mikehostetlerTuesday, December 6, 11
  28. 28. StarTechConf 2011 Iteration  /  Iteración <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.floor( Math.random() * 1 ); if(rand > 1) { $(this).hide(); } }); @mikehostetlerTuesday, December 6, 11
  29. 29. StarTechConf 2011 Styling // HTML <p>One</p> <p class=”foo”>Two</p> <p>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); @mikehostetlerTuesday, December 6, 11
  30. 30. StarTechConf 2011 Styling // HTML <p class=”enabled”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); @mikehostetlerTuesday, December 6, 11
  31. 31. StarTechConf 2011 Styling // HTML <p class=”enabled”>One</p> <p class=”enabled”>Two</p> <p class=”enabled”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); @mikehostetlerTuesday, December 6, 11
  32. 32. StarTechConf 2011 Styling // HTML <p class=”enabled foo”>One</p> <p class=”enabled foo”>Two</p> <p class=”enabled foo”>Three</p> $(‘p’).addClass(‘enabled’); $(‘p’).removeClass(‘foo’); $(‘p’).toggleClass(‘foo’); @mikehostetlerTuesday, December 6, 11
  33. 33. StarTechConf 2011 Method Chaining Encadenamiento de métodos @mikehostetlerTuesday, December 6, 11
  34. 34. StarTechConf 2011 Method  Chaining // Good / Bueno $(‘tr:odd’).addClass(‘odd’).find(‘td.company’).addClass (‘companyName’); // Better / Mejor $(‘tr:odd’) .addClass(‘odd’) .find(‘td.company’) .addClass(‘companyName’) .end(); @mikehostetlerTuesday, December 6, 11
  35. 35. StarTechConf 2011 Method  Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); @mikehostetlerTuesday, December 6, 11
  36. 36. StarTechConf 2011 DOM Manipulation Manipulación del DOM @mikehostetlerTuesday, December 6, 11
  37. 37. StarTechConf 2011 Creating  Elements  /  Creación  de  elementos $("<div/>", { class: "test", text: "Click me!", click: function(){ $(this).toggleClass("test"); } }); // Clicking toggles the class / Al hacer clic cambia la ‘class’ <div class=”test”>Click me!</div> @mikehostetlerTuesday, December 6, 11
  38. 38. StarTechConf 2011 Inserting  Elements  /  Insertar  elementos // Before / Antes <p>Apple</p> <p>Orange</p> $(‘p’).after(‘<img src=”logo.png” />’); // After / Después <p>Apple</p> <img src=”logo.png /> <p>Orange</p> <img src=”logo.png /> @mikehostetlerTuesday, December 6, 11
  39. 39. StarTechConf 2011 Inserting  Elements  /  Insertar  elementos // Before / Antes <p id=”apple”>Apple</p> <p id=”orange”>Orange</p> $(‘<img src=”apple.png” />’).prependTo(‘#apple’); $(‘<img src=”orange.png” />’).appendTo(‘#orange’); // After / Después <p id=”apple”><img src=”apple.png” />Apple</p> <p id=”orange”>Orange<img src=”orange.png” /></p> @mikehostetlerTuesday, December 6, 11
  40. 40. StarTechConf 2011 Removing  Elements  /  Remover  elementos // Before / Antes <div> <p>Red</p> <p>Green</p> </div> // Removing Elements Directly / Eliminación de los elementos directamente. $(‘p’).remove(); // After / Después <div> </div> @mikehostetlerTuesday, December 6, 11
  41. 41. StarTechConf 2011 Wrapping  Elements  /  Envolver  elementos // Before / Antes <p>Hello world</p> <p>Foo bar</p> $(‘p’).wrap(‘<div></div>’); // After / Después <div><p>Hello world</p></div> <div><p>Foo bar</p></div> @mikehostetlerTuesday, December 6, 11
  42. 42. StarTechConf 2011 Unwrapping  Elements // Before / Antes <div><p>Hello world</p></div> <div><p>Foo bar</p></div> // Individually / Individualmente $(‘p’).unwrap(); // After / Después <p>Hello world</p> <p>Foo bar</p> @mikehostetlerTuesday, December 6, 11
  43. 43. StarTechConf 2011 Binding Events / Definir Eventos @mikehostetlerTuesday, December 6, 11
  44. 44. StarTechConf 2011 Click  Event  /  Evento  de  Clic // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); @mikehostetlerTuesday, December 6, 11
  45. 45. StarTechConf 2011 Click  Event  /  Evento  de  Clic // HTML <p>One</p> <p style=”color: red”>Two</p> // Clicked! <p>Three</p> $(‘p’).click(function(event) { $(this).css(‘color’, ‘red’); }); @mikehostetlerTuesday, December 6, 11
  46. 46. StarTechConf 2011 Hover  Pseudo  Event  /  Evento  de  Hover   // HTML <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).hover(function(event) { $(this).css(‘color’, ‘red’); }, function() { $(this).css(‘color’, ‘’); }); @mikehostetlerTuesday, December 6, 11
  47. 47. StarTechConf 2011 Binding  &  Unbinding  /  Definir  &  liberar // HTML <p>One</p> <p>Two</p> <p>Three</p> // Add event / Agregar evento $(‘p’).bind(‘click’,function(event) { $(this).css(‘color’, ‘red’); }); // Remove event / Quitar Evento $(‘p’).unbind(‘click’); @mikehostetlerTuesday, December 6, 11
  48. 48. StarTechConf 2011 Binding  Events  with  .bind() // Binding an event / Definir Evento $(a.tab).bind(click,function(e){ // event handling code $(this).css(‘color’, ‘red’); }); // Unbinding an event / Liberar Evento $(a.tab).unbind(click); @mikehostetlerTuesday, December 6, 11
  49. 49. StarTechConf 2011 Binding  Events // Bind an event to execute once / Definar Evento que corra una sola vez $(a.tab).one(click,function(e){ // event handling code   $(this).css(‘color’,‘red’); }); @mikehostetlerTuesday, December 6, 11
  50. 50. StarTechConf 2011 Ajax @mikehostetlerTuesday, December 6, 11
  51. 51. StarTechConf 2011 Making  a  Request  /  Hacer  un  pedido $.get(‘page.php’, function(data) { $(data).appendTo(‘body’); }, ‘html’); var data = { fname: ‘Jonathan’ }; $.post(‘page.php’, data, function(data) { $(data).appendTo(‘body’); }, ‘html’); @mikehostetlerTuesday, December 6, 11
  52. 52. StarTechConf 2011 Making  a  Request  with  JSON   Hacer  un  pedido  de  JSON // Response / Respuesta {“names”: [“Jonathan”, “Mike”, “Rob”], “states”: {“NE” : “Nebraska”}, “year” : “2011” } $.getJSON(‘page.php’, function(json) { $(‘body’).append( json.names[0] ); $(‘body’).append( json.states.NE ); }); @mikehostetlerTuesday, December 6, 11
  53. 53. StarTechConf 2011 Making  a  Request  JSON // Response { “names”: [“Jonathan”, “Mike”, “Rob”] } $.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); }); }); @mikehostetlerTuesday, December 6, 11
  54. 54. StarTechConf 2011 Writing Your First Plugin Escribe tu primer plugin @mikehostetlerTuesday, December 6, 11
  55. 55. StarTechConf 2011 Writing  your  first  Plugin // Function Namespace $.fn // Define / Definir $.fn.elementCount = function() { alert(‘Element count: ’ + this.length); }; // Execute / Ejecutar $(‘p’).elementCount(); @mikehostetlerTuesday, December 6, 11
  56. 56. StarTechConf 2011 Plugins  &  Iteration  /  Plugins  &  Iteración $.fn.elementCount = function() { // this is a jQuery Object this.each(function(i) { // this is the element $(this).html($(this).html() +‘ ‘+ i); }); }; $(‘p’).elementCount(); @mikehostetlerTuesday, December 6, 11
  57. 57. StarTechConf 2011 Plugins  and  Chaining // Add support for chaining $.fn.elementCount = function() { return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); }); }; $(‘p’).elementCount().addClass(‘active’);; @mikehostetlerTuesday, December 6, 11
  58. 58. StarTechConf 2011 Plugins  and  Chaining // Plugin is required to return this $.fn.SantiagoAMil = function() { return this.each(function(i) { $(this).css(‘color’, ‘red’); }); }; $(‘p’).SantiagoAMil().addClass(‘fiesta’); @mikehostetlerTuesday, December 6, 11
  59. 59. StarTechConf 2011 The Plugin Pattern El patrón de Plugin @mikehostetlerTuesday, December 6, 11
  60. 60. StarTechConf 2011 The  Plugin  Pattern (function($) { $.fn.SantiagoAMil = function() { return this.each(function(i) { $(this).css(‘color’, ‘red’); }); }; })(jQuery); $(‘p’).SantiagoAMil(); @mikehostetlerTuesday, December 6, 11
  61. 61. StarTechConf 2011 The  Plugin  Pattern (function($, undefined) { $.fn.SantiagoAMil = function() { return this.each(function(i) { $(this).css(‘color’, ‘red’); }); }; })(jQuery); $(‘p’).SantiagoAMil(); @mikehostetlerTuesday, December 6, 11
  62. 62. StarTechConf 2011 The  Plugin  Pattern (function($) { $.fn.SantiagoAMil = function(color) { return this.each(function(i) { $(this).css(‘color’, color); }); }; })(jQuery); $(‘p’).SantiagoAMil(‘verde’); @mikehostetlerTuesday, December 6, 11
  63. 63. StarTechConf 2011 The  Plugin  Pattern (function($) { $.fn.SantiagoAMil = function(color, begin) { if ( $.isFunction(begin) ) { begin(); } return this.each(function(i) { $(this).css(‘color’, color); }); }; })(jQuery); $(‘p’).SantiagoAMil(‘verde‘, begin: function() {alert(‘BEGIN!’)} ); @mikehostetlerTuesday, December 6, 11
  64. 64. StarTechConf 2011 Thank You! ¡Gracias! @mikehostetler http://mike-hostetler.com http://learn.appendto.com Questions? / ¿Preguntas? @mikehostetlerTuesday, December 6, 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×