domingo, 3 de agosto de 2014

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.

No hay comentarios:

Publicar un comentario