Selectores , efectos de animación y eventos con jQuery

Los selectores de jQuery son un aspecto fundamental de la biblioteca jQuery. Se utilizan para buscar o seleccionar elementos HTML según su nombre, id, clases, tipos, atributos y valores de atributos. Los selectores de jQuery se basan en los selectores de CSS, pero también incluyen selectores personalizados.

Todos los selectores en jQuery comienzan con un signo de dólar y paréntesis: $().

Estos son algunos de los selectores de jQuery:

• Selector de elemento: Este selector selecciona elementos según el nombre del elemento. Por ejemplo, $("p") selecciona todos los elementos <p> en una página.
• Selector #id: Este selector utiliza el atributo id de una etiqueta HTML para encontrar un elemento específico. Debido a que los id deben ser únicos dentro de una página, este selector se utiliza para encontrar un único elemento. Por ejemplo, $("#test") selecciona el elemento con id="test".
• Selector .clase: Este selector encuentra elementos con una clase específica. Por ejemplo, $(".test") selecciona todos los elementos con class="test".

Lista de selectores

Sintaxis	Descripción
$(this)	Selecciona el elemento HTML actual
$(“p.intro”)	Selecciona todos los elementos <p> con class=”intro”
$(“p:first”)	Selecciona el primer elemento <p>
$(“ul li:first”)	Selecciona el primer elemento <li> del primer <ul>
$(“ul li:first-child”)	Selecciona el primer elemento <li> de cada <ul>
$(“[href]”)	Selecciona todos los elementos con un atributo href
$(“a[target=’_blank’]”)	Selecciona todos los elementos <a> con un valor de atributo target igual a “_blank”
$(“a[target!=’_blank’]”)	Selecciona todos los elementos <a> con un valor de atributo target NO igual a “_blank”
$(“button”)	Selecciona todos los elementos <button> y los elementos <input> de type=”button”
$(“tr:even”)	Selecciona todos los elementos <tr> pares
$(“tr:odd”)	Selecciona todos los elementos <tr> impares

Ejemplo de uso

<p id="mensaje">Hola</p>
<button id="cambiar">Cambiar texto</button>

<script>
  $("#cambiar").click(function() {
    $("#mensaje").text("Texto modificado con jQuery");
  });
</script>

Efectos de Animación con jQuery

La biblioteca jQuery ofrece varios métodos para agregar animación a una página web. Estas técnicas van desde animaciones simples y de uso frecuente hasta efectos personalizados más complejos.

Las capacidades de animación de jQuery incluyen:

• .animate(): Esta función permite la animación personalizada de propiedades CSS.
• .clearQueue(): Elimina elementos de la cola que aún no se han ejecutado.
• .delay(): Introduce un temporizador para retrasar la ejecución de los elementos posteriores en la cola.
• .dequeue(): Ejecuta la siguiente función en la cola para los elementos seleccionados.
• .fadeIn(): Muestra los elementos coincidentes haciéndolos aparecer gradualmente de transparente a opaco.
• .fadeOut(): Oculta los elementos coincidentes haciéndolos desaparecer gradualmente de opaco a transparente.
• .fadeTo(): Ajusta la opacidad de los elementos coincidentes a un nivel específico.
• .fadeToggle(): Alterna la visibilidad de los elementos animando su opacidad.
• .finish(): Detiene la animación que se está ejecutando actualmente, borra todas las animaciones en cola y completa todas las animaciones de los elementos coincidentes.
• .hide(): Oculta los elementos coincidentes.
• jQuery.fx.interval: Especifica la velocidad (en milisegundos) a la que se activan las animaciones.
• jQuery.fx.off: Desactiva globalmente todas las animaciones.
• jQuery.speed: Crea un objeto que contiene propiedades para definir animaciones personalizadas.
• .queue(): Permite mostrar o manipular la cola de funciones que se ejecutarán en los elementos coincidentes.
• .show(): Muestra los elementos coincidentes.
• .slideDown(): Muestra los elementos con un movimiento de deslizamiento hacia abajo.
• .slideToggle(): Alterna la visibilidad de los elementos con un movimiento de deslizamiento.
• .slideUp(): Oculta los elementos con un movimiento de deslizamiento hacia arriba.
• .stop(): Detiene la animación que se está ejecutando en los elementos coincidentes.
• .toggle(): Alterna la visibilidad de los elementos coincidentes.

Ejemplo

$("#ocultar").click(function() {
    $("#mensaje").hide();
});

$("#mostrar").click(function() {
    $("#mensaje").show();
});

Eventos de jQuery

Query está diseñado para responder fácilmente a los eventos en una página web. Los eventos son acciones del visitante a las que una página web puede responder. Los eventos representan el momento preciso en que sucede algo, como mover un mouse, seleccionar un botón de radio o hacer clic en un elemento. Los términos “activa” o “activado” se usan a menudo con los eventos. Muchos eventos DOM comunes tienen un método jQuery equivalente.

Para asignar un evento de clic a todos los párrafos de una página, puedes usar la siguiente sintaxis: $("p").click();. Para definir lo que debe suceder cuando se activa el evento, debes pasar una función al evento, por ejemplo:

$("p").click(function(){
  // ¡¡la acción va aquí!!
});

Algunos métodos de eventos de jQuery comúnmente utilizados incluyen: $(document).ready(), que ejecuta una función cuando el documento está completamente cargado; click(), que adjunta una función de controlador de eventos a un elemento HTML cuando el usuario hace clic en él; dblclick(), que ejecuta una función cuando el usuario hace doble clic en un elemento HTML; mouseenter() y mouseleave(), que ejecutan funciones cuando el puntero del mouse entra o sale de un elemento HTML, respectivamente; mousedown() y mouseup(), que ejecutan funciones cuando se presiona o se suelta un botón del mouse sobre un elemento HTML; hover(), que combina mouseenter() y mouseleave(); y focus() y blur(), que adjuntan funciones de controlador de eventos a los campos de formulario HTML cuando ganan o pierden el foco.

El método on() adjunta uno o más controladores de eventos para los elementos seleccionados. Por ejemplo, para adjuntar un evento de clic a un elemento de párrafo, puedes usar: $("p").on("click", function(){ $(this).hide(); });. También puedes adjuntar múltiples controladores de eventos a un elemento usando el método on().

mouseleave()

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

mousedown()

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

hover()

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

ready()

La función $(document).ready(function(){ ... }); en jQuery se utiliza para ejecutar código una vez que el DOM (Document Object Model) de la página web está completamente cargado. En otras palabras, el código dentro de esta función se ejecutará después de que todos los elementos HTML de la página estén listos, pero antes de que se hayan cargado completamente otros recursos como imágenes.

Esto es importante porque si intentas manipular elementos HTML con jQuery antes de que estén completamente cargados, tu código puede no funcionar. Usar $(document).ready() asegura que el código se ejecute en el momento adecuado, evitando errores y garantizando que tu script interactúe correctamente con los elementos de la página.

En esencia, es una forma de decirle al navegador: “Espera a que el HTML esté listo, y luego ejecuta este código”

$(document).ready(function(){
  $("button").click(function(){
   /**
    mensaje
   */
  });
});