Method chaining

Otro de los aspectos geniales de jQuery es el hecho que la mayoría de los métodos retorna un objeto jQuery al que puedes usar para llamar a otro método. Esto te permite hacer cadenas de comandos, donde puedes ejecutar múltiples métodos con los mismos elementos, lo cual es genial porque te evita a ti y al navegador tener que buscar el mismo elemento más de una vez. Aquí hay un ejemplo, y no te preocupes de los métodos usados en los siguientes ejemplos - ellos serán explicados en capítulos posteriores.

<div id="divTest1"></div>
<script type="text/javascript">
	$("#divTest1").text("Hello, world!").css("color", "blue");
</script>

Esto funciona algo así: Instanciamos un nuevo objeto jQuery y seleccionamos el elemento divTest1 con el símbolo $, el cual es un atajo para la clase jQuery. En retorno, obtenemos un objeto jQuery, permitiéndonos manipular el elemento seleccionado. Usamos este objeto para llamar al método text(), el cual fija el texto del elemento(s) seleccionado. Este método retorna otra vez el objeto jQuery, permitiéndonos usar otro método directamente en el valor retornado, el cual es el método css().

Podemos agregar más métodos, si es necesario, pero en algún punto, la línea de código se hará muy larga. Afortunadamente para nosotros, JavaScript no es muy estricto en cuanto a la sintaxis, por lo que tú puedes escribirlo como desees, incluyendo saltos de línea e indentaciones. Por ejemplo, esto funcionará apropiadamente también:

<div id="divTest2"></div>
<script type="text/javascript">
	$("#divTest2").text("Hello, world!")
					.removeClass("blue")
					.addClass("bold")
					.css("color", "blue");					
</script>

JavaScript simplemente eliminará los espacios extras cuando esté interpretando el código y lo ejecutará como una larga línea de código con muchos métodos.

Nota que algunos métodos no retornan un objeto jQuery, mientras otros solo lo retornan dependiendo de los parámetros que le pasas. Un buen ejemplo de eso es el método text() usado arriba. Si no han sido pasados parámetros, el texto actual del elemento(s) seleccionado es retornado en lugar de un objeto jQuery, mientras un simple parámetro causa a jQuery fijar el texto especificado y retorna un objeto jQuery.