Цепочки методов

Ещё один из действительно классных аспектов jQuery это тот факт, что большинство методов возвращают объект jQuery, который вы потом можете использовать для вызова другого метода. Это позволяет вам строить цепочки команд, в которых вы можете использовать несколько методов для обработки одного набора элементов, что на самом деле здорово, потому что это позволяет вам и браузеру не тратить время на поиск одних и тех же элементов больше одного раза. Вот пример, и не переживайте на счёт jQuery методов, использованных в примерах в этой главе - о них будет рассказано в более поздних главах:

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

It works like this: We instantiate a new jQuery object and select the divTest1 element with the $ character, which is a shortcut for the jQuery class. In return, we get a jQuery object, allowing us to manipulate the selected element. We use that object to call the text() method, which sets the text of the selected element(s). This method returns the jQuery object again, allowing us to use another method call directly on the return value, which is the css() method.

We can add more method calls if needed, but at some point, the line of code will become quite long. Fortunately for us, JavaScript is not very strict when it comes to the syntax, so you can actually format it like you want, including linebreaks and indentations. For instance, this will work just fine as well:

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

JavaScript will simply throw away the extra whitespace when interpreting the code and execute it as one long line of code with several method calls.

Note that some methods doesn't return the jQuery object, while others only return it depending on the parameters you pass to it. A good example of that is the text() method used above. If no parameters are passed to it, the current text of the selected element(s) is returned instead of a jQuery object, while a single parameter causes jQuery to set the specified text and return a jQuery object.