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

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

// Отыскать все элементы <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;

$ в сравнении 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

: