Pasos para utilizar jQuery en tu página web

  • Por
Una descripción de la puesta en marcha de tu primer script jQuery, en tu propia página web, paso a paso.
En este artículo te vamos a explicar cómo comenzar a utilizar jQuery en tus páginas web, paso a paso, para que puedas hacer tu primer script jQuery y así comprender los fundamentos de uso de este framework Javascript. En este punto estaría bien que sepas lo que es jQuery, lo que ha sido explicado ya en el Manual de jQuery que venimos publicando en DesarrolloWeb.com.

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.

Vídeo: Todo el proceso de creación de un primer ejemplo con jQuery relatado en este artículo lo hemos grabado en el videotutotial comenzar a programar con jQuery.

1.- Descarga la última versión del framework

Accede a la página de jQuery para descargar la última versión del framework. En el momento de escribir este artículo la release actual es la 1.3.2, y con la que hemos realizado estos ejemplos. Sin embargo, puede que haya publicado una nueva versión que mejore la actual.

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.

2.- Crea una página HTML simple

Ahora, en el mismo directorio donde has colocado el archivo js, coloca un archivo html con el siguiente código.

<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.

3.- Ejecutar código cuando la página ha sido cargada

El paso que vamos a explicar ahora es importante que se entienda, aunque sin lugar a dudas a lo largo del manual publicado en DesarrolloWeb.com, lo veremos hasta la saciedad. Se trata de detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM.

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.

4.- Insertar un manejador de evento a la etiqueta A (enlace) que hay en la página

Ahora que ya sabemos cómo y cuando debemos ejecutar las acciones de jQuery que alteren la funcionalidad, contenidos o aspecto de la página, podemos insertar un poco de código para demostrar el método de trabajo con jQuery.

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.

5.- Guarda el archivo html y ábrelo en un navegador

Una vez que tenemos hecho nuestra primera página con jQuery, la puedes guardar y ejecutarla en un navegador. Prueba hacer clic en el enlace y debería salirte la ventana de alerta.

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>

6.- Extra: Bloquear el comportamiento normal de un enlace

Ahora veamos una pequeña modificación para alterar el comportamiento por defecto de los enlaces. Como sabemos, cuando se pulsa un enlace nos lleva a una URL. Luego al hacer click, primero se ejecuta lo que hayamos colocado en el evento click del enlace y luego el enlace lleva al navegador a una nueva URL.

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.

7.- Extra 2: Documento básico con jQuery ya cargado por medio de un CDN

El código siguiente lo puedes usar de base para practicar con jQuery. Aunque sea un código bastante simple tiene algunos detalles interesantes, como la recomendación de colocar los scripts al final del documento, antes del cierre de la etiqueta BODY, el uso del resumen del "document ready" o la utilización de un CDN. Quizás es un poco pronto para comentar todo esto, básicamente también porque se explica en otros artículos dentro de este manual.

Para no alargarnos más en este artículo te dejamos el código tal cual, que podrás copiar y pegar para iniciar un documento HTML en el que ya tengas cargado jQuery y un script vacío (solo el document ready) para que comiences a insertar tu código Javascript y jQuery.

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Curso de jQuery</title>
</head>
<body>
    
    
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(function(){
            //Tu código jQuery
            
        })
    </script>
</body>
</html>

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jairo Miranda

14/4/2009
Uso de Jquery
Me parece una soluciòn muy precisa para aquellos desarrolladores de aplicaciones web , ya que se permite controlar mas la pagina. la pregunta serìa la aplicabilidad en paginas con codigo en php.

Zelote57

16/4/2009
Maravilla!
hola que tal, felicidades por el articulo, me he entretenido mucho leyéndolo, además de aprender para que funciona esta herramienta, soy diseñador web, y esto seguro me servirá mucho. Tu articulo es muy intuitivo, sigue adelante, vas bien.

Juan Carlos

21/9/2009
ya he aprendido pero tengo dudas
he utilizado varios plugins que llaman a jquery, me ha funcionado cada uno de maravilla. y con tu manual he aprendido como ponerlos, el problema es que cuando quiero poner mas de una aplicacion en mi pagina, ya no funciona, a veces funciona una o ninguna aplicacion. Cabe mencionar que sucede cuando ocupo plugins de diferente creador, pero todos ellos usando jquery. Por favor Ayuda.

Ricardo

24/9/2009
No anda el codigo
copie y pegue las rutas estan bien el js es el mismo, tan solo no anda, el ejemplo si me anda bien sera problema de mi servidor en fedora?

seba64

09/12/2009
Descarga de jQuery
Hola:
Las opciones que me aparecen en la página son:

-----------------------------------------------------------------------------------------------
Downloading

jQuery 1.3.2:

* jQuery Minified (19kb with Gzipping)
* jQuery Regular (120kb)
-----------------------------------------------------------------------------------------------

no encontre nada de PRODUCTION o DEVELOPMENT

Carlos Pérez

21/12/2009
No funciona desde un localhost
Lo dicho, no se ejecuta desde IIS ni desde Apache

midesweb

14/1/2010
Versiones de desarrollo y producción
La versión de jQuery para desarrollo es la que ellos llaman "regular", que viene jQuery sin comprimir.

La versión para producción (para el servidor definitivo al que acceden tus visitantes) es la que esta Minified, osea, comprimida, que así tarda menos en descargarse, por ocupar menos espacio en Kb.

Igual la terminología la cambiaron los de jQuery después de escribir este artículo, pero está bien claro qué es cada cosa.

midesweb

14/1/2010
No funciona en localhost???
Eso es imposible, tiene que funcionar perfectamente, en localhost, en un servidor de Internet en Hosting o si lo deseas directamente el archivo desde el disco duro de tu ordenador sin llamar a ningún servidor web.

Si no funciona es que estás haciendo algo mal. ¿Tienes el firebug para que te diga dónde está el error? Es la manera más cómoda de identificar errores Javascript, mediante la consola de Firebug (tenemos varios artículos en desarrolloweb que te enseñan a manejarla).

De todos modos, lo más típico es que te fallen las rutas al archivo .js de jQuery, porque no lo hayas copiado en tu servidor web o porque la ruta esté incorrecta por cualquier otro motivo.

henry

02/2/2010
Ayuda urgente
estoy creando una pagina con php y html y quisiera que al momento de hacer clic en uno de mis link me emita un mensaje de cargando intente lo que tienen aqui pero no me resulta y lo que necesito es que me emita un mensaje de cargando y así luego de terminar de cargar a través del del mensaje pase a la otra página porfavor ayuda urgente

Pedro

12/3/2010
JQuery otro framework para flojos
La verdad es que en lo personal estos frameworks que han salido son de mucha utilidad para que gente "floja" los ocupe sin saber poco y nada de programacion, sin siquiera documentarse respecto al tema, creo que falta mucha inciativa investigadora y hay mucha gente que sin tener estudios en el tema que se tira a la piscina y esta "desarrollando" mucha basura en la web. Progresemos, usemos la cabeza y desarrollemos nuevas tecnologias, no pensemos que todo ya esta hecho por que es el principio del subdesarrollo, seamos innovadores.

igruiz_igruiz

26/7/2010
agradecimiento
Muchas gracias por elaporte colega

_darkside_

02/5/2011
Utilizacion de Ajax.Updater en jquery
Saludos a todos, jquery para la web es una gran herramienta es mas veloz que otrros framewoks javascript y mas versatil, usa menos còdigo. Leyendo en la web trato de cambiar una funcion hecha por mi en prototype javascript framework a jquery y no comprendo los cambios que se deben hacer. Estoy novato.

Mi còdigo en prototype es:

<script language="javascript" type="text/javascript">
function modificar(nombrediv,url,id){
var ajx = new Ajax.Updater(""+nombrediv,""+url+id, {asynchronous:true, evalScripts:true});
}
</script>

Segun he leido de jquery Ajax.Updater es lo mismo que usar la funcion load(), la pregunta en concreto es ¿ Como representar las opciones indicadas en las llaves en jquery? No entiendo como representarlas. Muchas gracias y Saludos a todos

maria noel

11/5/2011
como usar un callback para un id
el tema es el siguiente yo en mi pantalla tengo mas de una etiqueta a y para cada etiqueta a necesitaria k me llame a un callback diferente como hago?

gracias

Jesus

17/5/2011
La ejecución de la descarga Jquery oficial falla
Linea 16
Caracter 1
Error: 'window' no está definido
Código 800A1391
Error en tiempo de ejecución de Microsoft JScript

Por favor indicar cómo se supera esto.

equiman

28/6/2011
Pequeña correccion
Cambiar esto: alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com"); por alert("Has pulsado el enlace...Ahora serás enviado a DesarrolloWeb.com");

Le sobra una n

Gaby

23/7/2011
ayuda
lo he intentado varias veces, pero por alguna extraña razònno puedo descargar nada de JQuery... y la verdad me urge para poder entregar bien un trabajo, alguien sabe cuàl podrìa ser el problema... o sòlo tengo mala suerte??

Jose Benzan

28/7/2011
Pequeña Correccion
equiman, no es que les sobra una "n" es que les falta el ""

cambiar esta linea
alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");

por
alert("Has pulsado el enlace... Ahora serás enviado a DesarrolloWeb.com");

para dividir el mensaje en dos lineas

Jose Benzan

28/7/2011
Pequeña Correccion
La pagina esta eliminando el backslash del comentario que puse

hay que poner "backslash"+n para hacer una nueva linea

midesweb

29/7/2011
La contrabarra polémica!!
jejeje

Pues tenemos una función que veo que nos está eliminando el caracter "contrabarra" o "backslash" si lo preferimos en inglés. Como bien apuntan varios amigos, está faltando al texto del artículo.

Gracias por vuestras correcciones!

Morro

02/10/2011
Consulta
Hola a todos, quería hacerles una consulta. Estoy haciendo una pagina, y he insertado un módulo de JQuery para visualizar imágenes. Uso Dreamweaver CS3 para la edición. El problema que tengo es el siguiente.
Cuando la ejecuto desde mi pc (localhost), veo todo sin ningun problema. Pero cuando la subo al hosting y cargo la página, me muestra todo menos las fotos (hasta el contenedor de las fotos me muestra, pero no las fotos en si).

Comento que soy neuvo en esto, por lo que no se si habría que hacer algo en el panel del hosting o qué para poder ver la página bien.

Saludos

Gonzalo

19/12/2011
:)
felicidades es una Guia muy bien desarrollada y entrenida, y me sirve mucho en mi camino de Desarrolador Web... Gracias!!!! buena pagina :)

marcos

21/12/2011
perfecto
muchísimas gracias, por fin me voy enterando... paso a la siguiente lección. Gracias mil.

worren

06/8/2012
¿se puede incluir el archivo js en el propio html?
Gracias, me ha servido de mucho :D . Estaba intentando hacer una tabla en html con n-filas, cada una de ellas expandible y contraíble, que dieran lugar a otras filas, pero no me salía, hasta que gracias a este sitio (http://www.javascripttoolbox.com/jquery/) y vuestro tutorial sobre JQuery, he podido hacerlo de otra manera, pero el efecto es el mismo. La única pega es que, para que funcione la expansión y contracción de la tabla, el archivo html debe estar junto al archivito "jquery-1.7.2.min.js", dentro de la misma carpeta. ¿Hay alguna manera de incluir el código del archivo .js dentro del propio código del archivo html, en lugar de llamarlo? ¿Cómo se escribiría? Es que quiero que esté todo en un solo archivo :)

Enrique

08/8/2013
Felicidades.
Felicidades y gracias por compartir tu conocimiento en este foro.

fom78

23/2/2014
Versiones nuevas
Por si sirve, al usar otra version, no me funcionaba...asi lo solucione

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>

Jose

20/4/2014
Excelente información
Tengo un problema con el archivo que se carga con el load(), los enlaces que están dentro de la estructura html se neutralizan y no funcionan como enlaces. Si el código se carga de forma individual, funcionan los enlaces sin problema. que podría ser?

Pato_Logico

01/9/2014
Agregar el "jquery-migrate" para trabajar con este tutorial
Fom78 tiene razón. Hay un conflicto con la nueva versión del JQuery y el código usado en este tutorial con una versión antigua.
Pero se soluciona agregando la versión "jquery-migrate", como bien señala. Gracias por el dato!

rose

19/9/2014
uso de jquery en hosting
hola escribo para preguntar cual seria la causa de un problema que tngo al subir mi proyecto a un hosting, lo que pasa es que yo cargo un select en cascada, la consulta la hago mediante el metodo post de jquery, pero al elegir una opcion del primer select no me carga las opciones del segundo, cual es la forma de escribir correctamente la ruta del metodo post cuando se utiliza un hosting?

Carlos

25/10/2014
Jquery problemas en apache
Estoy haciendo un proyecto en la cual utilizo jquery y lo tengo almacenado en un servidor (apache), cuando realizo algun cambio en un archivo .html no me actualiza esos cambios en el navegador, pero cuando abro directamente el archivo sin ejecutarlo desde el servidor esos cambios si se realizan , alguien podria que es??