Главная страница   /   5.5. Выбор элементов (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

5.5. Выбор элементов

Одной из наиболее сильных сторон функционала jQuery является выбор элемента из DOM. В примере скрипта я выбрал все нечетные img, как показано в листинге 5-10.

Листинг 5-10: Выбор элементов из DOM
...
<script type="text/javascript">
	$(document).ready(function () {
		$("img:odd").mouseenter(function (e) {
			$(this).css("opacity", 0.5);
		}).mouseout(function (e) {
			$(this).css("opacity", 1.0);
		})
	});
</script>
...

Чтобы выбрать элементы, нужно просто добавить селектор в функцию $. jQuery поддерживает все селекторы CSS, которые я описал в главе 3, а также некоторые дополнительные селекторы, которые дают вам более точные уникальные возможности выбора элемента. В примере я использовал псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае img, который выбирает все элементы img, как было описано в главе 2). При использовании селектора :odd отсчет элементов начинается с нуля, то есть принято считать, что первый элемент четный. По началу это может показаться немного запутанным. В таблице 5-3 перечислены наиболее полезные селекторы jQuery.

Совет

Можно создать пустую выборку, вызвав функцию $ без аргументов ($()). Я упомянул об этом для полноты картины, лично я сам никогда не использовал эту возможность.

Таблица 5-3: Расширенный набор селекторов jQuery
Селектор Описание
:animated Выбирает все элементы с анимацией
:contains(text) Выбирает элементы, которые содержат указанный текст
:eq(n) Выбирает элемент n-ого индекса (отсчет начинается с нуля)
:even Выбирает четные элементы (отсчет начинается с единицы)
:first Выбирает первый подходящий элемент
:gt(n) Выбирает все элементы с индексом больше n (отсчет начинается с нуля)
:has(selector) Выбирает элементы, которые содержат минимум один элемент, который подходит указанному селектору
:last Выбирает последний подходящий элемент
:lt(n) Выбирает все элементы с индексом меньше n (отсчет начинается с нуля)
:odd Выбирает нечетные элементы (отсчет начинается с нуля)
:text Выбирает все текстовые элементы

Я назвал эти селекторы наиболее полезными, потому что они определяют функционал, который сложно воспроизвести, используя селекторы CSS. Эти селекторы используются так же, как псевдоселекторы CSS. Они могут использоваться самостоятельно, и в данном случае они применяются ко всем элементам DOM, вот так:

$(":even")

или в комбинации с другими селекторами, уточняя результат их выборки

$("img:even")

Вдобавок, jQuery определяет некоторые селекторы, которые выбирают элементы, основываясь на их типе, как показано в таблице 5-4.

Таблица 5-4: Расширенный список селекторов jQuery для выборки по типу
Селектор Описание
:button Выбирает все кнопки
:checkbox Выбирает все чекбоксы
:file Выбирает все файловые элементы
:header Выбирает все заголовки (h1, h2, и т.д.)
:hidden Выбирает все спрятанные элементы
:image Выбирает все рисунки
:input Выбирает все элементы ввода данных
:last Выбирает последний подходящий элемент
:parent Выбирает все родительские элементы
:password Выбирает все пароли
:radio Выбирает все радиобатонны
:reset Выбирает все элементы, которые очищают форму
:selected Выбирает все элементы, которые выбраны
:submit Выбирает все элементы отправки формы
:visible Выбирает все видимые элементы

Сужение области поиска при помощи содержания

По умолчанию, jQuery ищет элементы во всем DOM. Область поиска можно сузить, если указать дополнительный аргумент в $ функции. Это добавляет поиску содержание, которое используется как отправная точка для подходящих элементов. В листинге 5-11 показан пример этого.

Листинг 5-11: Сужение области поиска при помощи контекста
<script type="text/javascript">
	$(document).ready(function () {

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

В этом примере я использовал одну выборку jQuery в качестве контекста для другой. Сначала оценивается содержание, и оно подходит всем элементам, которые являются членами класса drow. Этот набор элементов потом используется в качестве контекста для селектора img:odd.

Когда вы добавляете контекст, который содержит несколько элементов, тогда каждый элемент используется как отправная точка для поиска. В этом методе выборки есть интересная тонкость. Сначала элементы, которые соответствуют контексту, собираются вместе, а потом выполняется главная выборка. Для этого примера это обозначает, что селектор img:odd будет применяться к результатам выборки селектора drow , т.е. выбранные нечетные элементы будут не теми же самыми, как если бы выборка шла по всему документу. В итоге эффект прозрачности будет применяться к нечетным элементам img в каждом элементе div в классе drow. Это рисунки для нарцисса и примулы. Если же опустить контекст, эффект будет применяться к рисункам для нарцисса, пиона и подснежника.

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

Листинг 5-12: Использование HTMLElement в качестве контекста
<script type="text/javascript">
	$(document).ready(function () {
		var elem = document.getElementById("oblock");

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

Скрипт в этом примере ищет нечетные элементы img, ограничивая поиск только теми элементами, которые являются потомками элемента с id равном oblock. Конечно, можно достичь такого же результата, используя CSS селектор потомков. Преимущество этого метода состоит в том, что вы программно сужаете область поиска, а не создаете селектор. Этот подход может хорошо показать себя при обработке событий. О событиях вы узнаете больше (и увидите, как ведет себя в этой ситуации объект HTMLElement) в главе 9.