Cómo los métodos de cadena en jQuery?
JQuery, una biblioteca de JavaScript, permite a sus usuarios escribir menos y hacer más. Puede realizar múltiples acciones escribiendo solo una línea de código. Un ejemplo de esto es el método de encadenamiento que le permite combinar una serie de métodos jQuery y aplicarlos a un elemento a la vez. Es una técnica muy divertida que disminuye su trabajo y ahorra mucho tiempo. Esta guía está diseñada para iluminar a sus lectores sobre cómo encadenar varios métodos en jQuery.
Métodos de encadenamiento en jQuery
Como ya se mencionó, podemos encadenar varios métodos jQuery para realizar múltiples acciones en un elemento HTML de una vez. Esto se puede hacer seleccionando un elemento y escribiendo todos los métodos requeridos en una sola línea separada por un punto.
La mayor ventaja de usar el método de encadenamiento es que evita que el navegador rastree el mismo elemento más de una vez. En otras palabras, no hay absolutamente ninguna necesidad de usar el mismo selector una y otra vez, disminuyendo así las posibilidades de ralentizar su código.
Exploremos cómo encadenar los métodos en jQuery con la ayuda de ejemplos.
Ejemplo 1
En este ejemplo, estamos encadenando dos métodos jQuery que son CSS () y Animate ().
Html
Métodos de encadenamiento de jQuery
En el código HTML anterior, se crean dos elementos que son
, y . Ahora encadenaremos los métodos css () y animate () en el
elemento para ver cómo funcionan los métodos de encadenamiento en jQuery.
jQuery
$ (documento).Ready (function ()ps.botón").hacer clic (function ()
$ ("P").CSS ("color", "verde").Animate (ancho: "100%")
.Animate (FontSize: "46px").Animate (Opacidad: "0.4 ");
);
);
En el código anterior, hemos aplicado color al
elemento usando el método CSS () y establecer ancho, fontSize y opacidad en el mismo elemento usando el método animate ().
Producción
Cuando se hace clic en el botón, esto es lo que sucede.
Los métodos CSS () y Animate () están encadenados con éxito.
Como puede ver en el ejemplo anterior, encadenamos los métodos jQuery en una sola línea de código, sin embargo, el código funcionará bien incluso si desea dividir el código en múltiples líneas para mejorar la legibilidad.
jQuery
$ ("P").CSS ("color", "verde").Animate (ancho: "100%")
.Animate (FontSize: "46px")
.Animate (Opacidad: "0.4 ");
No habrá absolutamente ningún efecto en la salida.
Ejemplo 2
El siguiente ejemplo ilustra cómo en cadena los métodos slideUp (), slideown () y fadeout () simultáneamente.
Html
Métodos de encadenamiento de jQuery
En el código HTML anterior se crean dos elementos que están
, y . Let's Chain SlideUp (), slideown () y fadeout () para ver el efecto resultante.
jQuery
$ (documento).Ready (function ()ps.botón").hacer clic (function ()
$ ("H1").SlideUp (1000).SlideDada (1000).Fadeout (1000);
);
);
En el código anterior, a cada uno de los métodos se les ha asignado una velocidad de 1000 milisegundos.
Producción
Los métodos slideUp (), slideown () y fadeout () están encadenados y funcionan correctamente.
Métodos de encadenamiento sin argumentos de aprobación
Si no pasa ningún parámetro a un método jQuery, no devolverá un objeto jQuery, sino que simplemente devolverá el contenido del elemento especificado en su lugar.
Ejemplo
En este ejemplo, estamos encadenando los métodos html (), addclass () y ocultador ().
Html
Algunos encabezados
Algún párrafo.
Se han creado tres elementos HTML que están
,
, y .
jQuery
$ (documento).Ready (function ()$ ("botón").hacer clic (function ()
// esto funcionará
$ ("H1").html ("algunos encabezados").addClass ("demo").Fadeout (1000);
//Esto no funcionará
$ ("P").html ().addClass ("demo");
);
);
En el código anterior, hemos pasado el parámetro al método html () al aplicar en
solo. Sin embargo, no se pasó ningún parámetro al método html () en el caso de
. Por lo tanto, los efectos del encadenamiento solo funcionarán para
, Y no para
.
Producción
No hay efecto en el párrafo.
Conclusión
El encadenamiento de varios métodos jQuery se puede hacer seleccionando un elemento y escribiendo todos los métodos requeridos en una sola línea separada por un punto para realizar múltiples acciones en un elemento HTML de una vez. La ventaja de hacerlo es que evita que el navegador rastree el mismo elemento una y otra vez, además, disminuyendo las posibilidades de ralentizar su código. Este artículo te guía sobre cómo encadenar los métodos en jQuery con la ayuda de ejemplos adecuados.