La librería es muy sencilla de instalar, tan solo hay que ir a la web de jQuery, descargar la última versión, subirla al servidor web e incluirla en donde queráis usarla de la siguiente forma (como cualquier fichero javascript):
<script type="text/javascript" src="jquery.js"></script>
Casi todos los códigos que usen jQuery comenzarán así:
$(document).ready(inicializar);
¿Qué significa esa línea de código? "Cuando se descargue la página web por completo llama a la función 'inicializar'".
Esa función 'inicializar' será la que asignará cada evento a cada elemento del DOM de la página.
Para los ejemplos voy a utilizar una web con 6 botones y una caja de texto:
<html>
<title>Titulillo</title>
<h1>Prueba</h1>
<body>
<input type="button" id="boton1" value="click">
<input type="button" id="boton2" value="click">
<input type="button" id="boton3" value="click">
<input type="button" id="boton4" value="click">
<input type="button" id="boton5" value="click">
<input type="button" id="boton6" value="click">
<input type="text" id="text1" value="click">
</body></html>
La función 'inicializar' sería algo como lo que sigue:
function inicializar(){
$("input").click(BotonClick);
$("input").hover(
function() { $(this).addClass("blanco"); $(this).removeClass("rojo");},
function() { $(this).addClass("rojo"); $(this).removeClass("blanco"); }
);
}Esta función asocia a todos los elementos "input" de la página el evento "click" con la función 'BotonClick', así que cada vez que hagamos click en un botón de la página o en la caja de texto se ejecutará esa función.
La segunda hace lo mismo con el evento "hover", pero en esta ocasión se le asocian dos funciones, la primera se ejecutará cuando el ratón pase por encima de un elemento "input" y la segunda cuando salga de su espacio.
Otra diferencia es que las funciones asociadas son anónimas (no se pueden llamar desde otro sitio).
¿Qué hacen esas funciones? El código de las dos es muy parecido, añaden al objeto la clase rojo y eliminan la clase blanca y viceversa.
¿Para qué? Asociando los objetos de la página mediante clases se pueden manipular de forma más sencilla, por ejemplo, en el caso anterior si la página tuviera el siguiente código css:
<style>
.blanco{
background-color:#ffffff;
}
.rojo{
background-color:#ff0000;
}
</style>
Los elementos "input" de la página cambiarían de rojo a blanco y de blanco a rojo al pasar por encima de ellos con el ratón.
Hay muchas posibilidades, otro ejemplo de lo que se puede hacer:
function BotonClick(){
$(this).hide();
}El elemento en el que se haga click desaparecerá, gracias a cosas como esta se puede reconstruir la interfaz de una página dinámicamente.
