Pro jQuery

Pro jQuery

Адам Фриман

Результаты выборки

При использовании jQuery для выборки элементов из DOM возвращается результат $ функции, который называется объектом jQuery (надеюсь, вас это не запутало), который представляет ноль, один или несколько элементов DOM. На самом деле, когда совершаются операции jQuery, которые меняют один или несколько элементов, результатом, как правило, будет объект jQuery , который является важным параметром; к нему я скоро вернусь. Методы и свойства, которые определены объектом jQuery, по существу являются содержанием оставшейся части книги. Но все же есть некоторые основные характеристики, которые я рассмотрю в данной главе, они названы в таблице 5-5.

Таблица 5-5: Основные характеристики объекта jQuery
Селектор Описание Возвращает
context Возвращает набор элементов, используемых в качестве контекста для поиска HTMLElement
each(function) Выполняет функцию для каждого из выбранных элементов jQuery
get(index) Получает HTMLElement объект по указанному индексу HTMLElement
index(HTMLElement) Возвращает индекс указанного HTMLElement number
index(jQuery) Возвращает индекс первого элемента в объекте jQuery number
index(selector) Возвращает индекс первого элемента в объекте jQuery в наборе элементов соответствующего селектора number
length Возвращает число элементов, содержащихся в объекте jQuery number
selector Возвращает селектор string
size() Возвращает количество элементов в объекте jQuery number
toArray() Возвращает HTMLElement объекты, содержащиеся в объекте jQuery, в виде массива HTMLElement[]

Определение селектора

Свойство selector возвращает селектор, который описывает элементы в объекте jQuery. Если сузить или расширить выборку (о чем я расскажу в главе 6), свойство selector вернет селектор, который описывает комбинированный набор операций. В листинге 5-13 показано, как используется свойство selector.

Листинг 5-13: Использование свойства selector
<script type="text/javascript">
	$(document).ready(function () {
		var selector = $("img:odd").selector;
		console.log("Selector: " + selector);
	});
</script>

Результат выполнения этого скрипта выглядит на консоли следующим образом:

Selector: img:odd

Определение контекста

Свойство context предоставляет информацию о контексте, который был использован, когда создавался JQuery объект. Если был использован единственный HTMLElement объект, то свойство context вернет этот HTMLElement. Если же контекст не использовался или было использовано несколько элементов (как в примере, который я уже представлял в этой главе), тогда свойство context вернет undefined. В листинге 5-14 показано, как используется это свойство.

Листинг 5-14: Определение содержания объекта jQuery
...
<script type="text/javascript">
	$(document).ready(function () {
		var jq1 = $("img:odd");
		console.log("No context: " + jq1.context.tagName);

		var jq2 = $("img:odd", $(".drow"));
		console.log("Multiple context elements: " + jq2.context.tagName);

		var jq3 = $("img:odd", document.getElementById("oblock"));
		console.log("Single context element: " + jq3.context.tagName);
	});
</script>
...

Этот скрипт выбирает элементы без контекста, с несколькими контекстными объектами и с одним контекстным объектом. Результат такой:

No context: undefined
Multiple context elements: undefined
Single context element: DIV

Работа с объектами DOM

jQuery не заменяет DOM; он просто упрощает работу с ним. HTMLElement объекты (которые я представил в главе 2) используются до сих пор, а использование библиотеки jQuery упрощает переключение между объектами jQuery и DOM объектами. Мне кажется, легкость, с которой вы перемещаетесь между традиционным DOM и jQuery – это одна из составляющих изящества jQuery, которая помогает вам поддерживать совместимость с другими скриптами и библиотеками.

Создание объектов jQuery из DOM объектов

Объекты jQuery можно создавать, если в качестве аргументов $ функции передавать объект HTMLElement или массив HTMLElement объектов. Это может быть полезно в работе с кодом JavaScript, который не написан в jQuery, или в ситуации, когда jQuery раскрывает основные объекты DOM, такие как обработка событий. В листинге 5-15 содержится пример.

Листинг 5-15: Создание jQuery объектов из DOM объектов
...
<script type="text/javascript">
	$(document).ready(function () {

		var elems = document.getElementsByTagName("img");

		$(elems).mouseenter(function (e) {
			$(this).css("opacity", 0.5);
		}).mouseout(function (e) {
			$(this).css("opacity", 1.0);
		})
	});
</script>
...

В этом примере я выбрал в документе img элементы, используя метод document.getElementsByTagName вместо того чтобы использовать jQuery напрямую с селектором. Результат этого метода (который является коллекцией HTMLElement объектов) я передал $ функции, которая возвращает обычный jQuery объект, который я могу использовать так же, как в предыдущих примерах.

Этот скрипт также показывает, как можно создать jQuery объект из единственного HTMLElement объекта:

$(this).css("opacity", 1.0);

При обработке событий jQuery устанавливает значение переменной this объекту HTMLElement, который обрабатывает событие. О том, как в jQuery реализована поддержка событий, я расскажу в главе 9, поэтому я не хочу сейчас вдаваться в подробности по этому вопросу (хотя я упомяну функции, которые содержат эти выражения, чуть позже в этой главе).

Работа с jQuery объектом как с массивом

Объект jQuery можно рассматривать как массив объектов HTMLElement. Это обозначает, что вы можете использовать все продвинутые возможности, которые предоставляет jQuery, и напрямую обращаться к DOM. Можно использовать свойство length или метод size, чтобы определить, сколько элементов находится в объекте jQuery , а затем обратиться к нужным DOM объектам, используя запись, как в массиве (т.е. квадратные скобки [ ]).

Совет

Можно использовать метод toArray, чтобы извлечь HTMLElement объекты из объекта jQuery, рассматриваемого в качестве массива. Мне нравится работать с самим объектом jQuery, но иногда полезно использовать DOM объекты, например при работе с унаследованным кодом, который был написан без использования jQuery.

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

Листинг 5-16: Работа с jQuery объектом как с массивом
...
<script type="text/javascript">
	$(document).ready(function () {
		var elems = $("img:odd");
		for (var i = 0; i < elems.length; i++) {
			console.log("Element: " + elems[i].tagName + " " + elems[i].src);
		}
	});
</script>
...

В этом листинге я использовал $ функцию, чтобы выбрать нечетные элементы img и перечислить выбранные элементы, чтобы вывести значения свойств tagName и src на консоль. Результат выглядит следующим образом:

Element: IMG http://www.jacquisflowershop.com/jquery/daffodil.png
Element: IMG http://www.jacquisflowershop.com/jquery/peony.png
Element: IMG http://www.jacquisflowershop.com/jquery/snowdrop.png

Повторение функции для DOM объектов

Метод each позволяет определить функцию, которая выполняется для каждого DOM объекта в объекте jQuery. В листинге 5-17 показан пример.

Листинг 5-17: Использование метода each
...
<script type="text/javascript">
	$(document).ready(function () {
		$("img:odd").each(function (index, elem) {
			console.log("Element: " + elem.tagName + " " + elem.src);
		});
	});
</script>
...

jQuery назначает два аргумента для указанной функции. Первый аргумент – это индекс элемента в коллекции, а второй – это сам элемент. В этом примере я вывел на консоль имя тега и значение свойства src. Результат такой же, как и в предыдущем примере.

Поиск индексов и конкретных элементов

Метод index позволяет находить индекс HTMLElement в jQuery объекте. Индекс можно передать, используя в качестве аргументов объект HTMLElement или объект jQuery. Если используется объект jQuery, первый подходящий элемент этот тот, индекс которого возвращен. В листинге 5-18 показан пример.

Листинг 5-18: Нахождение индекса объекта HTMLElement
...
<script type="text/javascript">
	$(document).ready(function () {

		var elems = $("body *");

		// find an index using the basic DOM API
		var index = elems.index(document.getElementById("oblock"));
		console.log("Index using DOM element is: " + index);

		// find an index using another jQuery object
		index = elems.index($("#oblock"));
		console.log("Index using jQuery object is: " + index);
	});
</script>
...

В этом примере я вызвал DOM API метод getElementById, чтобы найти div элемент по значению атрибута id. Он возвращает HTMLElement объект. Затем я использовал метод index для объекта jQuery, чтобы найти индекс объекта, который представляет элемент div. Я повторил процесс, используя объект jQuery, который я получил из $ функции. Я вывел результаты обоих вариантов на консоль:

Index using DOM element is: 2
Index using jQuery object is: 2

Также в метод index можно добавить string. При этом string рассматривается как селектор. И в данном случае метод index ведет себя по-другому, нежели в предыдущем примере. В листинге 5-19 представлен пример.

Листинг 5-19: Использование "селекторной" версии для метода index
<script type="text/javascript">
	$(document).ready(function () {
		var imgElems = $("img:odd");
		// find an index using a selector
		index = imgElems.index("body *");
		console.log("Index using selector is: " + index);
		// perform the same task using a jQuery object
		index = $("body *").index(imgElems);
		console.log("Index using jQuery object is: " + index);
	});
</script>

Когда string добавляется в метод index, меняется порядок использования коллекции элементов. jQuery подбирает элементы, используя селектор, и затем возвращает индекс только первого соответствующего элемента jQuery объекта, для которого был вызван метод index. Это означает, что выражение:

index = imgElems.index("body *");

эквивалентно этому выражению:

index = $("body *").index(imgElems);

По существу, использование строкового аргумента меняет порядок, в котором рассматриваются два набора элементов.

Совет

Можно использовать метод index без аргумента, чтобы определить расположение элемента по отношению к его сестринским элементам. Это может быть полезно при использовании jQuery для исследования DOM. Об этом речь пойдет в главе 7.

Метод get дополняет метод index, так что вы указываете индекс и получаете объект HTMLElement, расположенный на этом месте в jQuery объекте. Результат будет таким же, как при использовании объекта jQuery в виде массива, о чем я уже рассказывал в этой главе. В листинге 5-20 показан пример.

Листинг 5-20: Получение HTMLElement объекта с заданным индексом
...
<script type="text/javascript">
	$(document).ready(function () {
		var elem = $("img:odd").get(1);
		console.log("Element: " + elem.tagName + " " + elem.src);
	});
</script>
...

В этом скрипте я выбрал нечетные элементы img, используя метод get, чтобы получить HTMLElement с индексом 1, и вывел значения свойств tagName и src на консоль. Результат выполнения скрипта следующий:

Element: IMG http://www.jacquisflowershop.com/jquery/peony.png
или RSS канал: Что новенького на smarly.net