Llamadas encadenadas de métodos en jQuery

El encadenamiento de métodos es una técnica la cuál permite ejecutar un método después de otro sin necesidad de volver a utilizar el objeto. 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 del método jQuery

Hasta ahora hemos estado escribiendo declaraciones de jQuery una a la vez (una tras otra). Sin embargo, existe una técnica llamada encadenamiento, que nos permite ejecutar múltiples comandos de jQuery, uno tras otro, en el mismo elemento.

Sugerencia: de esta manera, los navegadores no tienen que encontrar el mismo elemento (s) más de una vez.

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

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>
<p id="p1">jQuery es divertido!!</p>
<button>Hacer Click aqui</button>
</body>
</html>

Ver ejemplo anterior

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 formatearlo como desee, incluidos los saltos de línea y las sangrías.
Esto también funciona bien:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  $("#p1").css("color", "red")
 .slideUp(2000)
 .slideDown(2000);
  });
});
</script>
</head>
<body>
<p id="p1">jQuery es divertido!!</p>
<button>Hacer Click aqui</button>
</body>
</html>

Ver ejemplo anterior

Otra característica muy utilizada en la librería jQuery es la llamada sucesiva de métodos, esto se puede hacer ya que casi todos los métodos de la clase jQuery retornan un objeto de tipo jQuery.

Para entender esta sintaxis implementaremos un problema.

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que cambie la opacidad lentamente hasta el valor 0.5, seguidamente oculte el recuadro también lentamente, y el otro botón que lo muestre en forma instantánea y aumente su opacidad al 100%.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <input type="button" id="boton1" value="Reducir opacidad 
  y ocultar">
  <input type="button" id="boton2" value="Mostrar en 
  forma instantánea">
  <div id="descripcion" class="recuadro">
    <p>HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.</p>
    <p>Este lenguaje está constituido de elementos que el navegador interpreta
      y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos
      para disponer imágenes sobre una página, hipervínculos que
      nos permiten dirigirnos a otra página, listas, tablas para tabular datos,
      etc.</p>
    <p>Para poder crear una página HTML se requiere un simple editor
      de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer,
      FireFox etc.), emplearemos el navegador que en este preciso momento está
      utilizando (recuerde que usted está viendo en este preciso momento una
      página HTML con su navegador).</p>
    <p>Lo más importante es que en cada concepto desarrolle los ejercicios
      propuestos y modifique los que se presentan ya resueltos.</p>
    <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que
      nunca antes trabajó con el mismo. No pretende mostrar todas los elementos
      HTML en forma alfabética.</p>
    <p>Como veremos, de cada concepto se presenta una parte teórica,
      en la que se da una explicación completa, luego se pasa a la sección
      del ejercicio resuelto donde podemos ver el contenido de la página HTML
      y cómo la visualiza el navegador. Por último y tal vez la sección
      más importante de este tutorial es donde se propone que usted haga páginas
      en forma autónoma (donde realmente podrá darse cuenta si el concepto
      quedó firme).</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="func31.js"></script>
</body>

</html>

Ver ejemplo anterior

func31.js

$(document).ready(function () {
  $("#boton1").click(function () {
    $("#descripcion").fadeTo("slow", 0.5).hide("slow");
  });
  $("#boton2").click(function () {
    $("#descripcion").show().fadeTo("slow", 1);
  })
})

estilos31.css

.recuadro {
  background-color:#ffffcc;
  font-family:verdana;
  font-size:14px;

  border-top-width:1px;
  border-right-width:3px;
  border-bottom-width:3px;
  border-left-width:1px;

  border-top-style:dotted;
  border-right-style:solid;
  border-bottom-style:solid;
  border-left-style:dotted;

  border-top-color:#ffaa00;
  border-right-color:#ff0000;
  border-bottom-color:#ff0000;
  border-left-color:#ffaa00;
}

Como podemos observar en la siguiente línea tenemos llamadas encadenadas:

    $("#descripcion").fadeTo("slow",0.5).hide("slow");

Primero obtenemos la referencia del id descripcion, la función $ nos retorna un objeto jQuery que utilizamos directamente para llamar al método fadeTo para aumentar su opacidad lentamente. Seguidamente el método fadeTo nos retorna la referencia del objeto jQuery y la utilizamos para llamar al método hide indicándole que oculte el div lentamente.

Es importante notar que los métodos se ejecutan de izquierda a derecha.

Recordemos como era nuestro código cuando comenzamos a estudiar jQuery:

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(ocultarRecuadro);
  x = $("#boton2");
  x.click(mostrarRecuadro);
}

function ocultarRecuadro() {
  let x = $("#descripcion");
  x.fadeTo("slow", 0.5);
  x.hide("slow");
}

function mostrarRecuadro() {
  let x = $("#descripcion");
  x.show();
  x.fadeTo("slow", 1);
}

Con funciones anónimas y encadenamiento de llamadas a métodos:

$(document).ready(function () {
  $("#boton1").click(function () {
    $("#descripcion").fadeTo("slow",0.5).hide("slow");
  });
  $("#boton2").click(function () {
    $("#descripcion").show().fadeTo("slow",1);
  })
})

Luego de haber estudiado jQuery con la metodología larga no debería ser muy difícil adaptarse a esta metodología resumida.

(adsbygoogle = window.adsbygoogle || []).push({});

Llamadas encadenadas de métodos en jQuery

Encadenamiento del método jQuery