JavaScript. Подробное руководство, 6-е издание

Библиотека 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:

• Вместо того чтобы определять парные методы, библиотека jQuery использует одни и те же методы как для чтения, так и для записи. Если передать методу новое значение, он запишет это значение. Если новое значение не указано, метод вернет текущее значение.

• При использовании методов для записи они записывают новое значение во все элементы, находящиеся в объекте jQuery, и возвращают объект jQuery, что позволяет использовать их в цепочках вызовов методов.

• При использовании методов для чтения они читают значение только из первого элемента в наборе и возвращают единственное значение. (Если необходимо получить значения из всех элементов, используйте методmap.) Поскольку методы чтения не возвращают объект jQuery, они могут использоваться только в конце цепочек вызовов методов.

• При использовании методов для записи они часто могут принимать объекты в виде аргументов. В этом случае каждое свойство указанного объекта будет определять имя и устанавливаемое значение.

• При использовании методов для записи они часто могут принимать вместо значений функции. В этом случае функция будет использоваться для вычисления устанавливаемого значения. Элемент, для которого должно быть вычислено значение, будет передан функции в ссылке this, в первом аргументе будет передан индекс элемента, а во втором аргументе - текущее значение.

Продолжая чтение раздела, помните об этих общих чертах методов чтения и записи. Каждый из следующих подразделов описывает отдельную категорию методов чтения/записи объекта jQuery.

19.2.1. Чтение и запись значений HTML-атрибутов

Метод attr объекта jQuery– это метод чтения/записи значений HTML-атрибутов, и к нему относятся все обобщения, описанные выше. Метод attг предусматривает решение проблемы несовместимости броузеров и обработку специальных случаев и позволяет использовать имена HTML-атрибутов или имена эквивалентных им свойств в языке JavaScript (где они отличаются). Например, можно использовать имя «for» или «htmlFor», «class» или «className». removeAttr– это родственная функция, которая полностью удаляет атрибут из всех выбранных элементов. Ниже приводятся несколько примеров использования этих методов:,

  $("form").attr("action"); // Получить атрибут action 1-й формы
  $("#icon").attr("src", "icon.gif"); // Установить атрибут sre
  $("#banner").attr({src:"banner.gif", alt:"Advertisement", // Установить сразу 4 атрибута
   width:720, height:64});
  $("a").attr("target", "_blank"); // Все ссылки загружать в новых окнах