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

19.1.2. Запросы и результаты запросов

19.1.2. Запросы и результаты запросов

Когда функции $() передается CSS-селектор, она возвращает объект jQuery, представляющий множество («выбранных») элементов, соответствующих селектору. С CSS-селекторами мы познакомились в разделе 15.2.5, куда вы можете вернуться, чтобы освежить память, - все примеры селекторов, представленные там, могут передаваться функции $(). Конкретный синтаксис селекторов, поддерживаемый библиотекой jQuery, подробно будет рассматриваться в разделе 19.8.1. Однако, прежде чем углубиться в особенности синтаксиса селекторов, мы сначала разберемся с тем, что можно делать с результатами запроса.

Возвращаемым значением функции $() является объект jQuery. Объекты jQuery -это объекты, подобные массивам: они имеют свойство length и свойства с числовыми именами, начиная с 0 до length-1. (Подробнее об объектах, подобных массивам, рассказывается в разделе 7.11.) Это означает, что к содержимому объекта jQuery можно обращаться, используя стандартный синтаксис обращения к элементам массива с квадратными скобками:

$("body").length // => 1: документ имеет единственный элемент body
$("body”)[0] // То же самое, что document.body

Если при работе с объектом jQuery вы предпочитаете не использовать синтаксис массивов, вместо свойства length можно использовать метод size(), а вместо индексов в квадратных скобках - метод get(). Если потребуется преобразовать объект jQuery в настоящий массив, можно вызвать метод toArray().

В дополнение к свойству length объекты jQuery имеют еще три свойства, представляющие определенный интерес. Свойство selector хранит строку селектора (если таковая имеется), которая использовалась при создании объекта jQuery. Свойство context ссылается на объект контекста, который был передан функции $() во вто-ром аргументе, в противном случае оно будет ссылаться на объект Document. Наконец, все объекты jQuery имеют свойство jquery, проверка наличия которого является самым простым способом отличить объект jQuery от любого другого объекта* подобного массиву. Значением свойства jquery является строка с номером версии библиотеки jQuery:

// Отыскать все элементы <script> в теле документа
var bodyscripts = $("script", document.body);
bodyscripts.selector   // => "script"
bodyscripts.context    // => document.body
bodyscripts.jquery     // => "1.4.2"

Если потребуется обойти в цикле все элементы в объекте jQuery, вместо цикла for можно использовать метод each(). Метод each() напоминает метод forEach() массивов, определяемый стандартом ECMAScript 5 (ES5). В единственном аргументе он принимает функцию обратного вызова, которая будет вызвана для каждого элемента в объекте jQuery (в порядке следования в документе). Эта функция вызывается как метод элемента, т.е. внутри функции ключевое слово this ссылается на объект Element. Кроме того, метод each() передает функции обратного вызова индекс и элемент в первом и втором аргументах. Обратите внимание, что ссылка this и второй аргумент ссылаются на обычные элементы документа, а не на объекты jQuery. Если для работы с элементом внутри функции потребуется использовать методы объекта jQuery, передайте этот элемент функции $().

Метод each() объекта jQuery имеет одну особенность, которая существенно отличает его от метода forEach(): если функция обратного вызова вернет false для какого-либо элемента, итерации будут остановлены после этого элемента (это напоминает использование ключевого слова break в обычном цикле). Метод each() возвращает объект jQuery, относительно которого он был вызван, благодаря чему он может использоваться в цепочках вызовов методов. Например (здесь используется метод prepend(), который будет описан в разделе 19.3):

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

Функция $() похожа на метод 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; // Пропустить скрытые элементы
  // Выполнить операции с видимыми элементами
}):

Оглавление книги