Представляем jQuery 3:17 новых мощных функций и способы их использования

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

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

17. Скрыть и показать методы

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

В дополнение к этому, методы .hide(), .show() и .toggle() будут ориентированы на встроенные стили, а не на вычисляемые стили. Таким образом, они будут лучше учитывать отображаемые значения таблиц стилей, когда это возможно, а это означает, что правила 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( /* No index argument, since the function would be executed only once */ ) {
 // context is equal to the first found element
 return "<h4></h4>";
});

В jQuery 3 есть необязательный параметр селектора для метода unwarp(). Новая сигнатура метода:

unwrap([selector])

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

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

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

14. Поведение данных()

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

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

Если вы используете старую версию, вы получите на консоли следующий результат:

{custom-property: "Hello World"}

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

{customProperty: "Hello World"}

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

13. Поддержка операций классов SVG

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

12. Видимые и скрытые фильтры

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

Если у вас есть следующая HTML-страница:

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

и вы запускаете оператор:

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

В jQuery 1 и 2 в результате вы получите 0, но в этой версии результат будет 3.

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

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

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

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

Если вы попытаетесь получить ширину дочерних элементов:

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

Вы получите значение 33,3333333, тем более точный результат.

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

Был интегрирован дополнительный уровень безопасности для защиты от атак межсайтового скриптинга (XSS). Разработчикам необходимо указать dataType:"script" в параметрах методов $.ajax() и $.get(). Это предотвращает возможность атаки, при которой удаленный сайт предоставляет контент, не являющийся сценарием, но затем решает использовать вредоносный скрипт. Поскольку jQuery.getScript() явно устанавливает dataType:"script", это изменение не влияет на него.

$.ajax({
 accepts: {
 mynewcustomtype: 'application/abc-some-custom-type'
 },
 // how to deserialize a `mynewcustomtype`
 converters: {
 'text mynewcustomtype': function(result) {
 // do things
 return newresult;
 }
 },
 
 // Expect a `mynewcustomtype` back from server
 dataType: 'mynewcustomtype'
});

9. Неверный хэш

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

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

Новый метод jQuery.escapeSelector() позволяет экранировать любую строку или символ, имеющий особое значение в селекторе CSS. Это полезно в тех случаях, когда идентификатор или имя класса имеют особое значение в CSS, например точку с запятой или точку.

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

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

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

$.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-адрес в транспорт (скрипт, xhr, jsonp или пользовательский транспорт). Он больше не удаляет хеш из URL-адреса, если он там есть. Однако вам необходимо удалить его вручную перед отправкой запроса, если сервер на другом конце соединения не может обработать хэш URL-адреса.

5. Отложенные объекты совместимы с обещаниями JS

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

Старый метод 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 обеспечивает более плавную и быструю анимацию, потребляя меньше процессорного времени. Он используется только в браузерах, которые его поддерживают. Для более старых браузеров, таких как Internet Explorer 9, 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, поэтому нет необходимости проверять аргументы.caller.callee.

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

jQuery имеет новую подпись для служебных функций $.get() и $.post(), чтобы согласовать их с $.ajax(). Новая подпись — параметры настроек.

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

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

Рассмотрим код:

$.get({
 url: 'https://www.rankred.com',
 method: 'POST' // property is ignored
});

Несмотря на свойство метода, оператор отправит не запрос POST, а запрос GET.

1. Для… цикла

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

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

Цикл for…of можно использовать для замены прежнего синтаксиса $.each() и упрощения циклического перебора элементов коллекции jQuery. Предположим, вы хотите присвоить имя каждому входному элементу страницы.

Код 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++;
 }