Mike hostetler - jQuery knowledge append to you

StarTechConf 2011

@mikehostetler

Mike Hostetler@mikehostetler

http://mike-hostetler.com

jQuery('#knowledge').appendTo('#you');

Tuesday, December 6, 11



StarTechConf 2011

@mikehostetler

Who am I?¿Quién soy?


@mikehostetler

StarTechConf 2011


@mikehostetler

StarTechConf 2011


@mikehostetler

StarTechConf 2011


@mikehostetler

StarTechConf 2011

http://learn.appendto.com




StarTechConf 2011

@mikehostetler

The jQuery ProjectEl proyecto jQuery


@mikehostetler

StarTechConf 2011

jQuery Core

jquery.com

jQuery UI

jqueryUI.com

jQuery Mobile

jquerymobile.com

QUnit

qunitjs.com

jQuery Project - jquery.org(Software Freedom Conservancy)


StarTechConf 2011

@mikehostetler

‣ 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

Using jQuery


StarTechConf 2011

@mikehostetler

Including jQueryIncluyendo jQuery


@mikehostetler

StarTechConf 2011

http://jquery.com/download https://github.com/jquery/jquery

or use a CDN ...


http://jquerymobile.com/download

http://jquerymobile.com/download

https://github.com/jquery/jquery-mobile

https://github.com/jquery/jquery-mobile

@mikehostetler

StarTechConf 2011

Minified

Source


@mikehostetler

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/)


http://code.jquery.com/jquery-1.7.min.js

http://code.jquery.com/jquery-1.7.min.js

http://html5boilerplate.com

http://html5boilerplate.com

StarTechConf 2011

@mikehostetler

Your first jQuerySu primera jQuery


@mikehostetler

StarTechConf 2011

jQuery Function / Función de jQuery

jQuery( );

// That’s it


@mikehostetler

StarTechConf 2011

The $

// $ is an allowed variable in JavaScript

window.jQuery = window.$ = jQuery;

$ === jQuery // TRUE


StarTechConf 2011

@mikehostetler

Finding SomethingPara encontrar algo


StarTechConf 2011

@mikehostetler

Finding Something// Select By ID / Selección por ID

<div id=”foo”></div><div></div>

$(‘#foo’);

<div id=”foo”></div><div></div>


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

Finding Something in ContextEncontrar 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)...});


StarTechConf 2011

@mikehostetler

Do SomethingHacer algo


StarTechConf 2011

@mikehostetler

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] );


StarTechConf 2011

@mikehostetler

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();


StarTechConf 2011

@mikehostetler

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();


StarTechConf 2011

@mikehostetler

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(); }});


StarTechConf 2011

@mikehostetler




StarTechConf 2011

@mikehostetler




StarTechConf 2011

@mikehostetler

Styling// HTML<p>One</p><p class=”foo”>Two</p><p>Three</p>

$(‘p’).addClass(‘enabled’);

$(‘p’).removeClass(‘foo’);

$(‘p’).toggleClass(‘foo’);


StarTechConf 2011

@mikehostetler

Styling// HTML<p class=”enabled”>One</p><p class=”enabled foo”>Two</p><p class=”enabled”>Three</p>





StarTechConf 2011

@mikehostetler

Styling// HTML<p class=”enabled”>One</p><p class=”enabled”>Two</p><p class=”enabled”>Three</p>





StarTechConf 2011

@mikehostetler

Styling// HTML<p class=”enabled foo”>One</p><p class=”enabled foo”>Two</p><p class=”enabled foo”>Three</p>





StarTechConf 2011

@mikehostetler

Method ChainingEncadenamiento de métodos


StarTechConf 2011

@mikehostetler

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();


StarTechConf 2011

@mikehostetler

Method Chaining$(‘tr’) .filter(‘:odd’) .addClass(‘odd’) .end() .find(‘td.company’) .addClass(‘companyName’);


StarTechConf 2011

@mikehostetler

DOM ManipulationManipulación del DOM


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

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 />


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

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>


StarTechConf 2011

@mikehostetler

Binding Events / Definir Eventos


StarTechConf 2011

@mikehostetler

Click Event / Evento de Clic// HTML<p>One</p><p>Two</p><p>Three</p>

$(‘p’).click(function(event) { $(this).css(‘color’, ‘red’);});


StarTechConf 2011

@mikehostetler

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’);});


StarTechConf 2011

@mikehostetler

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’, ‘’);});


StarTechConf 2011

@mikehostetler

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’);


StarTechConf 2011

@mikehostetler

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');


StarTechConf 2011

@mikehostetler

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’);});


StarTechConf 2011

@mikehostetler

Ajax


StarTechConf 2011

@mikehostetler

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’);


StarTechConf 2011

@mikehostetler

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 );});


StarTechConf 2011

@mikehostetler

Making a Request JSON// Response{ “names”: [“Jonathan”, “Mike”, “Rob”] }

$.getJSON(‘page.php’, function(json) { $.each(json.names, function(i, val) { $(‘body’).append( val ); });});


StarTechConf 2011

@mikehostetler

Writing Your First PluginEscribe tu primer plugin


StarTechConf 2011

@mikehostetler

// Function Namespace$.fn

// Define / Definir$.fn.elementCount = function() { alert(‘Element count: ’ + this.length);};

// Execute / Ejecutar$(‘p’).elementCount();

Writing your first Plugin


StarTechConf 2011

@mikehostetler

$.fn.elementCount = function() { // this is a jQuery Object this.each(function(i) { // this is the element $(this).html($(this).html() +‘ ‘+ i); });};

$(‘p’).elementCount();

Plugins & Iteration / Plugins & Iteración


StarTechConf 2011

@mikehostetler

// Add support for chaining$.fn.elementCount = function() { return this.each(function(i) { $(this).html($(this).html() +‘ ‘+ i); });};

$(‘p’).elementCount().addClass(‘active’);;

Plugins and Chaining


StarTechConf 2011

@mikehostetler

// Plugin is required to return this$.fn.SantiagoAMil = function() { return this.each(function(i) { $(this).css(‘color’, ‘red’); });};

$(‘p’).SantiagoAMil().addClass(‘fiesta’);

Plugins and Chaining


StarTechConf 2011

@mikehostetler

The Plugin PatternEl patrón de Plugin


StarTechConf 2011

@mikehostetler

(function($) { $.fn.SantiagoAMil = function() { return this.each(function(i) { $(this).css(‘color’, ‘red’); }); };})(jQuery);

$(‘p’).SantiagoAMil();

The Plugin Pattern


StarTechConf 2011

@mikehostetler

(function($, undefined) { $.fn.SantiagoAMil = function() { return this.each(function(i) { $(this).css(‘color’, ‘red’); }); };})(jQuery);

$(‘p’).SantiagoAMil();

The Plugin Pattern


StarTechConf 2011

@mikehostetler

(function($) { $.fn.SantiagoAMil = function(color) { return this.each(function(i) { $(this).css(‘color’, color); }); };})(jQuery);

$(‘p’).SantiagoAMil(‘verde’);

The Plugin Pattern


StarTechConf 2011

@mikehostetler

(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!’)});

The Plugin Pattern


StarTechConf 2011

@mikehostetler

Thank You!¡Gracias!@mikehostetler

http://mike-hostetler.comhttp://learn.appendto.com

Questions? / ¿Preguntas?


http://filamentgroup.com






Technology

Mike hostetler - jQuery knowledge append to you