Hola mundo con jQuery

Como es clásico en la programación, vamos a enseñar como mostrar un Hola mundo con jQuery, en el proceso se podrá ver como trabajar básicamente con jQuery y trataremos de mostrar las diferencias que existen al momento de trabajar con jQuery y javascript.

Primero necesitamos tener la estructura básica de un documento html y cargar la librería de jQuery (en el ejemplo la librería de jQuery estará en el directorio raíz del sitio web).

< html>
< head>< title>Hola mundo con jQuery< /title>
// Cargamos la libreria de jQuery
< script type="text/javascript" src="jquery.js">< /script>
< script type="text/javascript" src="jquery.js">
// Agregamos contenido javascript
< /script>
< /head>
< body>
< /body>
< /html>

Una ves tengamos creada nuestra estructura básica, vamos a mostrar el mensaje de "Hola mundo" cuando se haga clic en un enlace, tendremos que agregar la siguiente linea después del body.-

< a hre="">Enlace< /a>

Y registraremos un evento para que el mensaje aparezca cuando se haga clic en el enlace (el siguiente código sera agregado en lugar de //Agregamos contenido javascript).-

$(document).ready(function() {
$("a").click(function () {
alert("Hola mundo");
});
});

Listo ahora vamos a explicarlo por partes.-

$("a") es un selector de jQuery donde en este caso se selecciona el elemento a, el símbolo $ es un alias a una clase en jQuery, así que que con este pequeño código $() creamos un nuevo objeto en jQuery.

La función siguiente al evento click() es un método del objeto de jQuery y este método se une al evento clic al elemento selecciono (en este caso el elemento seleccionado es "a") y ejecuta la función prevista (en este caso es un alert).

Ahora veamos como se debería de hacer usando solo código javascript sin la ayuda de la librería jQuery.-

< a href="" onclick="alert("Hola mundo")"> Enlace < /a>

La diferencia es que sin utilizar la librería jQuery deberemos de colocar un onclick a cada enlace en el que queramos mostrar el mensaje "Hola mundo", ademas de tener una clara separación del código Html y Javascript al utilizar jQuery.