Mike hostetler - jQuery knowledge append to you
Upcoming SlideShare
Loading in...5
×
 

Mike hostetler - jQuery knowledge append to you

on

  • 1,106 views

 

Statistics

Views

Total Views
1,106
Views on SlideShare
1,106
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mike hostetler - jQuery knowledge append to you Mike hostetler - jQuery knowledge append to you Presentation Transcript

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