Pro jQuery

Адам Фриман

Изменение нескольких элементов и вызов цепочки методов

Одной из особенностей, которые делают jQuery таким четким и выразительным, является то, что вызов метода для jQuery объекта, как правило, меняет все элементы, которые содержатся в данном объекте. Я сказал "как правило", потому что некоторые методы совершают операции, выполнение которых для множества элементов не имеет смысла; вы это увидите в следующих главах. В листинге 5-21 показано, насколько сильно jQuery облегчает жизнь по сравнению с базовым DOM API.

...
<script type="text/javascript">
	$(document).ready(function () {

		$("label").css("color", "blue");

		var labelElems = document.getElementsByTagName("label");
		for (var i = 0; i < labelElems.length; i++) {
			labelElems[i].style.color = "blue";
		}
	});
</script>
...

В этом примере я выбираю в документе все элементы label и меняю значение свойства color на blue. В jQuery я делаю это в одном выражении, а при использовании DOM API на это потребуется больше усилий. Также мне кажется, что смысл выражения jQuery очевиден, но это мое личное мнение.

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

...
<script type="text/javascript">
	$(document).ready(function () {

		$("label").css("color", "blue").css("font-size", ".75em");

		var labelElems = document.getElementsByTagName("label");
		for (var i = 0; i < labelElems.length; i++) {
			labelElems[i].style.color = "blue";
			labelElems[i].style.fontSize = ".75em";
		}
	});
</script>
...

В этом примере я создал jQuery объект, используя $ функцию, вызвал метод css и установил значение для свойства color, а затем снова вызвал метод css, на этот раз чтобы установить значение для свойства font-size. Также я продемонстрировал эквивалентное решение, используя DOM API. Вы видите, что тут не требуется намного больше работы, чтобы получить тот же результат, потому что есть цикл for, который перечисляет выбранные элементы.

Вы получите реальную выгоду тогда, когда будете использовать цепочку методов, которые вносят более существенные изменения в коллекцию элементов, содержащихся в jQuery объекте. В листинге 5-23 показан пример.

<script type="text/javascript">
	$(document).ready(function () {
		$("label").css("color", "blue").add("input[name!="rose"]")
								.filter("[for!="snowdrop"]").css("font-size", ".75em");

		var elems = document.getElementsByTagName("label");
		for (var i = 0; i < elems.length; i++) {
			elems[i].style.color = "blue";
			if (elems[i].getAttribute("for") != "snowdrop") {
				elems[i].style.fontSize = ".75em";
			}
		}
		elems = document.getElementsByTagName("input");
		for (var i = 0; i < elems.length; i++) {
			if (elems[i].getAttribute("name") != "rose") {
				elems[i].style.fontSize = ".75em";
			}
		}
	});
</script>

В этом примере хорошо продемонстрирована гибкость jQuery. Давайте рассмотрим каждый метод по отдельности, чтобы понять, как это работает. Начнем с этого:

$("label").css("color", "blue")

Это хорошее и простое начало. Я выбрал в документе все элементы label и для них всех CSS свойству color установил значение blue. Следующий шаг:

$("label").css("color", "blue").add("input[name!="rose"]")

Метод add добавляет элементы, которые соответствуют указанному селектору в объект jQuery. В данном случае я выбрал все элементы input, значение атрибута name которых не является rose. Эти элементы объединяются с предыдущими выбранными элементами, и у меня есть комплекс из элементов label и input. О методе add подробнее будет рассказано в главе 6. Вот следующее дополнение:

$("label").css("color", "blue").add("input[name!="rose"]").filter("[for!="snowdrop"]")

Метод filter убирает все элементы из jQuery объекта, которые не соответствуют указанному условию. Более подробно об этом методе я расскажу в главе 6, а на данный момент достаточно знать, что это позволяет мне удалить любой элемент из jQuery объекта, значением атрибута for которого является snowdrop.

$("label").css("color", "blue").add("input[name!="rose"]")
						.filter("[for!="snowdrop"]").css("font-size", ".75em");

И завершающим шагом является вызов метода css снова, на этот раз для указания значения .75em свойству font-size. И вот конечный результат этой работы:

1. Для всех элементов label для CSS свойства color установлено значение blue.
2. Для всех элементов label кроме одного, значение атрибута for которого равно snowdrop, присвоено значение .75em CSS свойству font-size.
3. Для всех элементов input, у которых значение атрибута name не равно rose, присвоено значение .75em CSS свойству font-size.

Намного сложнее получить такой же результат при использовании DOM API, и я столкнулся с некоторыми сложностями, пока писал этот скрипт. Например, я думал, что могу использовать метод document.querySelectorAll, описанный во второй главе, чтобы выбрать input элементы, используя селектор input[name!="rose"], но выяснилось, что атрибутивный фильтр такого рода не работает с этим методом. Потом я пытался избежать дублирования вызова метода для указания значения для font-size, объединив результаты двух getElementsByTagName, но этот опыт оказался довольно болезненным. Я не хочу мучить вас подробностями, тем более если у вас есть устойчивый интерес к jQuery и прочтению данной книги. Но хочу сказать, что jQuery обеспечивает тот уровень гибкости и выразительности, которого невозможно достичь, используя базовый DOM API.

Подписаться

или RSS канал: