Mike hostetler - jQuery knowledge append to you

StarTechConf 2011

jQuery('#knowledge')
.appendTo('#you');
Mike Hostetler
@mikehostetler
http://mike-hostetler.com

@mikehostetler

Tuesday, December 6, 11

StarTechConf 2011

Who am I?
¿Quién soy?

@mikehostetler


StarTechConf 2011

@mikehostetler


StarTechConf 2011

http://learn.appendto.com

@mikehostetler


StarTechConf 2011

The jQuery Project
El proyecto jQuery

@mikehostetler


StarTechConf 2011

jQuery Project - jquery.org
(Software Freedom Conservancy)

jQuery Core jQuery UI

jquery.com jqueryUI.com

jQuery Mobile QUnit

jquerymobile.com qunitjs.com

@mikehostetler


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

@mikehostetler


StarTechConf 2011

Including jQuery
Incluyendo jQuery

@mikehostetler


StarTechConf 2011

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

or use a CDN ...

@mikehostetler


StarTechConf 2011

Source

Miniﬁed
@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/)

@mikehostetler


StarTechConf 2011

Your ﬁrst jQuery
Su 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

@mikehostetler


StarTechConf 2011

Finding Something
Para encontrar algo

@mikehostetler


StarTechConf 2011

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

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

$(‘#foo’);

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

@mikehostetler


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>

@mikehostetler


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>

@mikehostetler


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

@mikehostetler


StarTechConf 2011

Do Something
Hacer algo

@mikehostetler


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

@mikehostetler


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

@mikehostetler


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

@mikehostetler


StarTechConf 2011

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

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

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

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

@mikehostetler


StarTechConf 2011

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




@mikehostetler


StarTechConf 2011

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




@mikehostetler


StarTechConf 2011

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




@mikehostetler


StarTechConf 2011

Method Chaining
Encadenamiento de métodos

@mikehostetler


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

@mikehostetler


StarTechConf 2011

Method
Chaining
$(‘tr’)
.ﬁlter(‘:odd’)
.addClass(‘odd’)
.end()
.ﬁnd(‘td.company’)
.addClass(‘companyName’);

@mikehostetler


StarTechConf 2011

DOM Manipulation
Manipulación del DOM

@mikehostetler


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>

@mikehostetler


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

@mikehostetler


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>

@mikehostetler


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>

@mikehostetler


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>

@mikehostetler


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>

@mikehostetler


StarTechConf 2011

Binding Events / Deﬁnir Eventos

@mikehostetler


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

@mikehostetler


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

@mikehostetler


StarTechConf 2011

Hover
Pseudo
Event
/
Evento
de
Hover

// HTML
<p>One</p>
<p>Two</p>
<p>Three</p>

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

@mikehostetler


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

// Remove event / Quitar Evento
$(‘p’).unbind(‘click’);

@mikehostetler


StarTechConf 2011

Binding
Events
with
.bind()
// Binding an event / Deﬁnir Evento
$('a.tab').bind('click',function(e){
// event handling code
});

// Unbinding an event / Liberar Evento
$('a.tab').unbind('click');

@mikehostetler


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

@mikehostetler


StarTechConf 2011

Ajax

@mikehostetler


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

@mikehostetler


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

@mikehostetler


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

@mikehostetler


StarTechConf 2011

Writing Your First Plugin
Escribe tu primer plugin

@mikehostetler


StarTechConf 2011

Writing
your
first
Plugin
// Function Namespace
$.fn

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

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

@mikehostetler


StarTechConf 2011

Plugins
&
Iteration
/
Plugins
&
Iteración
// this is a jQuery Object
this.each(function(i) {
// this is the element
$(this).html($(this).html() +‘ ‘+ i);
});
};

$(‘p’).elementCount();

@mikehostetler


StarTechConf 2011

Plugins
and
Chaining
// Add support for chaining
return this.each(function(i) {
$(this).html($(this).html() +‘ ‘+ i);
});
};

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

@mikehostetler


StarTechConf 2011

Plugins
and
Chaining
// Plugin is required to return this
$.fn.SantiagoAMil = function() {
});
};

$(‘p’).SantiagoAMil().addClass(‘ﬁesta’);

@mikehostetler


StarTechConf 2011

The Plugin Pattern
El patrón de Plugin

@mikehostetler


StarTechConf 2011

The
Plugin
Pattern
(function($) {
});
};
})(jQuery);

$(‘p’).SantiagoAMil();

@mikehostetler


StarTechConf 2011

The
Plugin
Pattern
(function($, undeﬁned) {
});
};
})(jQuery);

$(‘p’).SantiagoAMil();

@mikehostetler


StarTechConf 2011

The
Plugin
Pattern
(function($) {
$.fn.SantiagoAMil = function(color) {
$(this).css(‘color’, color);
});
};
})(jQuery);

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

@mikehostetler


StarTechConf 2011

The
Plugin
Pattern
(function($) {
$.fn.SantiagoAMil = function(color, begin) {
if ( $.isFunction(begin) ) { begin(); }
$(this).css(‘color’, color);
});
};
})(jQuery);

$(‘p’).SantiagoAMil(‘verde‘,
begin: function() {alert(‘BEGIN!’)}
);

@mikehostetler


StarTechConf 2011

Thank You!
¡Gracias!
@mikehostetler
http://mike-hostetler.com
http://learn.appendto.com
Questions? / ¿Preguntas?

@mikehostetler


Mike hostetler - jQuery knowledge append to you

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (14)

Similar to Mike hostetler - jQuery knowledge append to you

Similar to Mike hostetler - jQuery knowledge append to you (20)

More from StarTech Conference

More from StarTech Conference (9)

Recently uploaded

Recently uploaded (20)

Mike hostetler - jQuery knowledge append to you