Открываем jQuery 3: 17 мощных новых возможностей и как их использовать

Прошло более 10 лет с тех пор, как jQuery начал качать веб, и он остался на плаву по хорошим причинам. В июле 2015 jQuery анонсировал первую альфу версии 3.0 — крупное обновление после долгого перерыва. Над ним работали почти 2 года. Новая версия обещает более стройный и быстрый jQuery с обратной совместимостью.

Текущая версия 3.1.1 исправляет множество багов, добавляет новые методы, удаляет некоторые функции и меняет поведение нескольких. Посмотрим, какие новые фичи добавили и как их использовать.

17. Методы Hide и Show

Для повышения совместимости с адаптивным дизайном jQuery 3 улучшен для скрытия множества элементов. Тест на 54 выборках показал, что новая версия на 2 % быстрее предыдущей.

Кроме того, методы .hide(), .show() и .toggle() теперь фокусируются на инлайн-стилях вместо вычисленных стилей. Так они лучше уважают display-значения таблиц стилей когда возможно, значит CSS-правила могут динамически меняться при событиях вроде ресайза окна или смены ориентации устройства.

<script> $( "#showr" ).click(function() { $( "div" ).first().show( "fast", function showNext() { $( this ).next( "div" ).show( "fast", showNext ); }); }); $( "#hidr" ).click(function() { $( "div" ).hide( 1000 ); }); </script> 

Читайте также: 28 удивительных CSS3 эффектов для современного вида сайта

16. Функции WrapAll() и Unwrap()

В jQuery 2 метод .wrapAll() вел себя как .wrap() при передаче функции. Это изменено — .wrapAll(function) вызывает свою функцию один раз, используя строковый результат для оборачивания всей коллекции.

jQuery( "div" ).wrapAll(function( /* нет аргумента index, так как функция выполняется один раз */ ) { // context равен первому найденному элементу return "<h4></h4>"; });

В jQuery 3 у unwrap() появился опциональный параметр-селектор. Новая сигнатура:

unwrap([selector])

Позволяет передать строку с селектором для совпадения внутри родительского элемента. Если совпадение есть, соответствующие дочерние элементы разворачиваются, иначе — нет.

15. Учет ширины/высоты скроллбара

В jQuery 2 вызовы $(window).width() возвращали «content width», исключая скроллбар, добавленный браузером при превышении контента. Для меры, эквивалентной CSS media query, $(window).outerWidth() и $(window).outerHeight() теперь возвращают ширину и высоту с учетом скроллбара. Это эквивалентно DOM-свойству window.innerWidth.

14. Поведение data()

В jQuery 3 поведение метода data() слегка изменено для соответствия спецификациям Dataset API. Теперь преобразует все ключи свойств в camelCase.

var $elem = $('#container'); $elem.data({ 'custom-property': 'Hello World' }); console.log($elem.data());

Старые версии дадут в консоли:

{custom-property: "Hello World"}

В jQuery 3 получите:

{customProperty: "Hello World"}

Имя свойства в camel-case без дефиса, а в старых версиях оставалось в нижнем регистре с дефисом.

13. Операции с классами поддерживают SVG

jQuery все еще не полностью поддерживает SVG, но методы манипуляции CSS-классами вроде .hasClass() или .addClass() можно использовать для таргетинга SVG-документов. Можно изменять (добавлять, переключать, удалять) или находить классы с jQuery в SVG, затем стилизовать их через CSS.

12. Фильтры Visible и Hidden

jQuery 3 меняет смысл фильтров :visible и :hidden. Считает элементы :visible, если у них есть любые layout boxes, включая нулевую ширину и высоту. Например, br-элемент и инлайн-элементы без контента будут выбраны фильтром :visible.

Если есть HTML:

<section></section> <div></div> <br />

И запускаете:

console.log($('body :visible').length);

В jQuery 1 и 2 результат 0, в этой версии — 3.

11. Больше никакого округления для ширины и высоты

jQuery теперь возвращает значения .width() и .height() в浮点数 вместо целых, когда браузер поддерживает. Для тех, кто ищет суbpixel точность для дизайна веб-страниц — хорошая новость.

Например, 3 элемента с шириной третьей части (33.3333333 %) внутри контейнера шириной 100px:

<div class="container"> <div>The car is </div> <div>black</div> <div>Audi</div> </div>

При получении ширины дочерних элементов:

$('.container div').width();

Получите 33.3333333 — более точный результат.

10. Дополнительный слой безопасности

Интегрирован дополнительный слой защиты от XSS-атак (Cross-Site Scripting). Требует от разработчиков указать dataType:"script" в опциях $.ajax() и $.get(). Это предотвращает атаку, когда удаленный сайт доставляет не-скриптовый контент, но затем решает подать вредоносный скрипт. Поскольку jQuery.getScript() явно задает dataType:"script", он не затрагивается.

$.ajax({ accepts: { mynewcustomtype: 'application/abc-some-custom-type' }, // как десериализовать `mynewcustomtype` converters: { 'text mynewcustomtype': function(result) { // do things return newresult; } }, // Ожидаем `mynewcustomtype` от сервера dataType: 'mynewcustomtype' });

9. Недействительная хеш-метка

jQuery 3 выбрасывает синтаксическую ошибку, если строка селектора состоит только из хеш-метки, например jQuery("#") и .find("#"). В старых версиях $("#") возвращал пустую коллекцию, а .find("#") — ошибку.

8. Новый метод экранирования строки

Новый jQuery.escapeSelector() позволяет экранировать любую строку или символ со специальным значением в CSS-селекторе. Полезно, когда ID или имя класса содержат спецсимволы CSS, например точку с запятой или точку.

Например, если элемент имеет id «abc.xyz», его нельзя выбрать $(“abc.xyz»), потому что селектор парсится как элемент с id «abc», имеющим класс «xyz». Но можно выбрать новым методом $(“#” + $.escapeSelector(“abc.xyz”)).

7. Аргументы jQuery.when()

В jQuery 3, если добавить входной аргумент с then() к $.when(), он интерпретируется как Promise-совместимый «thenable». Это позволяет гораздо более широкий спектр входов, включая Bluebird promises и ES6 promises, делая возможным написание более изощренных асинхронных колбэков.

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) { alert (jqHXR.status); //alerts 200 }); 

Многоаргументные вызовы jQuery.when ведут себя как Promise.all, агрегируя значения выполнения в массив выполнения, или альтернативно отвергая с первым значением отклонения. Одноаргументные и нулевые вызовы ведут себя как Promise.resolve, возвращая Deferred, который разрешается идентично thenable, или выполняется с не-Promise входом.

Кроме того, jQuery.when() больше не передает уведомления о прогрессе от входных Deferred к выходному Deferred.

6. Хеш в URL сохраняется

Метод jQuery.ajax() теперь отправляет полный URL в транспорт (script, xhr, jsonp или кастомный). Больше не отрезает хеш в URL, если он есть. Однако нужно вручную удалить его перед отправкой запроса, если сервер не может обработать хеш в URL.

5. Объекты Deferred совместимы с JS promises

Deferreds — цепочечные объекты, позволяющие создавать очереди колбэков. jQuery 3 сделал объекты Deferred совместимыми с новыми стандартами Promises/A+. Ключевое изменение в методе .then(). Любое исключение, брошенное внутри .then() колбэка, теперь перехватывается и конвертируется в значение отклонения. Не-thenable значение, возвращенное из обработчика отклонения, превращается в значение выполнения.

Старый стиль Deferred:

$.ajax("/stat") .done(function(data) { whoops(); // console displays: "whoops is not a function" // no further execution }) .fail(function(arg) { // doesn't execute since the was not caught });

Новое поведение Promises/A+:

$.ajax("/stat") .then(function(data) { whoops(); // console displays "jQuery.Deferred exception: whoops is not a function" // no further execution }) .catch(function(arg) { // arg is an Error object - "whoops is not a function" });

4. Новый API для анимаций

jQuery 3 использует API requestAnimationFrame() для выполнения анимаций. Новый API запускает анимации плавнее и быстрее, потребляя меньше CPU. Используется только в браузерах, поддерживающих его. Для старых вроде IE9 jQuery использует старый API как фоллбэк.

Читайте также: 24 инструмента CSS3 и HTML5 анимаций для дизайнеров

3. jQuery 3 работает в строгом режиме

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

Если используете ASP.net 4.0 с arguments.caller.callee для трассировки стеков в doPostBack(), лучше остаться на jQuery 2.x или ниже. Сейчас браузеры поддерживают стек через error.stack, поэтому анализ arguments.caller.callee не нужен.

2. Новая сигнатура для Get и Post методов

jQuery имеет новую сигнатуру для утилит $.get() и $.post() для выравнивания с $.ajax(). Новая сигнатура — параметры settings.

$.get([settings]) $.post([settings])

Объект settings может иметь много свойств. Это тот же объект, что для $.ajax(). Единственная разница — свойство method всегда игнорируется, потому что $.get() и $.post() имеют предустановленные HTTP-методы (GET и POST).

Пример кода:

$.get({ url: 'https://www.rankred.com', method: 'POST' // свойство игнорируется });

Несмотря на method, запрос будет GET, а не POST.

1. Цикл for…of

jQuery 3 поддерживает цикл for…of, введенный в спецификации ECMAScript 6. Позволяет перебирать итерируемые объекты — Map, Set, Array и др. При использовании получаемое значение — DOM-элемент jQuery-коллекции по одному.

Читайте также: 26 современных jQuery-плагинов для лучшего сайта

Цикл for…of может заменить старый синтаксис $.each() и упростить перебор элементов jQuery-коллекции. Допустим, нужно присвоить имя каждому input на странице.

Код jQuery 2 выглядел бы так…

var $inputs = $('input'); for(var j = 0; j < $inputs.length; j++) { $inputs[j].id = 'input - ' + j; }

Код jQuery 3 будет похож на…

var $inputs = $('input'); var j = 0; for(var input of $inputs) { input.id = 'input - ' + j++; }