jQuery 3 onthuld: 17 krachtige nieuwe features en hoe ze te benutten

jQuery 3.1.1: slimmer, sneller, backwards compatible

Na 10+ jaar en 2 jaar ontwikkeling (eerste alpha juli 2015) introduceert jQuery 3 significante verbeteringen. 17 highlights:

17. Verbeterde .hide(), .show(), .toggle()

2% sneller (54 samples). Fokus op inline-styles ipv computed styles → betere respect voor CSS display-regels bij resize/reorientatie.

16. .wrapAll() en .unwrap() verbeteringen

• .wrapAll(function) roept functie *één keer* aan (geen index-argument), wikkelt hele collectie.
• .unwrap([selector]) accepteert optionele selector: alleen matching children worden uitgepakt.

15. Scrollbalk-breedte/hoogte meegerekend

$(window).outerWidth/Height() incl. scrollbalk = equivalent aan window.innerWidth / CSS media queries.

14. .data() gedrag: camelCase keys

Align met Dataset API. data({ 'custom-property': 'x' }) → { customProperty: 'x' } (was { 'custom-property': 'x' }).

13. Class-operaties ondersteunen SVG

.hasClass(), .addClass(), .toggleClass(), .removeClass() werken op SVG-documenten. Styling via CSS.

12. :visible / :hidden filters herdefinieerd

Element is :visible als het *enige* layout box heeft (ook 0x0). <br>, lege inline-elementen worden nu geselecteerd. Voorbeeld: <section></section><div></div><br/> → lengte 3 (was 0).

11. Geen afronding meer voor .width()/.height()

Float-waarden terug (subpixel precisie). Voorbeeld: 33.333...% van 100px → 33.3333333px (was 33px).

10. Extra XSS-beveiliging voor $.ajax/$.get

Vereist dataType: "script" in opties. Voorkomt dat remote site niet-script content levert maar later kwaadaardig script serveert. $.getScript() ongewijzigd.

9. Ongeldige hash-mark selector giet fout

$("#") en .find("#") gooien syntax error (was: lege collectie / error).

8. $.escapeSelector()

Escaped speciale CSS-karakters in ID/class. Voorbeeld: $("#" + $.escapeSelector("abc.xyz")) selecteert id="abc.xyz".

7. $.when() accepteert thenables

Argument met .then() → Promise-compatibel. Ondersteunt Bluebird, ES6 Promises. Multi-argument gedraagt als Promise.all. Geen progress-notificaties meer doorgegeven.

6. Hash in URL bewaard bij $.ajax()

Volledige URL (incl. hash) naar transport. Handmatig strippen als server hash niet aan kan.

5. Deferred objects Promises/A+ compatibel

• Uitzondering in .then() → rejection value
• Non-thenable return uit rejection handler → fulfillment value
• .catch() ontvangt Error-object

4. Nieuwe animatie-API: requestAnimationFrame

Soepelere, snellere animaties, minder CPU. Fallback voor IE9.

3. Strict mode standaard

jQuery 3 geschreven in strict mode. Jouw code hoeft niet. Uitzondering: ASP.NET 4.0 (arguments.caller.callee) — blijf op jQuery 2.x.

2. Nieuwe signature $.get() / $.post()

Settings-object (zoals $.ajax()). method property genegeerd (GET/POST vast).

1. for...of lus ondersteuning (ES6)

Iteereer over jQuery-collecties: for (var el of $elements) → DOM-element per iteratie. Vervangt $.each().