feed twitter facebook LinkedIn facebook

jQuery » Hola Mundo con jQuery

enero 23, 2009 por Víctor Cuervo 4 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , ,

Artículos relacionados:

4 comentarios »

RSS feed para los comentarios de esta entrada.TrackBack URI

  1. Linea de Codigo » Cambiar el target de los enlaces con jQuery
    junio 10, 2010 #

    [...] Pero pongámonos manos a la obra. Parto de la base de que os habéis leido, o al menos echado un vistazo, al artículo de inicialización en jQuery llamado Hola Mundo con jQuery. [...]

  2. Linea de Codigo » Hola Mundo con jQuery Mobile
    mayo 9, 2012 #

    [...] (7KB)Además vamos a necesitar el framework jQuery, con el que puedes empezar mediante el Hola Mundo con jQuery o leyéndote todos los artículos de jQuery. Es importante que sepas que se necesitan las versiones [...]

  3. david
    junio 25, 2013 #

    Excelente ejemplo. Muy bien explicado
    Gracias por el aporte

  4. Víctor Cuervo
    junio 25, 2013 #

    @david,

    Me alegro que te haya gustado. :-D

    Saludos.

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*