• jQuery

    jQuery Rápido y Fácil: Eventos

    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>
    
    
    

    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>
    
    
    

    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.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese
Acerca de

WebTursos es un blog de tutoriales, articulos y recursos para diseñadores y desarrolladores web. mas...

Suscribete

Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada: