Pro jQuery
Адам Фриман
Выбор элементов
Одной из наиболее сильных сторон функционала 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.