En 20 minutos ... jQuery

jQuery

Jesús María Méndez Pérez
Grupo de Apoyo a la Teleenseñanza (GAT)

Introducción
• Es una librería Javascript que:
– elimina las diferencias entre los distintos
navegadores web
– simplifica tareas comunes
– es amigable para los diseñadores web
– tiene una gran cantidad de plugins
(http://archive.plugins.jquery.com)
– es usado en más del 35% de los sitios webs

Características
• jQuery es la librería Javascript más utilizada
actualmente.
• Ha tenido un gran crecimiento durante estos
últimos años.
• jQuery es usado en más del 50% de los 10,000
sitios top de Internet y en más del 30% del top
1,000,000.

Historia

• John Resig lanzó jQuery approximadamente el 16 de Enero
de 2006
• John escribió en su blog – “Making it to both del.icio.us
popular and the front page of digg just shows how badly
Javascript programmers want a better library for writing
code with.”
• Justo una semana después Michael Geary escribió el primer
plugin jQuery, una función para manipular JSON que se
incluiría posteriormente en la librería jQuery.
• Version 1.0 - 26 de Agosto de 2006.
• Actualmente - Versión 1.8.3 - 13 de Noviembre de 2012.

Cargar jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf:8">
<title>My Web Page</title>
<link href="css/main.css rel="stylesheet">
<script src="js/jquery/1.8.3.min.js"></script>
</head>
<body>

…
</script>
$(document).ready(function() {
});
</script>
</body>

O bien…
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

Programando en jQuery
1. Seleccionar 2. Acción

images show
links hide
divs animate
tables add new content
table rows change CSS
form fields change HTML properties
External links load data from the web
… any HTML TAG

http://api.jquery.com/category/selectors/

$('p')
$('.navbar')
$('#banner')
$('#banner p')
$('h2 + p')
$('a[href^="http://"]')

http://files.sawmac.com/js2e/testbed/selectors.html

1. Seleccionar 2. Acción

$('a[href^="http://"]').attr('target','_blank'); $('a[href^="http://"]').attr('target','_blank');

<li> <li>
<a href="http://google.com/">Google</a> <a href="http://google.com/" target="_blank") >Google</a>
</li> </li>
<li> <li>
<a href="http://yahoo.com">Yahoo!</a> <a href="http://yahoo.com" target="_blank") >Yahoo!</a>
</li> </li>
<li> <li>
<a href="../testbed/events.html">Events testbed</a> <a href="../testbed/events.html "target="_blank") >Events
</li> testbed</a>
<li> </li>
<a href="http://twitter.com">Twitter</a> <li>
</li> <a href="http://twitter.com">Twitter</a>
</li>

Interacción - Eventos

Mouse events mouseover mouseout mousemove

Click events click dbclick mousedown mouseup

Window load unload resize scroll
events
Key events keydown keyup keypress

Form events focus blur submit

• 1. Seleccionar elemento
$(‘div’)

• 2. Añadir Evento
$(‘div').click(function(){
});

• 3. Acción
$(‘div').click(function(){
alert(‘hola');
});

Buenas prácticas
• Usar SIEMPRE la última versión de jQuery
– Mejora el rendimiento y corrige errores de versiones
anteriores.

• Precaución al seleccionar selectores
– De mayor a menor rendimiento:
• Selectores de ID: (#sidebar)
• Selectores de etiqueta HTML (input, div, etc.)
• Selectores de clase (.pantalon)
• Pseudoselectores y selectores de atributo (:visible, :hidden,
[attribute=value], etc.)

Hazlo simple
• Evita selectores complicados
$("body #page:first-child article.main p#intro em"); //mal
$("#intro em"); //bien

• Aumento especificación de izquierda a derecha
$("#intro em") -> Carga todos los elementos ‘em’ en un array.

Muy ineficiente si tienes cientos de etiquetas ‘em’.

$("em", $("#intro")); -> $("em", "#intro");
$("#intro").find("em");

<div id="content">
<form method="post" action="/">
<h2>Traffic Light</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

Seleccionar un elemento
var traffic_button = $('#content .button'); //lento
var traffic_button = $('#traffic_button'); //rápido

Seleccionar múltiples elementos
– Siempre descender del ID más cercano (var traffic_lights = $('#traffic_light input');)
– Siempre utilizar una etiqueta antes de una clase (y descender de un ID):
var active_light = $('#traffic_light input.on');
– Nunca utilices etiqueta con un ID.
var content = $('div#content');

– Consejo: Si queremos recordar que nuestra variable local es un objeto jQuery podemos ponerle $ como prefijo.
– Nunca repitas una operación de selección de jQuery mas de una vez en tu aplicación.

Separar la funcionalidad de Javascript
Separar la funcionalidad de Javascript en otra capa independiente de (X)HTML and CSS.
//mal
Nunca incluyas eventos Javascript en los atributos.

<a onclick="doSomething()" href="#">Click!</a>

//bien
El código Javascript se debe de incluir en un fichero externo y enlazado al documento con la etiqueta ‘<script>’

<a href="backuplink.html" class="doSomething">Click!</a>

$('a.doSomething').click(function(){
// Do something here!
alert('You did something, woo hoo!');
}); ...

The método .click() de jQuery nos permite enlazar el evento click al resultado de nuestro selector.
Se seleccionarán todas las etiquetas <a> con clase “doSomething” y se le enlazará el evento que llamará a la
función.

Nunca depender de Javascript
Nunca asumir que el navegador del usuario tiene Javascript activado.

//mal
<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
document.write('Good Morning!');
else
document.write('Good Afternoon!');
</script>

Javascript desactivado -> No aparecería nada.

//bien
<p title="Good Day Message">Good Morning!</p>

<script language="javascript">
var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title="Good Day Message"]');
goodDay.text('Good Afternoon!');
}

Javascript desactivado -> Siempre aparecería “Good Morning”

Código accessible
Importante que nuestro (X)HTML esté bien estructurado para evitar DOM scripting e interactuar de manera
sencilla con jQuery.

//muy mal //mal

//bien

CSS Dinámico
Si el navegador web no soporta Javascript o éste está desactivado, los elementos que ocultamos a través
de CSS nunca serán nuevamente visibles ya que nuestro código Javascript no se ejecutará.

Podemos ocultar elementos de la página usando usando CSS, sin embargo nuestro CSS solo se ejecutará
si el Javascript está activado.

#bad #good
HTML: HTML:

<h2>This is a heading</h2> <h2>This is a heading</h2>
<p class="hide-me-first"> This is some information about the heading. </p> <p class="hide-me-first"> This is some information about the heading. </p>

CSS: jQuery Javascript:
p.hide-me-first $(document).ready(function{
{ $("p.hide-me-first").css("display", "none");
display: none; $("p.hide-me-first").css("visibility", "hidden");
visibility: hidden;
} });

Almacenar consultas jQuery
Si pretendes usar los objetos jQuery obtenidos durante la selección en otras partes del código,
deberías almacenarlo en un objeto de ámbito global.

// Definir un objeto de ámbito global (i.e. the window object)
window.$my =
{
// Initialize all the queries you want to use more than once
head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
};

function do_something()
{
// Now you can reference the stored results and manipulate them
var script = document.createElement('script');
$my.head.append(script);

// When working inside functions, continue to save jQuery results to your global container.
$my.cool_results = $('#some_ul li');
$my.other_results = $('#some_table td'); // Use the global functions as you would a normal jQuery result
$my.other_results.css('border-color', 'red');
$my.traffic_light.css('border-color', 'green');
}

• 1) $(‘.child’, $parent).show(); (Ámbito)
• 2) $parent.find(‘.child’).show(); (Usando find())
• 3) $parent.children(‘child’).show(); (hijo inmediato)
• 4) $(‘parent > .child’).show(); (selector CSS)
• 5) $(‘#parent .child’).show(); (igual que 2)

• Caching
var parents = $(‘.parents’);

var children = $(‘.parents’).find(‘.child’) //mal
var children = parents.find(‘.child’) //bien

Cualquier $(‘ ’) implica volver a recorrer el DOM -> Mayor lentitud (Menor rendimiento)

• Encadenamiento
//sin encadenamiento
$(‘#message’).fadeIn(‘slow’);
$(‘#message’).addClass(‘activeMessage’);

//con encadenamiento
$(‘#message’).fadeIn(‘slow’)
.addClass(‘activeMessage’);

• Inserción en el DOM
– Cada inserción en el DOM es muy costosa.
– Construir cadenas de HTML en una variable y realizar una única inserción (append()) tan tarde como
sea posible.
– Usar detach() en vez de remove() si posteriormente se va a hacer una reinserción de los elementos
en el DOM.

• Evitar bucles
– La manipulación directa del DOM es muy costosa.
– Crear lo que necesites en memoria y por último actualizar el DOM.

//mal //bien

Objetos jQuery como Arrays
El resultado de un selector es un objeto jQuery. Sin embargo, te hace pensar que estás trabajando
con un array con elementos y una longitud.

Usar for (o while) en lugar de $.each() hace que mejore el rendimiento.
Comprobar la longitud es la única manera de determinar si la colección contiene algún elemento

http://jsfiddle.net/martinaglv/NcRsV/

Delegación de eventos (Bubbling)
Cada evento (e.g. click, mouseover, etc.) en JavaScript hace el efecto burbuja en el árbol DOM
hacia los elementos padre.

Muy útil cuando muchos elementos llaman a la misma función. En vez de establecer una función
de listener a muchos nodos (ineficiente), se establece una función de listener a su padre.

Mantén el código claro
var defaultSettings = {};
defaultSettings['carModel'] = 'Mercedes';
defaultSettings['carYear'] = '2010';
defaultSettings['carMiles'] = '5000';
defaultSettings['carTint'] = 'Metallic Blue';

$('.someCheckbox').click(function(){ $(‘.someCheckbox’).click(function(){

if(this.checked){ var checked= this.checked;
$('#input_carModel').val(defaultSettings.carModel);
$('#input_carYear').val(defaultSettings.carYear); $.each([‘carModel’, ‘carYear’, ‘carMiles’, ‘carTint’, function (i,key) {
$('#input_carMiles').val(defaultSettings.carMiles); $(#input_ + key).val(checked ? defaultSettings[key] : ‘’);
$('#input_carTint').val(defaultSettings.carTint); });
} });
else
{
$('#input_carModel').val('');
}
});

Usar CSS Hooks
La API CSS hooks permite a los desarrolladores obtener y establecer particular valores CSS.

$.cssHooks['borderRadius'] = {
get: function(elem, computed, extra){
// Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
},
set: function(elem, value){
// Set the appropriate CSS3 property
}
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

https://github.com/brandonaaron/jquery-cssHooks -> Colección de CSS Hooks

Usar Custom Easing Functions
El plugin jQuery easing plugin permite añadir efectos a tus animaciones.

Copiar el efecto que necesitas del plugin y añadirlo a jQuery.easing

$.easing.easeInOutQuad = function (x, t, b, c, d)
{
if ((t/=d/2) < 1)
return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it: $('#elem').animate({width:200},'slow','easeInOutQuad');

$.proxy()

//Ejecutar

• Problema: Desaparece el botón pero no el panel.
• Utilizando $.proxy:

Determinar el tamaño de tu página web
• Cuanto más contenido tenga tu página web, más le costará al navegador
renderizarla.
• Puedes contar el numero de elementos DOM mediante:

console.log( $('*').length );

• Intenta optimizarla eliminando nodos innecesarios.

Ámbito
• El problema del ámbito

Sólo se está alterando el DOM una vez la página esté cargada.
En casi cualquier aplicación web moderna, el DOM va a cambiar después de que la página haya sido cargada.

Ejecutando jQuery dentro de success de una función AJAX:

• Como manejar el ámbito

A la izquierda, se establece el handler de la manera normal. A la derecha, se realiza una búsqueda de la clase botón en el documento.
La de la derecha te permite controlar el ámbito sobre el DOM que está siendo modificado.

Dada esta función, se reescribe $(document).ready(fuction(){

Y la llamada AJAX de una manera similar:

• Cuando se rompe el ámbito

La variable scope solo será válida dentro de la función my_button_jquery. Es importante tener en cuenta que este ámbito se romperá
si realizamos una llamada a otra función. Naturaleza asíncrona del modelo de eventos de Javascript.

Por eso, la función AJAX anterior no es posible escribirla con scope dentro del manejador success.

• Eficiencia

Siempre debes invocar el objeto jQuery desde fuera de la función para mejorar la eficiencia.

//mal //bien

Establecer AJAX Global
En una petición AJAX, algunas veces necesitas indicar que la petición está en progreso
(mostrar animación, capa más oscura, etc.)

Usar HTML5 Data Attributes
• HTML5 data attributes son utilizados para almacenar información en la página
web.

• Para acceder a los atributos del div:

• http://api.jquery.com/data/

Crear un plugin en jQuery
(function($){
$.fn.yourPluginName = function(){ … return this; };
})( jQuery);

$(“p”).yourPluginName();

Fichero jquery.reversetext.js

Crear un plugin en jQuery
HTML:

Resultado:

Comprimir tu Javascript
• Comprimir el código Javascript usando YUICompressor
• Menor tiempo de respuesta -> Agilizamos la carga del página web.

• Otros compresores de Javascript:
– http://javascriptcompressor.com/
– http://jscompress.com/

• También podemos comprimir nuestro código CSS
– http://www.cssdrive.com/index.php/main/csscompressor/

jQuery mobile
• http://jquerymobile.com/ - Versión 1.2.0

• Librería Mobile UI.
• HTML5 Data Atributtes definidos.
<div data-role="page" id="home">
</div>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>

http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html

jQuery mobile – Buenas prácticas

a) Mirar detenidamente los ejemplos
– http://jquerymobile.com/demos/
b) Cada página debe de valerse por sí misma
– Debe contener: CSS, Javascript, header, footer, etc.
c) Comprobar que ocurre cuando desactivas Javascript
d) Asegúrate de que tu código no sea vulnerable a los
ataques

• Minimizar y comprimir
– Reducir el número de peticiones HTTP
– Minimizar los ficheros CSS y Javascript
– Intentar que las páginas webs sean menores de
25KB (para que sea posible el uso de la caché)
– Utilizar la herramienta YUI Compressor

• Números de teléfono, mapas y correos
electrónicos
– No embeber mapas en las aplicaciones móviles

• Usar jQuery Validate
– http://bassistance.de/jquery-plugins/jquery-plugin-validation/
– No hay que confiar en el usuario.

• Usar ThemeRoller
– http://jquerymobile.com/themeroller/

• Usar radio button en lugar de select
– Select son menos consistentes, suelen dar más problemas entre las plataformas.
– Permiten al usuario ver al instante las opciones de elección.

• Añadir Google Analytics

• Usar correctamente las etiquetas meta

• Determinar que estilo de navegación usar:
– La página principal es el menú global
– El menú global es una subpágina
– El menú global está al final de cada página

La página principal es el menú global El menú global es una subpágina

• Pros • Pros
– Simple – Escalable
– Buena UX – Contexto
– Velocidad – Velocidad
• Contras • Contras
– Demasiados enlaces – Cuestionable UX

El menú global está al final de cada página

• Pros
– Escalable
– Velocidad
– Contexto
– Excelente UX
• Contras
– Aplicaciones no usan esta interfaz

• Detectar y redireccionar a móvil
– Browser sniffing - WURFL

• Establecer un enlace a la página completa

• Contenido vs Funcionalidad

En 20 minutos ... jQuery

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie En 20 minutos ... jQuery

Ähnlich wie En 20 minutos ... jQuery (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

En 20 minutos ... jQuery