
Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.
Пройшло вже понад 10 років з того часу, як бібліотека jQuery почала своє повсюдне поширення в Інтернеті, вона й дотепер користується великою популярністю. У липні 2015 року jQuery анонсувала альфа-версию 3.0 – найбільше оновлення за довгі роки.
Поточна версія 3.1.1, що вийшла у вересні 2016 року, виправила багато багів, додала нові методи і видалила надмірні, також змінивши поведінку деяких функцій. Давайте розберемося в нововведеннях, які були представлені в цій версії.
Методи приховування і відображення
Для кращої сумісності з адаптивним дизайном jQuery3 була вдосконалена, отримавши можливість приховування декількох елементів. Тести показали, що нова версія виконує це на 2 % швидше за попередню.
Крім того, методи .hide ()
, .show ()
і .toggle ()
орієнтуватимуться на inline-стилі. Ця особливість надає можливість коректно працювати з функцією display
, що дозволить правилам CSS змінюватися динамічно залежно від таких подій, як зміна дозволу вікна і орієнтації екрана.
Методи wrapAll () і unwrap ()
У jQuery 2 метод .wrapAll ()
при передачі функції як аргументу поводився так само, як і метод .wrap ()
. Це змінили: тепер .wrapAll (function)
викликає функцію і використовує рядкове представлення результату як обгортку колекції.
$( "div" ).wrapAll (function ( /* No index argument, since the function would be executed only once */ ) { // context is equal to the first found element return "
“;});
У jQuery 3 також з’явився опціональний параметр-селектор методу unwrap ()
. Це нововведення дозволяє передавати методу рядкове значення, яке містить вираз селектора.
Смуги прокрутки висоти і ширини тепер враховуються
У jQuery 2 виклик $(window).width ()
повертав ширину вмісту, не враховуючи смуги прокрутки, додані браузером, коли вміст перевищував розміри елемента. Для того щоб надати можливість виміру, еквівалентну CSS-медіазапиту, $(window).outerWidth ()
і $(window).outerHeight ()
тепер повертають ширину і довжину з урахуванням смуг прокрутки, що еквівалентно властивості DOM window.innerWidth
.
Поведінка data ()
У 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"}
Як Ви помітили, назва параметра переведена у верблюжу нотацію, тоді як в старих версіях параметр залишався в нижньому регістрі з дефісом.
Підтримка SVG за операцій з класами
jQuery дотепер не повністю підтримує SVG, але методи на кшталт .hasClass ()
чи .addClass ()
, які управляють CSS-класами, можуть бути використані для роботи з SVG. Ви можете змінювати або знаходити класи в SVG, потім застосовувати стилі до класів, використовуючи CSS.
Фільтри приховування і відображення
jQuery 3 змінює сенс фільтрів :visible
і :hidden
. Він сприймає елементи як :visible
, якщо у них є хоч якісь вікна макета, в тому числі ті, які мають нульову ширину і довжину. Для прикладу, елемент br
і рядкові елементи без вмісту будуть виділені фільтром :visible
.
Якщо Ви маєте наступну HTML-сторінку:
і запускаєте вираз:
console.log ($('body :visible').length);
то в jQuery 2, Ви отримаєте результат 0
, а в третій версії результат дорівнюватиме3
.
jQuery більше не округлює параметри висоти і ширини
Тепер jQuery повертає дробові значення .width ()
і .height ()
замість цілого числа, якщо браузер підтримує це. Для користувачів, яким потрібна субпіксельна точність (наприклад, при дизайні веб-сайтів), це може бути корисним.
Наприклад, у вас є 3 елементи із шириною, що дорівнює одній третій (33.333333 %), усередині контейнера шириною 100px:
Якщо Ви запросите ширину дочірнього елемента:
$('.container div').width ();
то отримаєте значення 33.33333
, що буде точнішим результатом.
Додатковий рівень захисту
Додатковий рівень був доданий для захисту від міжсайтового скриптингу (XSS). Розробникам тепер треба уточнювати dataType:" script"
в опціях методів $.ajax ()
і $.get ()
. Це запобігає можливості атак. Надаємо приклад коду:
$.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'});
Непридатний хеш
jQuery 3 повертає синтаксичну помилку, якщо рядок селектора складається лише з хеша, типу jQuery ("#")
чи .find ("#")
. У старій версії $("#")
повертав порожню множину, а .find ("#")
– помилку.
Новий метод для виділення рядків
Новий метод jQuery.escapeSelector ()
дозволяє Вам виділити будь-який рядок або символ, які мають певне значення в CSS-селекторах.
Наприклад, якщо елемент на сторінці має id “abc.xyz”, то він не може бути вибраний методом $("abc.xyz")
, оскільки селектор буде розпізнаний як елемент з id ” abc”, і класом ” xyz”. Проте він може бути вибраний новою функцією $("#" + $.escapeSelector ("abc.xyz"))
.
Аргументи jQuery.when ()
У jQuery 3 при додаванні методом then ()
аргументу до $.when ()
, він повертає його promise-версію. Це розширює можливості для введення, враховуючи проміси Bluebird і проміси ES6, що дає можливість писати складніші асинхронні зворотні виклики.
$.when ($.ajax ("test.apx")).then (function (data, textStatus, jqHXR){
alert (jqHXR.status); //виводить 200 });
Хеш в URL
Тепер функція jQuery.ajax ()
більше не видаляє хеш в URL, якщо він є. Проте Вам доведеться видаляти його вручну до відправки запиту, якщо сервер на іншому кінці з’єднання не може обробити URL з хешем.
Deferred-об’єкти сумісні з JS-промісами
Deferred ‘и – це об’єкти які можна сполучати ланцюговими зворотними викликами. jQuery 3 зробив їх сумісними з новими стандартами Promises/A+. Також є ключова зміна у функції .then ()
. Будь-який виняток, що виводиться у рамках зворотного виклику .then ()
, тепер конвертується у відхилюване значення. Непромісоподібні значення, повернені обробником відхилень, міняються на виконувані значення.
Застарілий deferred- метод:
$.ajax ("/stat") .done (function (data) { whoops (); // консоль виводить: "whoops is not a function" // більше не виконується }) .fail (function (arg) { // не виконується });
Новий стандарт поведінки Promises/A+:
$.ajax ("/stat") .then (function (data) { whoops (); // консоль виводить "jQuery.Deferred exception: whoops is not a function" // більше не виконується }) .catch (function (arg) { // arg is an Error object - "whoops is not a function" });
Новий API для анімації
jQuery 3 використовує API requestAnimationFrame ()
для роботи з анімацією. Цей API відтворює анімації плавніше і швидше, витрачаючи менше обчислювального часу. Він використовується лише в тих браузерах, які підтримують цей API. Для старих же браузерів, таких як Internet Explorer 9, jQuery використовує старий API як запасний варіант.
jQuery 3 працює в строгому режимі
Більшість браузерів, підтримуваних jQuery3, використовують строгий режим (strict mode). Нова версія була створена з урахуванням цього. Попри те, що jQuery 3 була написана в суворому режимі, Вашому коду не обов’язково використовувати його. Отже, Вам не треба переписувати наявний код, якщо Ви бажаєте перейти на нову версію. Проте є один виняток: деякі версії ASP.NET несумісні через суворий режим.
Нова сигнатура методів get і post
jQuery отримала нові сигнатури сервісних функцій $.get ()
і $.post ()
для одноманітності з $.ajax ()
.
$.get ([settings]) $.post ([settings])
Оператор циклу for.of
jQuery 3 підтримує оператор циклу for.of
, який є у специфікації ECMAScript 6. Це дозволяє Вам запускати цикл за ітерируваними об’єктами, такими як Map
, Set
, Array
і т. д.
Оператор циклу for.of
може бути використаний для заміни синтаксичної конструкції $.each ( )
. Припустимо, що Ви хочете застосувати ім’я до кожного ввідного елемента сторінки.
Код на 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++; }
Переклад статті What’s New In jQuery 3 || 17 Added Features & How To Use Them
Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?