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

До сих пор мы писали простейшие команды, где для выполнения задуманного нам требовалось выбрать элемент и применить к нему один единственный метод. Но что будет, если к выбранному объекту понадобится привязать несколько различных методов?

Представим, что нам потребовалось изменить некий текст в абзаце при клике по нему и сразу же после смены текста спрятать этот абзац. Сначала, используя обработчик события click(); мы выберем нужный элемент и применим метод text();. Затем снова обратимся к этому элементу и с помощью метода hide(); уберем его со страницы. Вот как это будет выглядеть в коде:

<script>
$(function () {
	$('p').click(function() {
		$(this).text('Текст, который появился после клика по абзацу');
		$(this).hide(2000);
	});
});
</script>

<p>Этот текст содержится в абзаце до того, как по нему кликнули.</p>

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

$(function () {
	$('p').click(function() {
		$(this).text('Текст, который появился после клика по абзацу').hide(2000);
	});
});

Такая запись называется "цепочкой". Мы просто цепляем последовательно один метод за другим и все они поочередно выполнят свои функции применительно к отобранному элементу.

Если потребуется сделать короткую паузу при выполнении цепочки методов, можно воспользоваться функцией delay();, в круглых скобках которой указать время задержки в миллисекундах. Например так:

$(function () {
	$('p').click(function() {
		$(this).text('Текст, который появился после клика по абзацу').delay(1000).hide(2000);
	});
});

Теперь мы применили к абзацу три метода и каждый из них отработает один за другим в той последовательности, в которой мы прописали их в строке - в абзаце при клике по нему сначала поменяется текст и через одну секунду он начнет плавно (в течении двух секунд) исчезать с экрана.

Что бы уж совсем стало хорошо читать написанный код, допускается и такой вид записи:

$(function () {
	$('p').click(function() {
		$(this)
		.text('Текст, который появился после клика по абзацу')
		.delay()
		.hide();
	});
});

Здесь каждый метод переносится на новую строку. Очень оправдано, если к элементу применяется ну о о очень большое количество различных изменений.

Думаю, принцип понятен. Можно на этом временно покончить с теорией и вооружившись новыми знаниями приступить к выполнению следующих задач.