La idea de estos mini tutoriales es que los que recién están comenzando con jQuery puedan ponerse en marcha rápidamente y conseguir llevar a cabo algunas tareas muy útiles en cortísimo tiempo. Hay que perderle el miedo a lo “desconocido” y probar nuevas tecnologías constantemente así que, si querías ver qué tal es jQuery y aún no te animabas ¡sigue leyendo!

Ten en cuenta que la idea no es que te quedes con estos “snippets” superficiales sino que con el tiempo vayas profundizando en el uso y funcionamiento de esta librería de javascript. Para sumergirte de lleno en el tema aquí está el link a la documentación oficial de jQuery.

1 Referencia al archivo fuente de jQuery alojado en Google

La idea básica es que, en vez de descargar y subir el archivo fuente de jQuery a tu propio servidor, lo llames directamente desde el servidor de Google. La mayoría de los desarrolladores hoy día usan esta técnica porque tiene muchas ventajas:

• Ahorras requests (peticiones) y transferencias desde tu servidor.
• Dado que muchos usan este método seguramente el usuario ya tiene el archivo cacheado en la memoria del navegador y por ende no se pide a ningún lado ahorrando tiempo de descarga.
• Por lo anterior, tu sitio cargará más rápido al tener un archivo menos que descargar.

Así te debería quedar la llamada al script en el código de tu sitio:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>

2 Ejecutando código no-obstrusivo cuando el DOM está listo

Si tu código deberá manipular el DOM, entonces no querrás que se ejecute antes de que este último haya cargado. Es decir, va a dar error si el script trata de extraer el valor de un atributo a un tag que aún no ha sido mapeado en el documento.

Con Javascript se suele setear un handler al evento onload del objeto window y de esta forma se asegura que esté cargada la página, pero a veces no es necesario esperar tanto para acceder a los elementos.

Gracias a jQuery contamos con un handler que va chequeando cuando el DOM está listo (tiene su propio algoritmito a prueba de todo ^_^) y cargando una función principal que se ejecute cuando document dispare el evento/método ready() nos aseguraremos de que el código siempre encontrará elementos con los cuales trabajar:

$(document).ready(function() {
	// aquí puedes llamar a una función principal o ejecutar tu código...
});

3 Seleccionar elementos con jQuery

jQuery permite seleccionar elementos envolviéndolos en $(' ') (también se pueden usar comillas “dobles”) y poniendo entre las comillas selectores de CSS entre otros, como por ejemplo:

$('div'); // selecciona tags HTML
$('#miElemento'); // apunta a un elemento con el id "miElemento"
$('.miClase'); // selecciona elementos con la clase "miClase"
$('p.miElemento'); // devuelve los párrafos con dicha clase
$('li a.navegacion'); // selecciona tags "a" hijos de "li"s

También acepta pseudo selectores y selectores de CSS3:

$('p > a');
$('input[type=text]');
$('a:first');
$('p:odd');
$('li:first-child');

Como si fuera poco, jQuery admite también selectores customizados.

4 Manipulando atributos “class” de los elementos

Por muchas razones es útil cambiar, leer, borrar o agregar clases y valores a los elementos de la página:

$('div').addClass('importante'); // agrega la clase "importante" (a los elementos seleccionados)...
$('div').removeClass('importante'); // remueve la clase anterior...
$('div').toggleClass('importante'); // agrega/quita la clase designada. cada vez que se ejecuta realiza la acción opuesta.

Para usar más tarde, podemos preguntar si un elemento tiene una clase determinada sin necesidad de hacer un “if”:

if ($('#miInput').hasClass('invalido')) {
	// acá puedo alertar el error por ejemplo...
}

5 Modificando estilos CSS de forma dinámica

jQuery permite agregar estilos CSS a los elementos de manera cross-browser, por ejemplo:

$('p').css('width', '400px'); // como primer parámetro se pasa el nombre de la propiedad y segundo el valor
$('#miElemento').css('color', 'blue');
$('ul').css('border', 'solid 1px #ccc');

Conoce más sobre manipulación de CSS con jQuery (click aquí).

No te pierdas la próxima parte, con más snippets de jQuery para que aprendas a manejar esta poderosísima librería.