jQuery: 10 mini tutoriales para principiantes

Seguimos con más “mini tutoriales” para aprender a utilizar jQuery en poco tiempo. Si es la primera vez que te encuentras con esta librería de Javascript seguramente te interese leer el artículo anterior, que incluye ejemplos más básicos.
Esta vez toca aprender a agregar, quitar o modificar el HTML y CSS de tu sitio, crear animaciones simples y setear handlers de eventos, de modo que ¡comencemos!

6 Agregando y removiendo HTML o texto

Capturar el HTML de cualquier elemento (similar a innerHTML en Javascript nativo):

// La variable contendrá todo el HTML (incluyendo nodos de texto, etc.) hijo de #miElemento
var miHTML = $('#miElemento').html();

Si solamente deseas obtener el texto dentro de un tag HTML:

var miTexto = $('#miElemento').text();

Usando la sintaxis anterior se puede cambiar el contenido de un elemento, ya sea HTML o sólo el texto:

$('#miElemento').html('<p>Este contenido HTML es nuevo.</p>');

$('#miElemento').text('Este texto que contiene es nuevo.');

Y si no queremos cambiar el contenido, sino agregarlo (al principio o al final) usamos:

$('#miElemento').append('<p>Este contenido HTML es nuevo.</p>'); // mantiene intacto el contenido original y agrega el párrafo al FINAL

$('p').prepend('<p>Este contenido es nuevo.</p>'); // idem anterior pero se agrega al PRINCIPIO

Click aquí para conocer más sobre cómo manipular contenido HTML con jQuery.

7 Escuchar y reaccionar a eventos

Se pueden attachear handlers a cualquier elemento que más tarde disparará un evento determinado, por ejemplo:

$('a').click(function() {
	// hacer algo cuando se haga click en el elemento
});

Y ya que hablamos de links o, dicho con propiedad, anchors, en el código del ejemplo anterior, nos encontraremos con un problema: al hacer click en un enlace el comportamiento por default del navegador será dirigirnos a donde el valor del href disponga, ya sea otra página o descargar un archivo, etc. “matando” la temprana ejecución de nuestro script.

En Javascript nativo la solución era usar href="javascript: void(0)" pero esto no nos permite mantener el enlace original que puede ser de mucha utilidad.

Por eso lo mejor es agregar una función que “previene” y anula el comportamiento por default. Te presento a preventDefault(); que se usa pasándole en un parámetro a la función del handler el elemento clickeado (algo así como el “this”). Veamos un ejemplo:

$('a').click(function(e) { //"e" es la variable donde está guardado el elemento que disparó el evento
    e.preventDefault(); //ahora sí, la acción de ir a donde lleva el href queda anulada
    // hacer algo cuando se haga click en el elemento
});

Claro que hay muchísimos eventos que pueden ser disparados y capturados por los handlers, algunos ejemplos son blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select.

Haz clic aquí para conocer más sobre eventos en jQuery.

8 Mostrar y ocultar elementos con jQuery

Esto la primera vez que lo ví me dejó maravillado de lo increíblemente fácil que es:

$('#miElemento').hide(); //oculta un elemento -¿así nomás? -Sí! ^_^

$('#miElemento').show(); //muestra el elemento

$('#miElemento').toggle(); //muestra y oculta el elemento con cada ejecución

Para ser más “pro”, podemos pasar como parámetro los strings ‘slow’, ‘fast’ o un integer con la cantidad de milisegundos que queremos que “tarde” la transición:

$('#miElemento').hide('slow'); //se ocultará despacio

$('#miElemento').show('fast'); //aparecerá rápidamente

$('#miElemento').toggle(1000); //tardará 1 segundo en realizar cada acción

Además se puede pasar como segundo parámetro una función callback:

$('#miElemento').hide('slow', function() {
	//hacer algo una vez que se ocultó el elemento
});

$('#miElemento').show('fast', function() {
	//hacer algo una vez que se mostró el elemento
});

$('#miElemento').toggle(1000, function() {
	//hacer algo cada vez que se ocultó o mostró el elemento
});

9 Animaciones y efectos con jQuery

Puedes deslizar y animar elementos, e incluso detener la transición en cualquier momento que quieras. Para desplegar elementos hacia arriba o abajo:

$('#miElemento').slideDown('fast', function() {
	//hacer algo cuando se desplegó el elemento
});

$('#miElemento').slideUp('slow', function() {
	//hacer algo cuando se replegó el elemento
});

$('#miElemento').slideToggle(1000, function() {
	//hacer algo cada vez
});

Para crear animaciones, jQuery irá cambiando gradualmente el css de los elementos. Por ejemplo, si tenemos un div cuadrado pegado al margen izquierdo, y deseamos deslizarlo hacia la derecha, usando el método adecuado jQuery agregará un style="margin-left:1px;" y luego un style="margin-left:2px;" y así sucesivamente hasta que llegue a la posición deseada (aclaro que agrega un par de cosas más calculando distancias y según el contexto posicionando absolutamente el elemento, pero se entiende la idea ¿no?).

$('#miElemento').animate(
	{
		opacity: .3,
		width: '500px',
		height: '700px'
	}, 2000, function() {
		//callback opcional para cuando termine la animación
	}
);

Notemos que en el ejemplo anterior se animó un elemento cambiando la opacidad y el tamaño.

Para conocer más sobre cómo realizar animaciones con jQuery visita este enlace.

10 AJAX: Javascript asincrónico vía jQuery

AJAX es una tecnología poderosísima que nos permite comunicarnos con el servidor de forma asincrónica. Con jQuery podemos realizar envíos y recibir datos por AJAX de forma tan fácil que ya no vamos a querer hacerlo de otro modo:

$.ajax({
  url: 'ajax/test.html', //url de destino, podemos agregarle parámetros para pasarlos por 'get'
  data: miVariable, //data para mandar por post, puede ser un json o lo que sea
  success: function(data) {
    $('.result').html(data);
    alert('Todo en orden.');
  }
});

Te recomiendo leer la documentación de jQuery sobre AJAX, para poder explotar a fondo sus capacidades.

¡Eso es todo por ahora! Espero que estos scriptcitos te sea de utilidad y puedas aplicarlos a tus proyectos. ¡Después me cuentas cómo te fue!