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

<b>// Отыскать все элементы &lt;script&gt; в теле документа</b>

<b>var bodyscripts = $(&quot;script&quot;, document.body); </b>

<b>bodyscripts.selector   // =&gt; &quot;script&quot; </b>

<b>bodyscripts.context    // =&gt; document.body </b>

<b>bodyscripts.jquery     // =&gt; &quot;1.4.2&quot;</b>

Если потребуется обойти в цикле все элементы в объекте

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

Метод

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

<b>// Пронумеровать элементы div документа вплоть до элемента div#last (включительно) </b>

<b>$(&quot;div&quot;).each(function(idx) { // отыскать все элементы &lt;div&gt; и обойти их</b>

<b>$(this).prepend(idx +&quot;:&quot;);    // Вставить индекс в начало каждого</b>

<b>if (this.id === &quot;last&quot;) return false; // Остановиться по достижении </b>

<b>});                                   // элемента «last</b>

Несмотря на широту возможностей, метод

<b>each()</b>
не слишком часто используется на практике, поскольку методы объекта
<b>jQuery</b>
обычно неявно выполняют итерации по всем выбранным элементам и выполняют операции над ними всеми. Надобность в методе
<b>each()</b>
обычно возникает только в случае, когда необходимо обработать выбранные элементы каким-то другим способом. Но даже в этом случае необходимость в методе
<b>each()</b>
может отсутствовать, поскольку многие методы объекта
<b>jQuery</b>
позволяют передавать функцию обратного вызова.

Библиотека jQuery поддерживает методы массивов, определяемые стандартом ES5, и содержит пару методов, по своей функциональности похожих на методы в стандарте ES5. Метод

<b>map()</b>
объекта
<b>jQuery</b>
действует практически так же, как метод
<b>Array.map().</b>
Он принимает функцию обратного вызова в виде аргумента и вызывает ее для каждого элемента в объекте
<b>jQuery</b>
, собирая значения, возвращаемые этой функцией, и возвращая новый объект
<b>jQuery</b>
, хранящий эти значения. Метод
<b>map()</b>
вызывает функцию точно так же, как это делает метод
<b>each():</b>
он передает ей элемент в виде ссылки
<b>this</b>
и во втором аргументе, а в первом аргументе - индекс элемента. Если функция обратного вызова вернет null или undefined, это значение будет проигнорировано и не будет добавлено в новый объект
<b>jQuery</b>
. Если функция обратного вызова вернет массив или объект, подобный массиву (такой как объект
<b>jQuery</b>
), этот объект будет «развернут» и содержащиеся в нем элементы по отдельности будут добавлены в новый объект
<b>jQuery</b>
. Обратите внимание, что объект
<b>jQuery</b>
, возвращаемый методом
<b>map(),</b>
может хранить объекты, не являющиеся элементами документа, но он по-прежнему будет действовать как объект, подобный массиву. Например:

<b>// Отыскать все заголовки, отобразить их в значения их атрибутов id,</b>

<b>// преобразовать результат в настоящий массив и отсортировать его.</b>

<b>$(&quot;:header&quot;).map(function() { return this.id; }).toArray().sort();</b>

$() в сравнении c querySelectorAII()

Функция

<b>$()</b>
похожа на метод
<b>querySelectorAll()</b>
объекта
<b>Document</b>
, с которым мы познакомились в разделе 15.2.5: оба принимают CSS-селектор в виде аргумента и возвращают объект, подобный массиву, хранящий элементы, соответствующие селектору. Библиотека jQuery использует метод
<b>querySelectorAll()</b>
в броузерах, поддерживающих его, однако существуют веские причины, почему в своих программах следует использовать функцию
<b>$()</b>
, а не метод
<b>querySelectorAll()</b>
: