Vorstellung von jQuery 3:17 leistungsstarke neue Funktionen und wie man sie nutzt

Es ist mehr als 10 Jahre her, dass jQuery das Web revolutioniert hat, und es hat sich aus guten Gründen immer noch gehalten. Bereits im Juli 2015 kündigte jQuery die erste Alpha der Version 3.0 an – ein großes Update nach langer Zeit. Sie arbeiten seit fast 2 Jahren daran. Die neue Version verspricht ein schlankeres und schnelleres jQuery unter Berücksichtigung der Abwärtskompatibilität.

Die aktuelle Version 3.1.1 Behebt viele Fehler, fügt neue Methoden hinzu, entfernt einige Funktionen und ändert das Verhalten einiger Funktionen. Werfen wir einen Blick darauf, welche neuen Funktionen sie hinzugefügt haben und wie man sie verwendet.

17. Methoden ausblenden und anzeigen

Um die Kompatibilität mit responsivem Design zu erhöhen, wurde jQuery 3 dahingehend erweitert, dass viele Elemente ausgeblendet werden. Ein an 54 Proben durchgeführter Test zeigt, dass die neue Version 2 Prozent schneller ist als die Vorgängerversion.

Darüber hinaus konzentrieren sich die Methoden .hide(), .show() und .toggle() auf Inline-Stile statt auf berechnete Stile. Auf diese Weise respektieren sie die Anzeigewerte von Stylesheets nach Möglichkeit besser, was bedeutet, dass sich CSS-Regeln bei Ereignissen wie der Größenänderung des Fensters oder der Neuausrichtung des Geräts dynamisch ändern können.

<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:28 erstaunliche CSS3-Effekte, um Ihrer Website ein modernes Aussehen zu verleihen

16. WrapAll()- und Unwrap()-Funktionen

In jQuery 2 verhielt sich die Methode .wrapAll() wie .wrap(), wenn eine Funktion übergeben wurde. Dies wurde jetzt geändert – .wrapAll(function) ruft seine Funktion einmal auf und verwendet das String-Ergebnis des Funktionsaufrufs, um die gesamte Sammlung zu umschließen.

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>";
});

In jQuery 3 gibt es einen optionalen Selektorparameter für die unwarp()-Methode. Die neue Signatur der Methode lautet:

unwrap([selector])

Sie können damit eine Zeichenfolge übergeben, die einen Selektorausdruck enthält, der innerhalb des übergeordneten Elements abgeglichen werden soll. Wenn es eine Übereinstimmung gibt, werden die passenden untergeordneten Elemente entpackt, andernfalls nicht.

15. Breite/Höhe der Bildlaufleiste berücksichtigt

In jQuery 2 geben Aufrufe von $(window).width() die „Inhaltsbreite“ zurück, die alle vom Browser hinzugefügten Bildlaufleisten ausschließt, wenn der Inhalt die Abmessungen des Elements überschreitet. Um ein Maß bereitzustellen, das der CSS-Medienabfrage entspricht, geben $(window).outerWidth() und $(window).outerHeight() jetzt die Breite und Höhe einschließlich der Breite und Höhe der Bildlaufleiste 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 die Methode an die Dataset-API-Spezifikationen anzupassen. Es werden nun alle Schlüssel der Eigenschaften in Kamel-Schreibweise umgewandelt.

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

Wenn Sie eine alte Version verwenden, erhalten Sie auf der Konsole folgendes Ergebnis:

{custom-property: "Hello World"}

In jQuery 3 erhalten Sie:

{customProperty: "Hello World"}

Wie Sie sehen können, wird der Name der Eigenschaft in Kamel-Schreibweise ohne Bindestrich geschrieben, während er in den älteren Versionen in Kleinbuchstaben geschrieben blieb und den Bindestrich beibehielt.

13. Klassenoperationen unterstützen SVG

jQuery unterstützt SVG immer noch nicht vollständig, aber die Methoden, die CSS-Klassennamen manipulieren, wie .hasClass() oder .addClass(), können für die Ausrichtung auf SVG-Dokumente verwendet werden. Sie können Klassen mit jQuery in SVG ändern (hinzufügen, umschalten, entfernen) oder suchen und die Klassen dann mit CSS formatieren.

12. Sichtbare und ausgeblendete Filter

jQuery 3 ändert die Bedeutung der Filter :visible und :hidden. Elemente werden als :visible betrachtet, wenn sie über Layoutfelder verfügen, einschließlich solcher mit einer Breite und Höhe von Null. Beispielsweise werden br-Elemente und Inline-Elemente ohne Inhalt vom :visible-Filter ausgewählt.

Wenn Sie die folgende HTML-Seite haben:

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

und Sie führen die Anweisung aus:

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

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

11. Keine Rundungen mehr für Breite und Höhe

jQuery gibt jetzt die Werte .width() und .height() in Gleitkommazahlen anstelle von Ganzzahlen zurück, sofern der Browser dies unterstützt. Für Benutzer, die beim Entwerfen von Webseiten nach Subpixel-Präzision suchen, könnte dies eine gute Nachricht sein.

Wenn Sie beispielsweise drei Elemente mit einer Breite von einem Drittel (33,3333333 %) innerhalb eines Containerelements mit einer Breite von 100 Pixel haben:

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

Wenn Sie versuchen, die Breite der untergeordneten Elemente zu ermitteln:

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

Sie erhalten den Wert 33,3333333, das genauere Ergebnis.

10. Zusätzliche Sicherheitsschicht

Gegen Cross-Site Scripting (XSS)-Angriffe wurde eine zusätzliche Sicherheitsebene integriert. Entwickler müssen dataType:“script“ in den Optionen der Methoden $.ajax() und $.get() angeben. Dies verhindert die Möglichkeit eines Angriffs, bei dem die Remote-Site Nicht-Skript-Inhalte bereitstellt, sich aber darüber hinaus dazu entschließt, ein bösartiges Skript bereitzustellen. Da jQuery.getScript() explizit dataType:“script“ festlegt, ist es von dieser Änderung nicht betroffen.

$.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. Das ungültige Hash-Zeichen

jQuery 3 löst einen Syntaxfehler aus, wenn eine Selektorzeichenfolge nur aus einem Hash-Zeichen besteht, wie z. B. jQuery(„#“) und .find(„#“). In der älteren Version gab $(“#”) eine leere Sammlung zurück und .find(“#”) warf einen Fehler.

8. Neue Methode zum Escape-String

Mit der neuen Methode jQuery.escapeSelector() können Sie jede Zeichenfolge oder jedes Zeichen mit Escapezeichen versehen, das in einem CSS-Selektor eine besondere Bedeutung hat. Dies ist in Fällen nützlich, in denen eine ID oder ein Klassenname Zeichen mit einer besonderen Bedeutung in CSS enthält, z. B. Semikolon oder Punkt.

Wenn beispielsweise ein Element auf der Seite die ID „abc.xyz“ hat, kann es nicht mit $(„abc.xyz“) ausgewählt werden, da der Selektor als Element mit der ID „abc“ geparst wird, das auch eine Klasse „xyz“ hat. Es kann jedoch mit der neuen Methode $(“#” + $.escapeSelector(“abc.xyz”)) ausgewählt werden.

7. jQuery.when() Argumente

Wenn Sie in jQuery 3 ein Eingabeargument mit einer then()-Methode zu $.when() hinzufügen, wird es als Promise-kompatibles „thenable“ interpretiert. Dies ermöglicht eine viel größere Auswahl an Eingaben, einschließlich Bluebird-Versprechen und ES6-Versprechen, wodurch es möglich wird, anspruchsvollere asynchrone Rückrufe zu schreiben.

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

jQuery.when-Aufrufe mit mehreren Argumenten verhalten sich wie Promise.all, indem sie Erfüllungswerte in einem Erfüllungsarray aggregieren oder alternativ mit dem ersten Ablehnungswert ablehnen. Die Einzel- und Null-Argument-Aufrufe verhalten sich wie Promise.resolve und geben einen Deferred zurück, der identisch mit thenable aufgelöst wird oder mit seiner Nicht-Promise-Eingabe erfüllt.

Darüber hinaus leitet die jQuery.when()-Methode keine Fortschrittsbenachrichtigungen mehr von der Eingabe „Deferred“ an die Ausgabe „Deferred“ weiter.

6. Hash in einer URL bleibt erhalten

Die Methode jQuery.ajax() sendet nun die vollständige URL an den Transport (Skript, xhr, jsonp oder benutzerdefinierter Transport). Der Hash in der URL wird nicht mehr entfernt, wenn er vorhanden ist. Sie müssen es jedoch vor dem Senden der Anfrage manuell entfernen, wenn der Server am anderen Ende der Verbindung einen Hash auf einer URL nicht verarbeiten kann.

5. Zurückgestellte Objekte sind mit JS-Versprechen kompatibel

Deferreds sind verkettbare Objekte, die es ermöglichen, Rückrufwarteschlangen zu erstellen. jQuery 3 hat verzögerte Objekte mit den neuen Promises/A+-Standards kompatibel gemacht. Es gibt eine wichtige Änderung in der Methode .then(). Jede innerhalb eines .then()-Rückrufs ausgelöste Ausnahme wird jetzt abgefangen und in einen Ablehnungswert umgewandelt. Der nicht zulässige Wert, der von einem Ablehnungshandler zurückgegeben wird, wird in einen Erfüllungswert umgewandelt.

Die Deferred-Methode im alten 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 
 });

Das neue Standard-Promises/A+-Verhalten

$.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 verwendet die requestAnimationFrame() API zum Ausführen von Animationen. Diese neue API führt Animationen flüssiger und schneller aus und verbraucht weniger CPU-Zeit. Es wird nur in Browsern verwendet, die es unterstützen. Für ältere Browser wie Internet Explorer 9 verwendet jQuery seine ältere API als Fallback-Methode.

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

3. jQuery 3 läuft im strikten Modus

Die meisten Browser, die jQuery 3 unterstützen, verwenden den strikten Modus, und die neue Version wurde unter Berücksichtigung dieser Anweisung erstellt. Obwohl jQuery 3 im strikten Modus geschrieben wurde, muss Ihr Code nicht im strikten Modus ausgeführt werden, sodass Sie den vorhandenen Code nicht neu schreiben müssen, wenn Sie auf die aktuelle Version migrieren möchten. Es gibt jedoch eine Ausnahme – einige Versionen von ASP.net sind aufgrund des strikten Modus nicht kompatibel.

Wenn Sie ASP.net 4.0 ausführen, das arguments.caller.callee verwendet, um die Ablaufverfolgung durch Aufrufstapel in der doPostBack()-Methode zu versuchen, sollten Sie besser weiterhin jQuery 2.x oder frühere Versionen verwenden. Heutzutage unterstützen Browser Stack-Traces über error.stack, sodass es nicht notwendig ist, arguments.caller.callee zu untersuchen.

2. Neue Signatur für Get- und Post-Methode

jQuery verfügt über eine neue Signatur für die Dienstprogrammfunktionen $.get() und $.post(), um sie an $.ajax() anzupassen. Die neue Signatur sind Einstellungsparameter.

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

Die Objekteinstellungen können viele Eigenschaften haben. Es ist dasselbe Objekt, das Sie $.ajax() bereitstellen können. Der einzige Unterschied bei der Übergabe des Objekts an $.get() und $.post() im Gegensatz zu $.ajax() besteht darin, dass die Methodeneigenschaft immer ignoriert wird, da $.get() und $.post() über eine voreingestellte HTTP-Methode zum Ausführen der Ajax-Anfrage (GET und POST) verfügen.

Betrachten Sie einen Code:

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

Trotz der Methodeneigenschaft sendet die Anweisung keine POST-Anfrage, sondern eine GET-Anfrage.

1. For…of Loop

jQuery 3 unterstützt die in der ECMAScript 6-Spezifikation eingeführte for…of-Schleife. Es ermöglicht Ihnen, iterierbare Objekte wie Map, Set, Array usw. zu durchlaufen. Bei Verwendung dieser Schleife ist der erhaltene Wert jeweils ein DOM-Element einer jQuery-Sammlung.

Lesen Sie:26 moderne jQuery-Plugins zur Verbesserung Ihrer Website

Die for…of-Schleife kann verwendet werden, um die frühere $.each( )-Syntax zu ersetzen und das Durchlaufen der Elemente einer jQuery-Sammlung zu vereinfachen. Nehmen wir an, Sie möchten jedem Eingabeelement einer Seite einen Namen zuweisen.

Der jQuery-2-Code würde so aussehen...

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

Der jQuery 3-Code ähnelt …

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