Eventos en jQuery

Como funcionan los eventos en jQuery

$(".mienlace").click(function(mievento){
   mievento.preventDefault();
   alert("Has hecho clicnComo he hecho preventDefault, no te llevaré al href");
});

• El evento se define sobre todos los objetos seleccionados mediante el selector jQuery

En este caso todos los elementos con class=mienlace

• El tipo de evento lo definimos con la función click o similares.
• El evento define como parámetro una función que será la manejadora del evento.
• La función manejadora del evento tiene a su vez un parámetro mievento que nos permite utilizar las propiedades o métodos del evento en cuestión.

En este caso utilizaremos el método preventDefault()

Listado de Eventos

Eventos relacionados con el ratón

• click()

Sirve para generar un evento cuando se produce un clic en un elemento de la página.

• dblclick()

Para generar un evento cuando se produce un doble clic sobre un elemento.

• hover()

Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos.

• mousedown()

Para generar un evento cuando el usuario hace clic, en el momento que presiona el botón e independientemente de si lo suelta o no. Sirve tanto para el botón derecho como el izquierdo del ratón.

• mouseup()

Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón. El evento mouseup se produce sólo en el momento de soltar el botón.

• mouseenter()

Este evento se produce al situar el ratón encima de un elemento de la página.

• mouseleave()

Este se desata cuando el ratón sale de encima de un elemento de la página.

• mousemove()

Evento que se produce al mover el ratón sobre un elemento de la página.

• mouseout()

Este evento sirve para lo mismo que el evento mouseout de JavaScript. Se desata cuando el usuario sale con el ratón de la superficie de un elemento.

• mouseover()

Sirve para lo mismo que el evento mouseover de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que puede producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido.

• toggle()

Sirve para indicar dos o más funciones para ejecutar cosas cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.

• Podemos modificar también el valor de los atributos pasando un segundo parámetro:

//modificamos el atributo title:
$("a").attr("title", "Mi nuevo título");

Método prop()

$(elemento).prop("checked", true);

• ¿Cuándo usar attr() y cuando prop()?

Atributos que se modifican con attr(): class, id, href, label, src, title...

Propiedades que se modifican con prop(): autofocus, checked, async, multiple, readOnly...

Manipulación de css

Obtiene la propiedad CSS del primer elemento seleccionado:

//$(selector).css(name) 	
$(this).css("background-color");

Establece el valor de una propiedad CSS de los elementos seleccionados:

//$(selector).css(name,value) 	
$("p").css("background-color","yellow");

Establece varias propiedades CSS de los elementos seleccionados:

//$(selector).css({properties}) 
$("p").css({"background-color":"yellow","font-size":"200%"});

Establece la altura de los elementos seleccionados:

//$(selector).height(value) 	
$("#div1").height("200px");

Establece la anchura de los elementos seleccionados:

//$(selector).width(value) 	
$("#div2").width("300px");

Formularios

• Función val(): para obtener los valores de los elementos o inicializarlos.

/*Inicializamos la caja de texto y luego guardamos su contenido en una variable*/
$("textarea").val("Esto es una caja de texto");
var texto = $("textarea").val();

• En caso de inicializar varios valores a la vez (por ejemplo un select múltiple), los pondremos entre corchetes:

$("select").val(["Pedro", "Juan", "Miguel"]);

• Función text(): Obtiene o establece el contenido de los elementos seleccionados.
• Es parecida a html(), pero obtendremos solo texto, sin etiquetas:

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
 
<body>
<p id="test">Texto con <b>negrita</b></p>
<button id="btn1">Ver texto</button>
<button id="btn2">Ver html</button>
</body>
</html>