Эта книга — для веб-разработчиков, желающих углубиться в jQuery. Цель авторов — сделать вас профессионалом jQuery, будь ваш уровень начальным или продвинутым. Книга охватывает всю библиотеку целиком, включая некоторые дополнительные инструменты и фреймворки, такие как Bower и QUnit, рекомендуя лучшие практики. Каждый метод API представлен в удобном для применения синтаксическом блоке, описывающем параметры и возвращаемые значения.

Третье издание охватывает темы от простых — что такое jQuery и как ее добавить на веб-страницу — до продвинутых, таких как способ, с помощью которого библиотека реализует промисы, и как создать jQuery-плагин. Книга содержит множество полезных примеров, три плагина и три типовых проекта. Она также включает то, что мы называем Lab Pages. Эти содержательные и забавные работы помогут вам увидеть нюансы методов «jQuery в действии» без необходимости самостоятельно писать множество строк кода.

Материал книги предполагает наличие у читателей фундаментальных знаний HTML, CSS и JavaScript. Предварительных знаний jQuery не требуется, но они могут помочь вам быстрее уловить общую идею

Дорожная карта

Мы разделили книгу на три части: введение в jQuery, что собой представляет библиотека и для чего применяется, основы jQuery с описанием всех ее особенностей и темы продвинутого уровня.

Глава 1 дает представление о философии jQuery и о том, как эта библиотека следует так называемым принципам ненавязчивого JavaScript. Здесь обсуждается, что такое jQuery, какие проблемы она пытается решить и почему вы можете захотеть задействовать ее в ваших веб-проектах.

Глава 2 охватывает выбор DOM-элементов на основе использования селекторов и повествует о том, как создать ваш собственный селектор. Мы также познакомим вас с таким термином, как коллекция jQuery (или объект jQuery), применяемым для ссылки на объект JavaScript, возвращаемый методами jQuery. Он содержит набор элементов, выбирая которые вы можете работать с библиотекой.

Глава 3 расширяет главу 2, показывая, как улучшить или создать новую выборку элементов, начиная с предыдущей выборки. Вы также научитесь создавать новые DOM-элементы с помощью jQuery.

Глава 4 фокусируется на многих методах jQuery, предназначенных для работы с атрибутами и свойствами, и различиях между ними. Кроме того, она объясняет, как хранить пользовательские данные в одном или нескольких DOM-элементах.

Глава 5 целиком посвящена работе с именами класса элемента, клонированию и установке содержимого DOM-элементов, изменению дерева DOM посредством добавления, перемещения или замены элементов.

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

Глава 7 отличается от предыдущих, ее цель — подробно рассказать вам о разработке проекта, локатора DVD, где вы можете применить полученные до этого момента знания.

Глава 8 рассматривает методы, применяемые для отображения и скрытия элементов, и способы создания анимации. Кроме того, уделяется внимание функции очереди для последовательно запущенных эффектов, равно как и общих функций.

Глава 9 посвящена вспомогательным функциям — функциям с пространством имен в jQuery, обычно не работающих с DOM-элементами.

Глава 10 рассматривает одно из важнейших понятий последних лет — Ajax. Мы увидим, как jQuery облегчает использование Ajax на веб-страницах, защищая нас от всех популярных подводных камней, при этом значительно упрощая наиболее распространенные типы взаимодействий Ajax (такие как возврат объектов JSON).

Глава 11 представляет решение проблемы, с которой сталкиваются многие разработчики в реальном мире: создание работающей контактной формы, не требующей полного обновления страницы для уведомления пользователя об успешной или неудачной отправке сообщения.

Глава 12 — первая из части III, где мы переходим к более сложным вопросам, большая часть которых не связана строго с ядром библиотеки. Здесь мы обсудим, как расширить функциональность jQuery с помощью создания плагинов для нее. Эти плагины могут быть в двух вариантах: методы и вспомогательные функции. Мы рассмотрим оба варианта.

Глава 13 объясняет, как избежать того, что называется callback hell (дословно — «ад обратного вызова»), описывая реализацию jQuery-промисов. Как вы узнаете, это тонкая и спорная тема, служившая предметом дискуссий на протяжении многих лет.

Глава 14 познакомит вас с тестированием: что это и почему важно. Мы сосредоточим внимание на одном конкретном виде тестирования — модульном. Затем рассмотрим QUnit, JavaScript-фреймворк, применяемый некоторыми проектами jQuery (jQuery, jQuery UI и jQuery Mobile) для модульного тестирования кода.

Глава 15, последняя, начинается с советов и рекомендаций по улучшению производительности кода, который использует jQuery, благодаря правильному способу выбора элементов. Затем мы рассмотрим несколько инструментов, фреймворков и шаблонов, не относящихся напрямую к библиотеке, но тех, которые можно применять для написания быстрого, надежного и красивого кода. В частности, эта глава объясняет, как организовать ваш код в модулях, как загрузить модули, используя RequireJS, и как управлять зависимостями клиентской стороны с помощью Bower. Наконец, мы покажем вам, как jQuery вписывается в приложения одной страницы, бегло просмотрев Backbone.js.

В довершение ко всему в книге есть приложение, освещающее основные понятия JavaScript, такие как контексты функций и замыкания, — немаловажные для наиболее эффективного применения jQuery на наших страницах — для читателей, незнакомых с этими понятиями или желающих освежить их в памяти.

Отрывок. 9.3. Управление объектами и коллекциями JavaScript

Большинство функций jQuery реализованы как вспомогательные для работы с объектами JavaScript, не являющимися элементами DOM. Обычно все, что предназначено для работы с DOM, реализуется как метод jQuery. Хотя ряд этих функций и позволяет работать с элементами DOM, которые сами являются объектами JavaScript, в целом работа с DOM — не главная область применения вспомогательных функций.

Данные функции реализуют целый спектр операций: от простых манипуляций со строками и проверки типов до сложной фильтрации коллекций, сериализации значений форм и даже реализации своего рода наследования объектов путем слияния свойств. Начнем с основ.

9.3.1. Усечение строк

Это трудно объяснить, но до ECMAScript 5 у объекта String не было метода удаления пробельных символов в начале и конце строки. Такие базовые функциональные возможности являются обязательной частью класса String в большинстве других языков, но по каким-то таинственным причинам в JavaScript не было этого полезного свойства в предыдущих версиях. Таким образом, вы не можете использовать данную функцию в версиях Internet Explorer, предшествующих 9.

Во многих приложениях JavaScript усечение строки очень распространено; хорошим примером может служить проверка данных формы. Поскольку пробелы невидимы на экране, пользователи могут легко ошибиться и ввести дополнительные символы до или после основных записей в текстовых полях или текстовых областях. Во время проверки желательно молча удалить такие пробелы, а не предупреждать пользователя об их наличии, ведь он и так их не замечает.

Чтобы помочь справиться с этой задачей в старых браузерах, а также вообще помочь людям с любыми браузерами до введения собственного метода JavaScript (String.prototype.trim()), команда jQuery включила вспомогательную функцию $.trim(). Негласно, с целью улучшения производительности, она использует нативный метод String.prototype.trim() там, где он поддерживается.

Метод $.trim() определяется следующим образом.
Синтаксис функции: $.trim

$.trim(value)

Удаляет все начальные или конечные пробельные символы из переданной строки и возвращает результат.
Пробельными данная функция считает любые символы, соответствующие в JavaScript регулярному выражению \s, то есть не только символ пробела, но и символы перевода страницы, новой строки, возврата, табуляции и вертикальной табуляция, а также символ Юникода \u00A0.
Параметры
value (Строка) Строковое значение для усечения. Это исходное значение не изменяется.
Возвращает
Усеченную строку.

Небольшой пример усечения значения в текстовом поле с помощью данной функции:

var trimmedString = $.trim($('#some-field').val());

Имейте в виду: функция $.trim() преобразует параметр, который вы передаете, в тип его эквивалента String, так что если ошибочно передадите ей объект, то получите строку "[object Object]".

А сейчас посмотрим на ряд функций, которые работают с массивами и другими объектами.

9.3.2. Итерации по свойствам и элементам коллекций

Часто при наличии нескалярных величин в составе других компонентов требуется итерировать по элементам. Вне зависимости от того, будет элемент контейнера массивом JavaScript (содержащим любое количество других значений JavaScript, включая другие массивы) или экземпляром объекта JavaScript (содержащим свойства), язык JavaScript позволяет обойти их все в цикле. Обход элементов массивов выполняется с помощью цикла for; обход свойств объектов — цикла for...in (доступны и другие конструкции, но в данный момент не будем обращать на них внимания).

Приведем примеры для всех случаев:

var anArray = ['one', 'two', 'three'];
for (var i = 0; i < anArray.length; i++) {
   // Здесь будет что-то делаться с anArray[i]
}
var anObject = {one: 1, two: 2, three: 3};
for (var prop in anObject) {
   // Здесь будет что-то делаться с prop
}

Довольно просто, но кому-то данный синтаксис может показаться слишком многословным и сложным — циклы for часто критикуют за это.

Несколько лет назад в JavaScript был добавлен метод объекта Array под названием forEach(). К сожалению, будучи более поздним дополнением, он не поддерживается в некоторых браузерах, в первую очередь Internet Explorer до версии 9. Вдобавок из-за принадлежности объекту Array данный метод не может быть использован для итерации по другим типам объектов. Но в этом случае jQuery спешит на помощь!

Как вы знаете, библиотека предоставляет метод each(), который позволяет легко обойти все элементы в коллекции jQuery, не используя сложный синтаксис оператора for. Для массивов, массивоподобных объектов и объектов у jQuery есть аналогичная вспомогательная функция $.each().

Действительно, очень удобно, когда для организации итераций по элементам массива или свойствам объекта можно применять один и тот же синтаксис. Более того, его также можно задействовать в Internet Explorer 6–8. Cинтаксис функции выглядит следующим образом.

Синтаксис функции: $.each

$.each(collection, callback)

Обобщенная функция итератора, которая может быть использована для обхода как объектов, так и массивов. Массивы и массивоподобные объекты со свойством длины (например, объекты функции arguments) итерируются по числовым индексам от 0 до длины – 1. Другие объекты итерируются через названные свойства.
Параметры
collection (Массив|Объект) Массив (или массивоподобный объект), по элементам которого должна пройти итерация, либо объект, по свойствам которого она должна пройти.
callback (Функция) Функция, которая будет вызываться для каждого элемента в коллекции. Если коллекция является массивом (либо массивоподобным объектом), то данная функция вызывается для каждого элемента массива, а если объектом, то для каждого свойства объекта. Первый параметр функции callback — индекс элемента массива или имя свойства объекта. Второй параметр — значение элемента массива или свойства объекта.

Контекст функции (this) вызова содержит значение, передающееся во втором параметре.
Возвращает
Ту же переданную коллекцию.

Этот унифицированный синтаксис подходит для итерации по массивам, массивоподобным объектам и объектам, с тем же форматом вызова функции. Перепишем предыдущий пример с применением данной функции:

var anArray = ['one', 'two', 'three'];
$.each(anArray, function(i, value) {
   // Здесь что-то делается
});
var anObject = {one:1, two:2, three:3};
$.each(anObject, function(name, value) {
   // Здесь что-то делается
});

Применение $.each() со встроенной функцией — это хорошо. Однако она дает возможность легко написать повторно используемые функции итератора или вынести ее за скобки тела цикла в другую функцию, чтобы прояснить код, как показано в следующем примере:

$.each(anArray,someComplexFunction);

Обратите внимание: при выполнении итерации по коллекции можно выйти из цикла, возвращая значение false из функции-итератора. И наоборот, возврат truthy-значения (значения, вычисляемого true) аналогичен использованию continue, что означает немедленную остановку функции и совершение следующей итерации.
jQuery 3: добавленные функции
jQuery 3 предоставляет возможность для итерации по элементам DOM коллекции jQuery с помощью цикла for-of, что является частью спецификации ECMAScript 6. Благодаря этой особенности теперь можно написать код наподобие следующего:

var $divs = $('div');
for (var element of $divs) {
   // Здесь что-то делается с элементом
}

Пожалуйста, обратите внимание: мы не ставим знак доллара перед переменной element, чтобы подчеркнуть, что ее значение будет принадлежать элементу DOM, а не коллекции jQuery.

ПРИМЕЧАНИЕ
Применение функции $.each() может быть удобным с точки зрения синтаксиса, но это, как правило, медленнее (чуть-чуть), чем использование старомодного цикла for. Выбор за вами.

Иногда обход массива нужен, чтобы выбрать элементы, которые составят новый массив. Конечно, это легко можно сделать с помощью функции $.each(), но посмотрим, насколько проще то же самое возможно с помощью других средств jQuery.

9.3.3. Фильтрация массивов

Приложениям, работающим с большими количествами данных, часто требуется обойти массивы, чтобы найти элементы, соответствующие определенным критериям. Вы можете, например, отфильтровать элементы, значения которых находятся выше или ниже определенного порога или, вероятно, соответствуют определенному шаблону. Для выполнения любой подобной фильтрации jQuery предоставляет вспомогательную функцию $.grep().

Имя данной функции может навести на такую мысль: функция применяет те же регулярные выражения, что и ее тезка — команда UNIX grep. Но критерий фильтрации, который использует вспомогательная функция $.grep(), не является регулярным выражением. Фильтрацию проводит функция обратного вызова, предоставляемая вызывающей программой, которая определяет критерии для выявления значений, включаемых или исключаемых из полученного набора значений. Ничто не мешает данной функции задействовать регулярные выражения для выполнения своей задачи, но автоматически это не делается.
Синтаксис этой функции представлен ниже.

Синтаксис функции: $.grep

$.grep (array, callback[, invert])

Выполняет цикл по элементам массива, вызывая функцию обратного вызова для каждого значения. Возвращаемое значение функции обратного вызова определяет, должно ли войти это значение в новый массив, который возвращается как значение функции $.grep(). Если параметр invert опущен или имеет значение false и возвращаемое значение функции обратного вызова равно true, то данные включаются в новый массив. Если параметр invert имеет значение true и возвращаемое значение функции обратного вызова равно false, то данные также включаются в новый массив. Исходный массив не изменяется.

Параметры
array (Массив) Массив, элементы которого проверяются на возможность включения в коллекцию. При выполнении функции не изменяется.
callback (Функция|Строка) Функция, возвращаемое значение которой определяет, должно ли текущее значение войти в коллекцию. Она получает два параметра: текущее значение данной итерации и индекс этого значения в пределах исходного массива. Возвращаемое значение true приводит к включению данных при условии, что значение параметра invert не равно true, в противном случае результат меняется на противоположный.
invert (Логический тип) Если определен как true, то инвертирует нормальное действие функции.
Возвращает
Массив отобранных значений.

Предположим, мы хотим отфильтровать массив, выбрав все значения больше 100. Это можно сделать с помощью такой инструкции:

var bigNumbers = $.grep(originalArray, function(value) {
                                return value > 100;
                          });

Функция обратного вызова, которая передается в $.grep(), может выполнять любые определенные вами действия, чтобы выяснить, какие значения должны быть включены. Решение может быть простым или сложным, в зависимости от того, что вам нужно.

Хотя функция $.grep() и не использует регулярные выражения напрямую (невзирая на свое название), регулярные выражения JavaScript, применяемые в функциях обратного вызова, позволяют успешно решать вопрос о включении или исключении значений из этого массива. Рассмотрим пример, когда в массиве требуется идентифицировать значения, не соответствующие шаблону почтового индекса Соединенных Штатов (также известного как ZIP codes).

Почтовый индекс в США состоит из пяти десятичных цифр, за которыми могут следовать символ дефиса и еще четыре десятичные цифры. Такая комбинация задается регулярным выражением вида /^\d{5}(-\d{4})?$/. Его можно применить для фильтрации исходного массива и извлечь ошибочные записи:

var badZips = $.grep(
                           originalArray,
                           function(value) {
                              return value.match(/^\d{5}(-\d{4})?$/) !== null;
                           },
                           true
);

Примечательно, что в этом примере метод match() класса String позволяет определить, соответствует ли значение шаблону; в параметре invert функции $.grep() передается значение true для исключения всех значений, соответствующих шаблону.

Выборка подмножеств данных — не единственное, что можно проделать с ними. Рассмотрим еще одну вспомогательную функцию jQuery.

9.3.4. Преобразование массивов

Данные не всегда представлены в нужном нам формате. Еще одна операция, которая часто выполняется в веб-приложениях, ориентированных на работу с данными, — преобразование одного набора значений в другой. Написать цикл for для создания одного массива из другого достаточно просто, но jQuery упрощает эту операцию с помощью вспомогательной функции $.map().
Рассмотрим простейший пример, который демонстрирует функцию $.map() в действии.

var oneBased = $.map(
      [0, 1, 2, 3, 4],
      function(value) {
         return value + 1;
      }
);

Эта инструкция преобразует переданный массив следующим образом:

[1, 2, 3, 4, 5]

Синтаксис функции: $.map

$.map(collection, callback)

Итерирует по элементам массива или объекта, вызывая функцию обратного вызова для каждого элемента массива и собирая возвращаемые значения функции в новый массив.
Параметры
collection (Массив|Объект) Массив или объект, значения которых должны быть преобразованы в значения в новом массиве.
callback (Функция) Функция, возвращаемое значение которой является преобразованным значением элемента нового массива, возвращаемого функцией $.map().

Этой функции передаются два параметра: текущее значение и индекс элемента в исходном массиве. Если передан объект, то вторым аргументом является имя свойства текущего значения.
Возвращает
Массив отобранных значений.

Еще один важный момент, на который следует обратить внимание: если функция возвращает значение null или undefined, то результат не включается в новый массив. В таких случаях в новом массиве будет меньше элементов, чем в исходном, и однозначное соответствие между ними будет утрачено.

Рассмотрим чуть более сложный пример. Допустим, у вас есть массив строк, возможно собранных из полей формы, предположительно являющихся числовыми значениями, и требуется преобразовать этот массив строк в соответствующий ему массив Number. Поскольку нет никакой гарантии, что строки не содержат нечисловых значений, понадобится принять меры предосторожности. Рассмотрим следующий фрагмент, который также доступен в файле chapter-9/$.map.html, предоставленном с книгой, и в JS Bin:

var strings = ['1', '2', '3', '4', 'S', '6'];
var values = $.map(strings, function(value) {
   var result = new Number(value);
   return isNaN(result) ? null : result;
});

В начале есть массив строк, каждая из которых, как ожидается, представляет числовое значение. Но опечатка (или, возможно, ошибка пользователя) привела к тому, что вместо ожидаемого символа 5 имеется символ S. Наш программный код обрабатывает этот случай, проверяя экземпляр Number, созданный конструктором, чтобы увидеть, было ли успешным преобразование из строки в число. Если оно не удалось, то возвращаемое значение будет константой NaN. Но интереснее всего то, что по определению значение NaN не равно никакому другому значению, даже самому себе! Поэтому логическое выражение Number.NaN == Number.NaN даст в результате false!

Поскольку вы не можете использовать оператор сравнения для проверки на равенство NaN (что, кстати, означает Not a Number — «не число»), JavaScript предоставляет метод isNaN(), который и позволил проверить результат преобразования строки в число.

В этом примере в случае неудачи вы возвращаете null, гарантируя, что полученный в результате массив содержит только действительно числовые значения, а все ошибочные значения игнорируются. Если потребуется собрать все значения, то можно разрешить функции преобразования возвращать Number.NaN для значений, не являющихся числами.

Другая полезная особенность функции $.map() состоит в том, что она изящно обрабатывает случаи, когда функция преобразования возвращает массив, добавляя возвращаемое значение в массив результата. Рассмотрим следующий пример:

var characters = $.map(
   ['this', 'that'],
   function(value) {
      return value.split('');
   }
);

Эта инструкция преобразует массив строк в массив символов, из которых составлены строки. После ее выполнения значения переменной characters таковы:

['t', 'h', 'i', 's', 't', 'h', 'a', 't']

Данный результат получен с помощью метода JavaScript split(), который возвращает массив из символов строки, если в качестве разделителя была передана пустая строка. Такой массив возвращается как результат функции преобразования и затем включается в массив результата.

Но этим поддержка массивов в jQuery не ограничивается. Есть несколько второстепенных функций, которые также могут оказаться полезными.

9.3.5. Другие полезные функции для работы с массивами JavaScript

Случалось ли так, что нужно было узнать, содержит ли массив JavaScript некоторое специфическое значение и, возможно, даже определить его местоположение в массиве?
Если да, то вы по достоинству оцените функцию $.inArray().

Синтаксис функции: $.inArray

$.inArray(value, array[, fromIndex])

Возвращает индекс первого вхождения значения value в массив array.
Параметры
value (Любой) Значение, которое требуется найти в массиве.
array (Массив) Массив, в котором будет производиться поиск.
fromIndex (Число) Индекс массива, с которого начинается поиск. По умолчанию равняется 0.
Возвращает
Индекс первого вхождения искомого значения в массиве или –1, если значение не найдено.

Несложный, но показательный пример применения данной функции:

var index = $.inArray(2, [1, 2, 3, 4, 5]);

Другая полезная функция для работы с массивами создает массив JavaScript из других объектов, подобных массиву. Взгляните на следующий отрывок:

var images = document.getElementsByTagName('img');

Это заполнит переменные image всеми изображениями HTMLCollection, записанными на странице.

Довольно непросто иметь дело с подобными объектами, потому что у них недостаточно нативных методов JavaScript Array, таких как sort() и IndexOf(). Преобразование HTMLCollection (и других аналогичных объектов) в массив JavaScript существенно упрощает работу. Функция $.makeArray из библиотеки jQuery — как раз то, что нужно в данном случае.

Синтаксис функции: $.makeArray

$.makeArray(object)

Преобразует объект, подобный массиву, в массив JavaScript.
Параметры
object (Объект) Любой объект для преобразования в нативный Array.
Возвращает
Полученный в результате массив JavaScript.

Данная функция предназначена для использования в коде, который редко обращается к jQuery. Она пригодится и при обращении с объектами типа массива arguments в пределах функций. Представьте, что у вас есть следующие функции и вы хотите отсортировать их аргументы:

function foo(a, b) {
      // Аргументы сортировки здесь
}

Можно получить все аргументы одновременно, используя массив arguments. Проблема в том, что он не относится к типу Array, так что вы не можете написать:

function foo(a, b) {
      var sortedArgs = arguments.sort();
}

Этот код выдаст ошибку, потому что массив arguments не поддержвиает метод JavaScript Array sort(), который пригодился бы для сортировки аргументов. Здесь может помочь $.makeArray(). Проблему можно решить, преобразовав аргументы в реальный массив, а затем отсортировав его элементы:

function foo(a, b) {
      var sortedArgs = $.makeArray(arguments).sort();
}

После внесения этого изменения sortedArgs будет содержать массив с отсортированными аргументами, переданными функции foo().
Допустим, сейчас у вас есть следующий оператор:

var arr = $.makeArray({a: 1, b: 2});

После его выполнения оператор arr будет содержать массив, состоящий из одного элемента — объекта, переданного в качестве аргумента $.makeArray().

Другая редко используемая функция, которая может быть полезной в работе с массивами, созданными не средствами jQuery, называется $.unique().
Синтаксис функции: $.unique

$.unique(array)

Получает массив элементов DOM и возвращает массив уникальных элементов из оригинального массива.
Параметры
array (Массив) Массив элементов DOM, который требуется исследовать.
Возвращает
Массив элементов DOM, состоящий из уникальных элементов массива, переданного функции.
Эта функция предназначена для использования с массивами элементов DOM, созданных за пределами jQuery. Хотя многие люди думают, что ее можно применять с массивами строк или чисел, мы хотим подчеркнуть: $.unique() работает только с массивами элементов DOM.

Прежде чем углубиться в описание следующей функции, рассмотрим пример работы $.unique(). Обратите внимание на разметку:

<div class="black">foo</div>
<div class="red">bar</div>
<div class="black">baz</div>
<div class="red">don</div>
<div class="red">wow</div>

Теперь представьте, что по какой-то причине вам нужно получить , имеющие класс black в качестве массива элементов DOM, а затем добавить все на странице в эту коллекцию и наконец отфильтровать ее, чтобы удалить дубликаты. Можно достичь результата, написав следующий код (который включает в себя ряд заявлений для определения разницы в числе элементов):

var blackDivs = $('.black').get();
console.log('Черные div-ы: ' + blackDivs.length);
var allDivs = blackDivs.concat($('div').get());
console.log('Увеличенные div-ы: ' + allDivs.length);
var uniqueDivs = $.unique(allDivs);
console.log('Уникальные div-ы: ' + uniqueDivs.length);

Если захотите поэкспериментировать с этим примером, то он доступен в файле chapter-9/$.unique.html, предоставленном с книгой, и в JS Bin (http://jsbin.com/borin/edit?html,js,console).

jQuery 3: переименованные методы
jQuery 3 переименовала вспомогательную функцию $.unique() в $.uniqueSort() для указания на то, что эта функция также может сортировать. Несмотря на данное изменение, в jQuery 3 вы можете по-прежнему вызывать $.unique(), которая в настоящее время является просто псевдонимом для $.uniqueSort(), но сейчас не рекомендуется так делать, ведь это название устарело и будет удалено в следующих версиях библиотеки.

А если необходимо объединить два массива? У jQuery есть функция для такой задачи — $.merge.

Синтаксис функции: $.merge

$.merge(array1,array2)

Добавляет элементы из второго массива в первый и возвращает результат. В ходе выполнения функции первый массив модифицируется и возвращается в качестве результата. Второй массив не изменяется.
Параметры
array1 (Массив) Массив, в который будут добавлены элементы из второго массива.
array2 (Массив) Массив, из которого будут добавлены элементы в первый массив.
Возвращает
Первый массив, измененный в результате операции объединения.

Обратите внимание на код:

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [5, 6, 7, 8, 9];
var arr3 = $.merge(arr1, arr2);

После выполнения этого фрагмента массив arr2 останется прежним, а массивы arr1 и arr3 будут содержать следующие элементы:

[1, 2, 3, 4, 5, 5, 6, 7, 8, 9]

Заметьте: есть два вхождения 5, так как вспомогательная функция $.merge() не удаляет дубликаты.

Увидев, как jQuery упрощает работу с массивами, рассмотрим способ, который поможет управлять простыми объектами JavaScript.

» Более подробно с книгой можно ознакомиться на сайте издательства
» Оглавление
» Отрывок
Для Хаброжителей скидка 20% по купону — jQuery