Nota: a la fecha de este tutorial, la versión de jQuery es la 1.4.4
Es recomendable que se lea la primera parte de esta serie de tutoriales
En este tutorial aprenderás mediante ejemplos prácticos a trabajar con eventos en jQuery.
Los eventos son un tipo de métodos en jQuery que se usan para saber cuando el usuario interactua con el navegador, en este tutorial veremos los eventos relacionados al comportamiento del cursor (click, hover, toggle).
.click()
El mas común de todos es .click() este registra el comportamiento del clic del mouse sobre el elemento seleccionado, su sintaxis:
$('elemento seleccionado').click(function () {
// Que hacer cuando se haga clic sobre elemento
});
Ejemplo
Este ejemplo es bastante sencillo, es un boton que cuando se le haga clic se escondera en 500 milisegundos.
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo1').click(function () {
$(this).hide(500); // 'this' es un selector que se usa para seleccionar el elemento ya seleccionado anteriormente, en este caso #ejemplo1
});
});
</script>
<button id="ejemplo1">Hola</button>
.hover()
.hover() es el evento que registra cuando el cursor pasa por encima del elemento seleccionado, su sintaxis es:
$('elemento seleccionado').hover(function () {
// Que hacer cuando el cursor pase sobre elemento
});
A este evento también se le puede definir que hacer cuando el cursor deje de pasar sobre el elemento seleccionado, en tal caso su sintaxis cambiaria a:
$('elemento seleccionado').hover(function () {
// Que hacer cuando el cursor pase sobre el elemento
}, function (){
// Que hacer cuando el cursor deje de pasar sobre el elemento
});
Ejemplo
Haremos un ejemplo usando la segunda sintaxis:
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;position:relative;}
.acerca{
width:400px;
font-size:16px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo2').hover(function () {
$(this).animate( { opacity: 0.3 }, 400)
}, function () {
$(this).animate( { opacity: 1.0 }, 400)
});
});
</script>
<button id="ejemplo1">Hola</button>
El resultado es un botón que se aclara cuando el cursor pasa por encima pero regresa a su estado original cuando el cursor deja de pasar por el botón.
En este ejemplo usamos el método .animate() que realiza una animación usando propiedades CSS (las que van entre corchetes), luego de la coma, le defnimos en milisegundos el tiempo que queremos que dure la animación.
.toggle()
El evento .toggle() es parecido a .click() registra el comportamiento de un click, solo que este actúa como un interruptor con dos estados: ‘prendido’ o ‘apagado’, su sintaxis:
$('elemento seleccionado').toggle(function () {
// Que hacer cuando se haga clic sobre el elemento
},function () {
// Que hacer cuando se haga clic otra vez sobre el elemento
});
Ejemplo
Haremos un ejemplo sencillo con .toggle().
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;position:relative;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo3').toggle(function () {
$(this).animate({left:'200px'}, 300)
}, function () {
$(this).animate({left:'0px'}, 300)
});
});
</script>
<button id="ejemplo1">Hola</button>
El resultado es un botón que cuando se le haga click se moverá 200px a la derecha y cuando se le haga click otra vez regresara a su estado original y así sucesivamente.
Hay que notar que donde se declaran los estilos (linea 3) el elemento a animar tiene que estar en position:relative para que la propiedad left funcione.