jump to navigation

Hola Mundo con jQuery Enero 23, 2009

Publicado por lineadecodigo en : jQuery , trackback

jQuery es una librería JavaScript que nos permite modificar los documentos HTML, gestionar eventos, animación y gestión AJAX de una forma sencilla.

Lo primero que tenemos que hacer para utilizar jQuery es descargarnos la librería. Todas las versiones de jQuery las podemos encontrar en http://code.google.com/p/jqueryjs/downloads/list. Actualmente la versión a descargar es jQuery-1.3.1 (versión desarrollo o versión producción).

Una vez que tengamos la librería, lo primero que tenemos que hacer es instanciarla. Para ellos simplemente cargamos la clase JavaScript.

  1. <script type="text/javascript" src="jquery-1.3.1.js"></script>

El código jQuery se pondrá dentro del evento ready(). Este evento de jQuery es el que controla que el documento HTML esté cargado. Una vez cargado el documento es cuando se empezarán a ejecutar las diferentes sentencias.

  1. $(document).ready(function(){
  2.  ...
  3. });

En lo que consistirá nuestro Hola Mundo con jQuery será en hacer que cualquier enlace de la página nos muestre una ventana de alerta diciendo "Hola Mundo".

Para acceder a un elemento del tipo anchor - A utilizamos la función $(), a la cual pasaremos el tipo de elemento HTML. Sobre este elemento vamos a gestionar el evento onClick, el cual en jQuery se maneja mediante el evento click.

  1. $("A").click(function(){...})

En el evento click mostraremos la ventana de alterta. Así que el código final quedará de la siguiente forma:

  1.  
  2. $(document).ready(function(){
  3.  $("a").click(function() {
  4.      alert("Hola Mundo con jQuery!");
  5.    });
  6. });
  7.  

Solo nos quedará incluir un elemento anchor - A dentro de la página web.

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 2448 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , ,

Comentarios»

Todavía no hay comentarios. ¿Quieres ser el primero?




Si tienes dudas sobre jQuery no dudes en visitar el Foro sobre jQuery.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen