en 20 minutos ... jquery

jQuery

Jesús María Méndez PérezGrupo 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.

Uso jQuery

Historia

• John Resig lanzó jQuery approximadamente el 16 de Enerode 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

images

links

divs

tables

table rows

form fields

External links

… any HTML TAG

2. Acción

show

hide

animate

add new content

change CSS

change HTML properties

load data from the web


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

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

<li>

<a href="http://google.com/">Google</a>

</li>

<li>

<a href="http://yahoo.com">Yahoo!</a>

</li>

<li>

<a href="../testbed/events.html">Events testbed</a>

</li>

<li>

<a href="http://twitter.com">Twitter</a>

</li>

2. Acción

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

<li>

<a href="http://google.com/" target="_blank") >Google</a>

</li>

<li>

<a href="http://yahoo.com" target="_blank") >Yahoo!</a>

</li>

<li>

<a href="../testbed/events.html "target="_blank") >Eventstestbed</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

Windowevents

load unload resize scroll

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

});

jQuery Effects

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 manerasencilla 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ésde 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 #goodHTML: 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)

• Cachingvar 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 trabajandocon 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ónde 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 navegadorrenderizarla.

• 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áginaweb.

• 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

• Pros

– Simple

– Buena UX

– Velocidad

• Contras

– Demasiados enlaces

El menú global es una subpágina

• Pros

– Escalable

– Contexto

– Velocidad

• Contras

– 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

GRACIAS

en 20 minutos ... jquery

Technology