Стек jQuery

jQuery предоставляет еще одну мощную функцию, называемую метод chaining.

Chaining позволяет нам выполнять несколько методов jQuery на одном и том же элементе в одной строке.

jQuery метод chaining

До сих пор мы пишем один оператор jQuery за раз (один за другим).

Однако, существует техника, называемая chaining, которая позволяет выполнять несколько команд jQuery на одном и том же элементе в одной строке.

Таким образом, браузер не должен несколько раз находить один и тот же элемент.

Это возможно, потому что большинство методов jQuery возвращают объект jQuery, который можно использовать для вызова другого метода.

Ниже приведен пример цепочки методовcss(),hide()иshow()Метод:

$("button").click(function() {
　　$("p").css("background-color", "coral").hide(2000).show(2000);
});

Мы можем разделить одну строку кода на несколько строк для улучшения читаемости.

Например, методическая последовательность в данном примере также может быть записана следующим образом:

$("button").click(function() {
　　$("p")
　　　　.css("background-color", "coral")
　　　　.hide(2000)
　　　　.show(2000);
});

Мы можем связать любое количество методов в одном предложении:

$("button").click(function() {
　　$("div")
　　　　.animate({width: "500px"})
　　　　.animate({height: "200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

Внимание:Некоторые методы jQuery не возвращают объект jQuery, а другие возвращают его в зависимости от переданных параметров. Рассмотрим следующий пример:

// Корректное использование
$("p").css("background-color", "coral").hide(2000).show(2000);
// Некорректное использование
$("p").css("background-color", "coral").hide().show();