Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

// Пронумеровать элементы 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
:

  • Читать дальше
  • 1
  • ...
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: