En JavaScript teníamos que hacerlo así:

<script type="text/javascript">

// Seleccionamos el div con id "capa"
document.getElementById("capa");

// Seleccionamos todos los div
document.getElementsByTagName("div");

// Seleccionamos todos los div con la clase "capa"
document.getElementsByClassName("capa");

</script>

Con la llegada de jQuery se simplifica muchísimo, lo podemos hacer así:

<script type="text/javascript">
$(document).ready(function(){

// Seleccionamos el div con id "capa"
$("#capa");

// Seleccionamos todos los div
$("div");

// Seleccionamos todos los div con la clase "capa"
$(".capa");

});
</script>

Una vez que ya sabemos como seleccionar un elemento y administrarlo, vamos a hacer alguna prueba muy simple:

<script type="text/javascript">
$(document).ready(function(){

// Mostramos en un alert el contenido de la capa con id "capa"
alert($("#capa").html());

// Cambiamos el contenido de la capa con clase "capa"
$(".capa").html("Probando, probando..");

});
</script>

• Ejemplo

¿Qué podemos hacer con jQuery? Realmente la pregunta sería, ¿Qué no podemos hacer con jQuery? Personalmente destacaría la facilidad con la que podemos animar una página web, sin utilizar Flash. También habría que destacar la facilidad con la que podemos hacer páginas web dinámicas interactivas, contenidos actualizables sin tener que recargar la página.

Bueno vamos a dejarnos de rollos, y comenzaremos por lo básico y más simple. Para empezar a trabajar con jQuery deberíamos bajarnos la librería desde su página web. Nos encontraremos con 2 versiones, la (Minified version) y la (Source version). Ambas funcionan igual, la versión Minified es bastante más ligera, y sino tenemos intención de modificar el código fuente original de jQuery, la mejor opción será bajar esta versión.

A día de hoy tendríamos disponible la versión 1.4.2 Comenzamos incluyendo jQuery con una etiqueta <script> dentro del <head></head> de nuestro sitio web.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Una vez hecho esto, vamos a probar que hemos cargado la librería correctamente. Antiguamente cuando queríamos ejecutar un Script al cargar la página (onload) utilizabamos esto:

<script type="text/javascript">
window.onload = function() { alert("Probando, probando..."); }
</script>

Y ahora en jQuery lo haríamos así:

<script type="text/javascript">
$(document).ready(function(){
alert("Probando, probando...");
});
</script>

Si nos sale el alert diciendo "Probando, probando…" es que habremos cargado correctamente jQuery. Ya tendríamos nuestra librería cargada y lista para trabajar con ella.

• Ejemplo