jQuery 3 enthüllt: 17 leistungsstarke neue Features & Nutzung

Es sind mehr als 10 Jahre vergangen, seit jQuery das Web rockt, und es ist aus guten Gründen geblieben. Im Juli 2015 kündigte jQuery das erste Alpha von Version 3.0 an – ein großes Update nach langer Zeit. Sie arbeiteten fast 2 Jahre daran. Die neue Version verspricht ein schlankeres und schnelleres jQuery mit Rückwärtskompatibilität im Fokus.

Die aktuelle Version 3.1.1 behebt viele Bugs, fügt neue Methoden hinzu, entfernt einige Funktionen und ändert das Verhalten einiger Funktionen. Schauen wir uns an, welche neuen Features hinzugekommen sind und wie man sie nutzt.

17. Hide und Show Methoden

Um die Kompatibilität mit Responsivem Design zu erhöhen, wurde jQuery 3 für das Verstecken vieler Elemente verbessert. Ein Test an 53 Samples zeigt, die neue Version ist 2 % schneller als die vorherige.

Zusätzlich fokussieren sich .hide(), .show() und .toggle() nun auf Inline-Styles statt berechneter Styles. So respektieren sie Display-Werte von Stylesheets wann immer möglich – CSS-Regeln können dynamisch bei Events wie Fenstergrößenänderung oder Geräteorientierung wechseln.

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

Lesen Sie auch: 28 erstaunliche CSS3-Effekte für einen modernen Website-Look

16. WrapAll() und Unwrap() Funktionen

In jQuery 2 verhielt sich .wrapAll() wie .wrap(), wenn eine Funktion übergeben wurde. Das wurde geändert – .wrapAll(function) ruft seine Funktion einmal auf und nutzt den String-Ergebnis des Funktionsaufrufs, um die gesamte Sammlung zu umhüllen.

jQuery( "div" ).wrapAll(function( /* Kein Index-Argument, da Funktion nur einmal ausgeführt */ ) { // context equals first found element return "<h4></h4>"; });

In jQuery 3 gibt es einen optionalen Selektor-Parameter für unwrap(). Die neue Signatur:

unwrap([selector])

Sie erlaubt, einen String mit Selektorausdruck zu übergeben, der innerhalb des Elternelements matcht. Bei Match werden die passenden Kindelemente unwrapped, sonst nicht.

15. Scrollbar Breite/Höhe wird berücksichtigt

In jQuery 2 gab $(window).width() die „Content Width“ zurück, die Scrollbalken ausschloss, wenn Inhalt die Elementdimensionen überstieg. Um ein Maß bereitzustellen, das dem CSS Media Query entspricht, geben $(window).outerWidth() und $(window).outerHeight() nun Breite und Höhe inklusive Scrollbalkenbreite/-höhe zurück. Dies entspricht der DOM-Eigenschaft window.innerWidth.

14. Verhalten von data()

In jQuery 3 wurde das Verhalten der data()-Methode leicht geändert, um sie an die Dataset API-Spezifikationen anzupassen. Sie transformiert nun alle Eigenschaftsschlüssel in CamelCase.

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

Bei alter Version erhalten Sie in der Konsole:

{custom-property: "Hello World"}

In jQuery 3 erhalten Sie:

{customProperty: "Hello World"}

Wie Sie sehen, ist der Eigenschaftsname in CamelCase ohne Bindestrich, während er in älteren Versionen klein geschrieben blieb und den Bindestrich behielt.

13. Klassenoperationen unterstützen SVG

jQuery unterstützt SVG noch nicht vollständig, aber Methoden, die CSS-Klassennamen manipulieren wie .hasClass() oder .addClass(), können auf SVG-Dokumente angewendet werden. Sie können Klassen in SVG ändern (hinzufügen, togglen, entfernen) oder finden und diese per CSS stylen.

12. Visible und Hidden Filter

jQuery 3 ändert die Bedeutung der :visible und :hidden Filter. Es betrachtet Elemente als :visible, wenn sie Layout-Boxen haben, einschließlich solcher mit null Breite und Höhe. Beispiel: br-Elemente und Inline-Elemente ohne Inhalt werden vom :visible-Filter ausgewählt.

Wenn Sie folgende HTML-Seite haben:

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

und Sie führen aus:

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

In jQuery 1 und 2 erhalten Sie 0 als Ergebnis, in dieser Version 3.

11. Kein Rundung mehr für Width und Height

jQuery gibt nun Werte von .width() und .height() als Gleitkommazahlen statt Integer zurück, wann immer der Browser dies unterstützt. Für Nutzer, die Subpixel-Precision für Webdesign benötigen, gute Nachrichten.

Beispiel: 3 Elemente mit Breite einem Drittel (33,3333333 %) in einem Container mit 100 px Breite:

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

Wenn Sie die Breite der Kindelemente abfragen:

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

Erhalten Sie 33.3333333 – das genauere Ergebnis.

10. Extra Sicherheitsschicht

Eine zusätzliche Sicherheitsschicht gegen Cross-Site Scripting (XSS) Angriffe wurde integriert. Entwickler müssen dataType:”script” in den Optionen von $.ajax() und $.get() angeben. Das verhindert Angriffe, bei denen die Remote-Site Non-Script-Content liefert, aber dann beschließt, ein bösartiges Script auszuliefern. Da jQuery.getScript() explizit dataType:”script” setzt, ist es von dieser Änderung unberührt.

$.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. Ungültiges Hash-Mark

jQuery 3 wirft einen Syntaxfehler, wenn ein Selektorstring nur aus einem Hash-Mark besteht, wie jQuery(“#”) und .find(“#”). In älteren Versionen gab $(“#”) eine leere Collection zurück und .find(“#”) warf einen Fehler.

8. Neue Methode zum Escapen von Strings

Die neue jQuery.escapeSelector() Methode erlaubt, jeden String oder Character zu escapen, der in einem CSS-Selektor eine spezielle Bedeutung hat. Nützlich, wenn eine ID oder Klassenname Zeichen mit spezieller CSS-Bedeutung enthält, wie Semikolon oder Punkt.

Beispiel: Ein Element auf der Seite hat die ID „abc.xyz“. Es kann nicht mit $(“abc.xyz“) selektiert werden, da der Selektor als Element mit ID „abc“, das auch Klasse „xyz“ hat, geparst wird. Mit der neuen Methode geht es: $(“#“ + $.escapeSelector(“abc.xyz“)).

7. jQuery.when() Argumente

In jQuery 3 wird ein Eingabeargument mit then()-Methode an $.when() als Promise-kompatibles „thenable“ interpretiert. Das ermöglicht eine breitere Palette an Eingaben, einschließlich Bluebird Promises und ES6 Promises, was raffiniertere asynchrone Callbacks erlaubt.

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

Multi-Argument jQuery.when Aufrufe verhalten sich wie Promise.all, aggregieren Erfüllungswerte in ein Erfüllungsarray oder lehnen alternativ mit dem ersten Ablehnungswert ab. Single- und Zero-Argument-Aufrufe verhalten sich wie Promise.resolve, geben ein Deferred zurück, das identisch zu thenable auflöst, oder erfüllt mit seinem Non-Promise-Input.

Zudem übergibt die jQuery.when()-Methode keine Progress-Benachrichtigungen mehr von Eingabe-Deferreds an den Output-Deferred.

6. Hash in URL wird beibehalten

Die jQuery.ajax()-Methode sendet nun die vollständige URL an den Transport (script, xhr, jsonp oder custom transport). Sie entfernt den Hash in der URL nicht mehr, falls vorhanden. Sie müssen ihn jedoch manuell entfernen, bevor Sie die Anfrage senden, wenn der Server am anderen Ende der Verbindung keinen Hash in einer URL verarbeiten kann.

5. Deferred Objects kompatibel mit JS Promises

Deferreds sind verkettenbare Objekte, die Callback-Queues ermöglichen. jQuery 3 hat Deferred-Objekte mit den neuen Promises/A+ Standards kompatibel gemacht. Wesentliche Änderung in .then(): Jede Exception, die innerhalb eines .then()-Callbacks geworfen wird, wird nun abgefangen und in einen Rejection-Wert umgewandelt. Der non-thenable Wert, der von einem Rejection-Handler zurückgegeben wird, wird zu einem Fulfillment-Wert.

Alter Deferred-Stil:

$.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 });

Neuer Promises/A+ Standardverhalten:

$.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. Neue API für Animationen

jQuery 3 nutzt die requestAnimationFrame()-API für Animationen. Diese neue API führt Animationen flüssiger und schneller aus, mit weniger CPU-Zeit. Sie wird nur in Browsern verwendet, die sie unterstützen. Für ältere Browser wie Internet Explorer 9 nutzt jQuery seine alte API als Fallback.

Lesen Sie auch: 24 CSS3 und HTML5 Animationstools für Designer

3. jQuery 3 läuft im Strict Mode

Die meisten Browser, die jQuery 3 unterstützen, nutzen Strict Mode, und die neue Version wurde mit dieser Direktive im Hinterkopf gebaut. Obwohl jQuery 3 in Strict Mode geschrieben wurde, muss Ihr Code nicht im Strict Mode laufen – Sie müssen bestehenden Code nicht umschreiben, wenn Sie zur aktuellen Version migrieren. Eine Ausnahme: Einige ASP.net-Versionen sind aufgrund von Strict Mode nicht kompatibel.

Falls Sie ASP.net 4.0 nutzen, das arguments.caller.callee für Call-Stack-Tracing in doPostBack() verwendet, sollten Sie besser jQuery 2.x oder früher behalten. Heutige Browser unterstützen Stack Traces via error.stack, sodass arguments.caller.callee nicht mehr nötig ist.

2. Neue Signatur für Get und Post Methode

jQuery hat eine neue Signatur für die $.get() und $.post() Utility-Funktionen, um sie an $.ajax() anzupassen. Die neue Signatur ist Settings-Parameter.

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

Das Settings-Objekt kann viele Eigenschaften haben. Es ist dasselbe Objekt, das Sie $.ajax() übergeben können. Der einzige Unterschied beim Übergeben an $.get() und $.post() im Gegensatz zu $.ajax() ist, dass die method-Eigenschaft immer ignoriert wird, da $.get() und $.post() ein festes HTTP-Method (GET und POST) für den Ajax-Request vorgeben.

Betrachten Sie Code:

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

Trotz method-Property wird kein POST-Request gesendet, sondern ein GET-Request.

1. For…of Loop

jQuery 3 unterstützt den for…of Loop, eingeführt in der ECMAScript 6 Spezifikation. Er erlaubt Iteration über iterierbare Objekte wie Map, Set, Array usw. Bei Nutzung dieses Loops ist der erhaltene Wert ein DOM-Element einer jQuery-Collection, eins nach dem anderen.

Lesen Sie auch: 26 moderne jQuery-Plugins für bessere Websites

Der for…of Loop kann die frühere $.each()-Syntax ersetzen und das Durchlaufen der Elemente einer jQuery-Collection erleichtern. Angenommen, Sie wollen jedem Input-Element einer Seite einen Namen zuweisen.

Der jQuery 2 Code sähe so aus…

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

Der jQuery 3 Code wird ähnlich sein…

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