Mike hostetler - jQuery knowledge append to you

  • 854 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
854
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. StarTechConf 2011 jQuery(#knowledge) .appendTo(#you); Mike Hostetler @mikehostetler http://mike-hostetler.com @mikehostetlerTuesday, December 6, 11
  • 2. StarTechConf 2011 Who am I? ¿Quién soy? @mikehostetlerTuesday, December 6, 11
  • 3. StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
  • 4. StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
  • 5. StarTechConf 2011 @mikehostetlerTuesday, December 6, 11
  • 6. StarTechConf 2011 http://learn.appendto.com @mikehostetlerTuesday, December 6, 11
  • 7. StarTechConf 2011 The jQuery Project El proyecto jQuery @mikehostetlerTuesday, December 6, 11
  • 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. 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. StarTechConf 2011 Including jQuery Incluyendo jQuery @mikehostetlerTuesday, December 6, 11
  • 11. StarTechConf 2011 http://jquery.com/download https://github.com/jquery/jquery or use a CDN ... @mikehostetlerTuesday, December 6, 11
  • 12. StarTechConf 2011 Source Minified @mikehostetlerTuesday, December 6, 11
  • 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. StarTechConf 2011 Your first jQuery Su primera jQuery @mikehostetlerTuesday, December 6, 11
  • 15. StarTechConf 2011 jQuery Function / Función de jQuery jQuery( ); // That’s it @mikehostetlerTuesday, December 6, 11
  • 16. StarTechConf 2011 The $ // $ is an allowed variable in JavaScript window.jQuery = window.$ = jQuery; $ === jQuery // TRUE @mikehostetlerTuesday, December 6, 11
  • 17. StarTechConf 2011 Finding Something Para encontrar algo @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. 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. StarTechConf 2011 Do Something Hacer algo @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. StarTechConf 2011 Method Chaining Encadenamiento de métodos @mikehostetlerTuesday, December 6, 11
  • 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. StarTechConf 2011 Method  Chaining $(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’); @mikehostetlerTuesday, December 6, 11
  • 36. StarTechConf 2011 DOM Manipulation Manipulación del DOM @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. 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. 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. 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. StarTechConf 2011 Binding Events / Definir Eventos @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. 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. 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. 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. StarTechConf 2011 Ajax @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. StarTechConf 2011 Writing Your First Plugin Escribe tu primer plugin @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. 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. StarTechConf 2011 The Plugin Pattern El patrón de Plugin @mikehostetlerTuesday, December 6, 11
  • 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. 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. 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. 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. StarTechConf 2011 Thank You! ¡Gracias! @mikehostetler http://mike-hostetler.com http://learn.appendto.com Questions? / ¿Preguntas? @mikehostetlerTuesday, December 6, 11