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>

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.