jQuery - Encadenamiento


Con jQuery, puede encadenar acciones/métodos.

El encadenamiento nos permite ejecutar múltiples métodos jQuery (en el mismo elemento) dentro de una sola declaración.


Encadenamiento de métodos jQuery

Hasta ahora hemos estado escribiendo declaraciones jQuery una a la vez (una tras otra).

Sin embargo, existe una técnica llamada encadenamiento, que nos permite ejecutar varios comandos de jQuery, uno tras otro, en los mismos elementos.

Sugerencia: De esta manera, los navegadores no tienen que encontrar los mismos elementos más de una vez.

Para encadenar una acción, simplemente agregue la acción a la acción anterior.

El siguiente ejemplo encadena los métodos css(), slideUp()y . slideDown()El elemento "p1" primero cambia a rojo, luego se desliza hacia arriba y luego hacia abajo:

Ejemplo

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

También podríamos haber agregado más llamadas a métodos si fuera necesario.

Sugerencia : al encadenar, la línea de código puede volverse bastante larga. Sin embargo, jQuery no es muy estricto con la sintaxis; puede darle el formato que desee, incluidos los saltos de línea y las sangrías.

Esto también funciona bien:

Ejemplo

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

jQuery elimina los espacios en blanco adicionales y ejecuta las líneas anteriores como una línea larga de código.