Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/efectos»

De WikiEducator
Saltar a: navegación, buscar
(→‎Como funcionan los eventos en jQuery)
Línea 33: Línea 33:
  
 
</div>
 
</div>
 +
==Lista de eventos==
 +
===Eventos del 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.
 +
:Se generarán también dos eventos click()
 +
</div>
 +
<div class="slide">
 +
;mousedown()
 +
:Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no.
 +
:Sirve tanto para el botón derecho como el izquierdo del ratón.
 +
:Útil para drag&drop
 +
<source lang="javascript">
 +
$("#p").mousedown(function (b) {
 +
    alert(b.which);
 +
    //b puede ser 1, 2 o 3 (botón izquierdo, central o derecho)
 +
});
 +
</source>
  
−
;Eventos del Ratón
+
</div>
 +
<div class="slide">
 +
 
 +
;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.
 +
;mousemove()
 +
:Evento que se produce al mover el ratón sobre un elemento de la página.
 +
<source lang="javascript">
 +
$("#contendedor").mousemove(function (c) {
 +
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
 +
    });
 +
</source>
 +
</div>
 +
<div class="slide">
 +
;mouseover() y mouseout()
 +
:Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).
 +
;mouseenter() y mouseleave()
 +
:Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.
 +
 
 +
</div>
 +
<div class="slide">
 +
 
 +
;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.
 +
:A menudo utilizaremos este evento mejor en vez de mouseenter() y mouseleave().
 +
<source lang="javascript">
 +
.hover(function() {
 +
    //Escribmos el código a ejecutar cuando el ratón se poner sobre el objeto
 +
  }, function() {
 +
    //Escribmos el código a ejecutar cuando el ratón sale del objeto});
 +
//Ejemplo:
 +
$("#p").hover(function () {
 +
    $(this).css("background-color", "blue");
 +
  }, function () {
 +
    $(this).css("background-color", "white");
 +
});
 +
</source>
 +
 
 +
</div>
 +
<div class="slide">
 +
 
 +
;toggle()
 +
:Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.
 +
<source lang="javascript">
 +
$("#p").toggle(function () {
 +
  $(this).css("background-color", "blue");
 +
  }, function () {
 +
    $(this).css("background-color", "red");
 +
  }, function () {
 +
    $(this).css("background-color", "yellow");
 +
});
 +
</source>
 +
</div>
 +
<div class="slide">

Revisión de 23:11 5 abr 2016



Eventos

  • Ya sabemos lo que son los eventos (acciones que ocurren sobre los objetos)
  • JQuery está preparado para interactuar con los eventos que ocurren sobre los objetos de nuestro dom
  • Vamos a exponer los principales eventos agrupándolos según el objeto que los origina
  1. Eventos de Ratón
  2. Eventos de Teclado
  3. Eventos de formulario
  4. Eventos de la ventana o documento

Como funcionan los eventos en jQuery

  • Tomemos el siguiente Ejemplo 
$("button").click(function(miEvento){
   miEvento.preventDefault();
   alert("Has hecho clic en esta ancla. Como he hecho preventDefault, no te llevaré al href");
});
  • El evento se define sobre todos los objetos seleccionados mediante el selector jQuery
En el caso anterior sobre todas las anclas <a....> del documento
  • El tipo de evento lo definimos con la función click en este caso. Luego veremos una lista de eventos disponibles.
  • El evento recibe una función anónima como parámetro donde indicamos todas las acciones que queremos que se ejecuten cuando ocurra el evento.
  • Esta función anónima puede recibir como parámetro el objeto evento que se ha generado cuando ha ocurrido el evento

EventoJQuery.png

  • 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()


Lista de eventos

===Eventos del 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.
Se generarán también dos eventos click()

</div>

mousedown()
Para generar un evento cuando el usuario hace clic independientemente de si lo suelta o no.
Sirve tanto para el botón derecho como el izquierdo del ratón.
Útil para drag&drop 
$("#p").mousedown(function (b) {
    alert(b.which);
    //b puede ser 1, 2 o 3 (botón izquierdo, central o derecho)
});
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.
mousemove()
Evento que se produce al mover el ratón sobre un elemento de la página. 
$("#contendedor").mousemove(function (c) {
        $(this).html("El ratón se está moviendo. Las coordenadas son " + c.pageX + ", " + c.pageY);
    });
mouseover() y mouseout()
Sirve para lo mismo que los eventos mouseover y mouseout de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que pueden producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido (por los elementos anidados).
mouseenter() y mouseleave()
Normalmente preferiremos estos eventos respecto a los originales de javascript ya que se ejecutarán sólo una vez.
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.
A menudo utilizaremos este evento mejor en vez de mouseenter() y mouseleave(). 
.hover(function() {
     //Escribmos el código a ejecutar cuando el ratón se poner sobre el objeto
  }, function() {
     //Escribmos el código a ejecutar cuando el ratón sale del objeto});
//Ejemplo:
$("#p").hover(function () {
     $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "white");
});
toggle()
Sirve para indicar dos o más funciones para ejecutar cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics. 
$("#p").toggle(function () {
  $(this).css("background-color", "blue");
  }, function () {
     $(this).css("background-color", "red");
  }, function () {
     $(this).css("background-color", "yellow");
});
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/efectos&oldid=19265»