Mike hostetler - jQuery knowledge append to you

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 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 Miniﬁed @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 ﬁrst 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’).ﬁnd(‘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 Iteration / Iteración <p>One</p> <p>Two</p> <p>Three</p> $(‘p’).each(function() { // Operates on each p individually var rand; rand = Math.ﬂoor( 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’).ﬁnd(‘td.company’).addClass (‘companyName’); // Better / Mejor $(‘tr:odd’) .addClass(‘odd’) .ﬁnd(‘td.company’) .addClass(‘companyName’) .end(); @mikehostetlerTuesday, December 6, 11

StarTechConf 2011 Method Chaining $(‘tr’) .ﬁlter(‘:odd’) .addClass(‘odd’) .end() .ﬁnd(‘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 / Deﬁnir 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 / Deﬁnir & 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 / Deﬁnir 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 / Deﬁnar 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(‘ﬁesta’); @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($, undeﬁned) { $.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

Mike hostetler - jQuery knowledge append to you

by StarTech Conference

Accessibility

Categories

Upload Details

Usage Rights

Statistics