La idea es que puedas ir haciendo tú mismo los pasos que vamos a relatar, para que compruebes tú mismo lo sencillo que es comenzar a utilizar jQuery. Este artículo sigue el esquema con el que los propios creadores de jQuery enseñan a utilizar su producto, así que está directamente inspirado en la documentación de jQuery.
Dan dos posibilidades para descargar, una que le llaman PRODUCTION, que es la adecuada para páginas web en producción, puesto que está minimizada y ocupa menos espacio, con lo que la carga de nuestro sitio será más rápida. La otra posibilidad es descargar la versión que llaman DEVELPOMENT, que está con el código sin comprimir, con lo que ocupa más espacio, pero se podrá leer la implementación de las funciones del framework, que puede ser interesante en etapa de desarrollo, porque podremos bucear en el código de jQuery por si tenemos que entender algún asunto del trabajo con el framework.
Verás que la descarga es un archivo js que contiene el código completo del framework. Coloca el archivo en una carpeta en tu ordenador para hacer las pruebas.
<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
<a href="http://www.desarrolloweb.com/">DesarrolloWeb.com</a>
</body>
</html>
Como podrás ver, es una página bien simple, en la que tenemos una llamada a un script externo llamado jquery-1.3.2.min.js. Este es el código de jQuery que hemos descargado de la página del framework. Si has descargado una versión distinta, quizás el archivo se llame de otra manera, así que es posible que tengas que editar ese nombre de archivo para colocar el que tengas en el directorio.
Con ese script ya hemos incluido todas las funciones de jQuery dentro de nuestra página. Sólo tienes que prestar atención a que tanto el archivo .html de esta página, como el archivo .js del framework estén en el mismo directorio. Y, como decía, que el archivo que incluimos con la etiqueta SCRIPT sea el .js que nosotros hemos descargado.
Además, como se puede ver, hemos dejado dentro del HEAD una etiqueta SCRIPT de apertura y cierre que está vacía. Todo el código que vamos a explicar a continuación tendrás que colocarlo en dentro de esa etiqueta.
Cuando hacemos ciertas acciones complejas con Javascript tenemos que estar seguros que la página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos, cambiar sus propiedades, etc. Si no esperamos a que la página esté lista para recibir instrucciones corremos un alto riesgo de obtener errores de Javascript en la ejecución.
En el taller de programación con el DOM de Javascript hemos podido explicar que es el DOM y la importancia de realizar acciones sólo cuando el DOM está listo. Pero si no queremos entretenernos con la lectura de este texto, sirve con saber que, cuando queremos hacer acciones con Javascript que modifiquen cualquier cosa de la página, tenemos que esperar a que la página esté lista para recibir esos comandos.
Generalmente, cuando se desea ejecutar Javascript después de la carga de la página, si no utilizamos ningún framework, lo más normal será utilizar un código como este:
window.onload = function () {
alert("cargado...");
}
Pero esta sentencia, que carga una funcionalidad en el evento onload del objeto window, sólo se ejecutará cuando el navegador haya descargado completamente TODOS los elementos de la página, lo que incluye imágenes, iframes, banners, etc. lo que puede tardar bastante, dependiendo de los elementos que tenga esa página y su peso.
Pero en realidad no hace falta esperar todo ese tiempo de carga de los elementos de la página para poder ejecutar sentencias Javascript que alteren el DOM de la página. Sólo habría que hacerlo cuando el navegador ha recibido el código HTML completo y lo ha procesado al renderizar la página. Para ello, jQuery incluye una manera de hacer acciones justo cuando ya está lista la página, aunque haya elementos que no hayan sido cargados del todo. Esto se hace con la siguiente sentencia.
$(document).ready(function(){
//código a ejecutar cuando el DOM está listo para recibir instrucciones.
});
Por dar una explicación a este código, digamos que con $(document) se obtiene una referencia al documento (la página web) que se está cargando. Luego, con el método ready() se define un evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la página.
Para este primer ejemplo vamos a crear un evento click en el enlace, para mostrar un mensaje cuando se haga clic sobre el link. Para crear un evento click sobre un elemento tenemos que invocar al método click sobre ese elemento y pasarle como parámetro una función con el código que queremos que se ejecute cuando se hace clic.
$("a").click(function(evento){
//aquí el código que se debe ejecutar al hacer clic
});
Como vemos en el código anterior, con $("a") obtenemos una referencia al enlace. Bueno, en realidad con ello estamos estamos seleccionando todas las etiquetas A (enlaces) del documento, pero como sólo hay un enlace, en realidad nos vale. Luego, el método click() del sobre $("a") estamos definiendo un evento, que se ejecutará cuando se haga clic sobre el enlace. Como se puede ver, al método click se le pasa una función donde se debe poner el código Javascript que queremos que se ejecute cuando se haga clic sobre el enlace.
Ahora veamos la definición del evento clic completa, colocada dentro del evento ready del document, para que se asigne cuando la página está lista.
$(document).ready(function(){
$("a").click(function(evento){
alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
});
});
Por líneas, esto es una recapitulación de lo que hemos hecho:
$(document).ready(function(){
Esta línea sirve para hacer cosas cuando la página está lista para recibir instrucciones jQuery que modifiquen el DOM.
$("a").click(function(evento){
Con esta línea estamos seleccionando todas las etiquetas A del documento y definiendo un evento click sobre esos elementos.
alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
Con esta línea simplemente mostramos un mensaje de alerta informando al usuario que se ha hecho clic sobre el enlace.
Puedes ver este script en funcionamiento en una página aparte.
Ya está hecho y funcionando tu primer script con jQuery!
Por si acaso quedaron dudas, dejamos aquí el código completo que deberías tener:
<html>
<head>
<title>Primer script con jQuery</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
});
});
</script>
</head>
<body>
<a href="http://www.desarrolloweb.com">Ir a DesarrolloWeb.com</a>
</body>
</html>
Este comportamiento se puede bloquear también desde jQuery, añadiendo una llamada al método preventDefault() sobre el evento. Si te fijas, la función definida para marcar el comportamiento del evento click sobre el enlace recibía un parámetro. Ese parámetro es un manejador de evento. Y tiene sus propios métodos y propiedades, como este preventDefault() que comentábamos. Su uso es el siguiente:
$(document).ready(function(){
$("a").click(function(evento){
alert("Has pulsado el enlace, pero vamos a cancelar el evento...nPor tanto, no vamos a llevarte a DesarrolloWeb.com");
evento.preventDefault();
});
});
Como hemos podido ver invocando a evento.preventDefault() lo que conseguimos en este caso es que el link no lleve a ningún sitio, simplemente se ejecutará el código Javascript contenido para el evento click.
| Uso de Jquery Por: Jairo Miranda | 14/4/2009
|
| Maravilla! Por: Zelote57 | 16/4/2009
|
| ya he aprendido pero tengo dudas Por: Juan Carlos | 21/9/2009
|
| No anda el codigo Por: Ricardo | 24/9/2009
|
| Descarga de jQuery Por: seba64 | 09/12/2009
|
| No funciona desde un localhost Por: Carlos Pérez | 21/12/2009
|
| Versiones de desarrollo y producción | 14/1/2010 |
| No funciona en localhost??? | 14/1/2010 |
| Ayuda urgente Por: henry | 02/2/2010
|
| JQuery otro framework para flojos Por: Pedro | 12/3/2010
|
| agradecimiento | 26/7/2010 |
 _darksi... | Utilizacion de Ajax.Updater en jquery | 02/5/2011 |
| como usar un callback para un id Por: maria noel | 11/5/2011
|
| Pequeña correccion | 28/6/2011 |
| Pequeña Correccion Por: Jose Benzan | 28/7/2011
|
| Pequeña Correccion Por: Jose Benzan | 28/7/2011
|
| La contrabarra polémica!! | 29/7/2011 |
Usuarios: 
26 de marzo de 2009
Valoración del artículo:
