Шрифт:
// Пронумеровать элементы div документа вплоть до элемента div#last (включительно)
$("div").each(function(idx) { // отыскать все элементы <div> и обойти их
$(this).prepend(idx +":"); // Вставить индекс в начало каждого
if (this.id === "last") return false; // Остановиться по достижении
}); // элемента «last
Несмотря на широту возможностей, метод
each
не слишком часто используется на практике, поскольку методы объекта jQuery
обычно неявно выполняют итерации по всем выбранным элементам и выполняют операции над ними всеми. Надобность в методе each
обычно возникает только в случае, когда необходимо обработать выбранные элементы каким-то другим способом. Но даже в этом случае необходимость в методе each
может отсутствовать, поскольку многие методы объекта jQuery
позволяют передавать функцию обратного вызова. Библиотека jQuery поддерживает методы массивов, определяемые стандартом ES5, и содержит пару методов, по своей функциональности похожих на методы в стандарте ES5. Метод
map
объекта jQuery
действует практически так же, как метод Array.map.
Он принимает функцию обратного вызова в виде аргумента и вызывает ее для каждого элемента в объекте jQuery
, собирая значения, возвращаемые этой функцией, и возвращая новый объект jQuery
, хранящий эти значения. Метод map
вызывает функцию точно так же, как это делает метод each:
он передает ей элемент в виде ссылки this
и во втором аргументе, а в первом аргументе - индекс элемента. Если функция обратного вызова вернет null или undefined, это значение будет проигнорировано и не будет добавлено в новый объект jQuery
. Если функция обратного вызова вернет массив или объект, подобный массиву (такой как объект jQuery
), этот объект будет «развернут» и содержащиеся в нем элементы по отдельности будут добавлены в новый объект jQuery
. Обратите внимание, что объект jQuery
, возвращаемый методом map,
может хранить объекты, не являющиеся элементами документа, но он по-прежнему будет действовать как объект, подобный массиву. Например:
// Отыскать все заголовки, отобразить их в значения их атрибутов id,
// преобразовать результат в настоящий массив и отсортировать его.
$(":header").map(function { return this.id; }).toArray.sort;
$ в сравнении c querySelectorAII
Функция
$
похожа на метод querySelectorAll
объекта Document
, с которым мы познакомились в разделе 15.2.5: оба принимают CSS-селектор в виде аргумента и возвращают объект, подобный массиву, хранящий элементы, соответствующие селектору. Библиотека jQuery использует метод querySelectorAll
в броузерах, поддерживающих его, однако существуют веские причины, почему в своих программах следует использовать функцию $
, а не метод querySelectorAll
: • Метод
querySelectorAll
был реализован производителям броузеров относительно недавно. Функция $
работает не только в новых, но и в старых броузерах. • Благодаря тому что библиотека jQuery может производить выборку элементов «вручную», селекторы CSS3, поддерживаемые функцией
$
, могут использоваться во всех броузерах, а не только в тех, что поддерживают CSS3. • Объект, подобный массиву, возвращаемый функцией
$
(объект jQuery
), намного удобнее в работе, чем объект (NodeList
), возвращаемый методом querySelectorAll
. *************************************
Наряду с методами
each
и map
объект jQuery
имеет еще один фундаментальный метод - index.
Этот метод принимает элемент в виде аргумента и возвращает его индекс в объекте jQuery
или -1, если указанный элемент не будет найден. Однако, что типично для jQuery
, метод index
имеет перегруженные версии. Если в качестве аргумента передать методу index
объект jQuery
, он попытается отыскать первый элемент из этого объекта. Если передать строку, метод index
будет использовать ее как CSS-селектор и вернет индекс первого элемента в объекте jQuery
, соответствующего селектору. А если вызвать метод index
без аргументов, он вернет индекс первого элемента в объекте jQuery
среди элементов одного с ним уровня вложенности. Последним методом общего назначения объекта
jQuery
, с которым мы познакомимся здесь, является метод is.
Он принимает селектор в виде аргумента и возвращает true, если хотя бы один из выбранных элементов соответствует указанному селектору. Его можно использовать в функции обратного вызова, передаваемой методу each,
например:
$("div").each(function { // Для каждого элемента <div>
if ($(this).is(”:hidden")) return; // Пропустить скрытые элементы
// Выполнить операции с видимыми элементами
}):
19.2. Методы чтения и записи объекта jQuery
Простейшими и часто используемыми операциями, которые выполняются над объектами
jQuery
, являются операции чтения и изменения значений HTML-атрибутов, стилей CSS, содержимого элементов и их геометрии. В данном разделе описываются методы, используемые для выполнения этих операций. Однако перед этим необходимо сделать некоторые обобщения, касающиеся методов чтения и записи объекта jQuery
: