JQuery предоставляет еще одну надежную функцию, называемую цепочкой методов (chaining method), которая позволяет нам выполнять несколько действий с одним и тем же набором элементов в одной строке кода.
Это возможно, потому что большинство jQuery-методов возвращают объект jQuery, который можно в дальнейшем использовать для вызова другого метода. Вот пример.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
});
});
</script>
Приведенный выше пример демонстрирует сцепление трех методов animate()
. Когда пользователь нажимает кнопку триггера, он увеличивает ширину <p>
до 100%
. Как только изменение width
завершено, начинается анимация font-size
, и после его завершения начинается анимация border
.
Цепочка методов не только помогает сохранить краткость кода jQuery, но также может повысить производительность вашего скрипта, поскольку браузеру не нужно многократно находить одни и те же элементы, чтобы что-то с ними сделать.
Вы также можете разбить одну строку кода на несколько для большей читабельности. Например, последовательность методов в приведенном выше примере может быть записана так:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p")
.animate({width: "100%"})
.animate({fontSize: "46px"})
.animate({borderWidth: 30});
});
});
</script>
Некоторые методы jQuery не возвращают объект jQuery. В общем, сеттеры (от set — устанавливать), то есть методы, которые присваивают какое-либо значение для выбора, возвращают объект jQuery, что позволяет вам продолжать вызывать методы jQuery для вашего выбора. А геттеры (от get — получать) возвращают запрошенное значение, поэтому вы не можете продолжать вызывать методы для jQuery объекта.
Типичным примером этого сценария является метод html()
. Если ему не переданы никакие параметры, содержимое HTML выбранного элемента возвращается вместо объекта jQuery.
<script>
$(document).ready(function(){
$("button").click(function(){
// Это будет работать
$("h1").html("Hello World!").addClass("test");
// Это не будет работать
$("p").html().addClass("test");
});
});
</script>