Onthulling van jQuery 3:17 krachtige nieuwe functies en hoe u deze kunt benutten

Het is meer dan tien jaar geleden dat jQuery het internet op zijn kop zette, en het is om goede redenen blijven hangen. In juli 2015 kondigde jQuery de eerste alpha van versie 3.0 aan – een grote update na lange tijd. Ze zijn hier bijna 2 jaar mee bezig geweest. De nieuwe versie belooft een slankere en snellere jQuery met achterwaartse compatibiliteit in gedachten.

De huidige versie 3.1.1 repareert veel bugs, voegt nieuwe methoden toe, verwijdert enkele functies en verandert het gedrag van een paar functies. Laten we eens kijken welke nieuwe functies ze hebben toegevoegd en hoe ze te gebruiken.

17. Methoden voor verbergen en weergeven

Om de compatibiliteit met responsief ontwerp te vergroten, is jQuery 3 verbeterd om veel elementen te verbergen. Uit een test op 54 samples blijkt dat de nieuwe versie 2 procent sneller is dan de vorige.

Daarnaast zullen de methoden .hide(), .show() en .toggle() zich richten op inline stijlen in plaats van op berekende stijlen. Op deze manier zullen ze waar mogelijk de weergavewaarden van stylesheets beter respecteren, wat betekent dat CSS-regels dynamisch kunnen veranderen bij gebeurtenissen zoals venstergrootte of heroriëntatie van het apparaat.

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

Lezen:28 geweldige CSS3-effecten om uw website een moderne uitstraling te geven

16. Functies WrapAll() en Unwrap()

In jQuery 2 gedroeg de methode .wrapAll() zich als .wrap() wanneer een functie werd doorgegeven. Dit is nu veranderd:.wrapAll(function) roept zijn functie één keer aan, waarbij het stringresultaat van de functieaanroep wordt gebruikt om de hele verzameling in te pakken.

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 is er een optionele selectorparameter om de methode unwarp() te gebruiken. De nieuwe handtekening van de methode is:

unwrap([selector])

Hiermee kunt u een tekenreeks doorgeven die een selectorexpressie bevat die moet passen binnen het bovenliggende element. Als er een overeenkomst is, worden de overeenkomende onderliggende elementen uitgepakt, anders niet.

15. Er wordt rekening gehouden met de breedte/hoogte van de schuifbalk

In jQuery 2 retourneren aanroepen van $(window).width() de ‘content width’, die elke schuifbalk uitsluit die de browser heeft toegevoegd als de content de afmetingen van het element overschrijdt. Om een ​​meting te bieden die gelijkwaardig is aan de CSS-mediaquery, retourneren $(window).outerWidth() en $(window).outerHeight() nu de breedte en hoogte, inclusief de breedte en hoogte van de schuifbalk. Dit komt overeen met de DOM-eigenschap window.innerWidth.

14. Gedrag van data()

In jQuery 3 is het gedrag van de data()-methode enigszins gewijzigd om de methode af te stemmen op de Dataset API-specificaties. Het zal nu alle sleutels van de eigendommen transformeren in een kamelenkoffer.

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

Als u een oude versie gebruikt, krijgt u het volgende resultaat op de console:

{custom-property: "Hello World"}

In jQuery 3 krijgt u:

{customProperty: "Hello World"}

Zoals u kunt zien, is de naam van het pand in kameelletters weergegeven zonder streepje, terwijl het in de oudere versies kleine letters bleef en het streepje behield.

13. Klassebewerkingen ondersteunen SVG

jQuery ondersteunt SVG nog steeds niet volledig, maar de methoden die CSS-klassenamen manipuleren, zoals .hasClass() of .addClass(), kunnen worden gebruikt om SVG-documenten te targeten. Je kunt klassen wijzigen (toevoegen, schakelen, verwijderen) of zoeken met jQuery in SVG, en vervolgens de klassen opmaken met CSS.

12. Zichtbare en verborgen filters

jQuery 3 wijzigt de betekenis van de :visible en :hidden filters. Het beschouwt elementen als zichtbaar als ze lay-outvakken hebben, inclusief die met een breedte en hoogte van nul. Br-elementen en inline-elementen zonder inhoud worden bijvoorbeeld geselecteerd door het :visible filter.

Als u de volgende HTML-pagina heeft:

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

en je voert de instructie uit:

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

In jQuery 1 en 2 krijgt u als resultaat 0, maar in deze versie is het resultaat 3.

11. Geen afronding meer voor breedte en hoogte

jQuery retourneert nu de waarde van .width() en .height() in zwevende getallen in plaats van gehele getallen, wanneer de browser dit ondersteunt. Voor gebruikers die op zoek zijn naar subpixelprecisie voor het ontwerpen van webpagina's, kan dit goed nieuws zijn.

Als je bijvoorbeeld 3 elementen hebt met een breedte van een derde (33,3333333%) binnen een containerelement met een breedte van 100px:

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

Als u de breedte van de onderliggende elementen probeert te verkrijgen:

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

U krijgt de waarde 33.3333333, het nauwkeurigere resultaat.

10. Extra beveiligingslaag

Er is een extra beveiligingslaag geïntegreerd tegen Cross-Site Scripting (XSS)-aanvallen. Het vereist dat ontwikkelaars dataType:”script” specificeren in de opties van de methoden $.ajax() en $.get(). Dit voorkomt de mogelijkheid van een aanval waarbij de externe site niet-scriptinhoud levert, maar verder besluit een kwaadaardig script aan te bieden. Omdat jQuery.getScript() dataType:”script expliciet instelt, wordt dit niet beïnvloed door deze wijziging.

$.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. Het ongeldige hekje

jQuery 3 genereert een syntaxisfout als een selectorstring uit niets anders bestaat dan een hekje, zoals jQuery(“#”) en .find(“#”). In de oudere versie retourneerde $(“#”) een lege verzameling en gaf .find(“#”) een fout.

8. Nieuwe methode om aan string te ontsnappen

Met de nieuwe methode jQuery.escapeSelector() kunt u aan elke tekenreeks of elk teken ontsnappen dat een speciale betekenis heeft in een CSS-selector. Dit is handig in gevallen waarin een ID of een klassenaam tekens bevat met een speciale betekenis in CSS, zoals puntkomma of punt.

Als een element op de pagina bijvoorbeeld de id ‘abc.xyz’ heeft, kan het niet worden geselecteerd met $(‘abc.xyz’), omdat de selector wordt geparseerd als een element met de id ‘abc’, dat ook een klasse ‘xyz’ heeft. Het kan echter wel worden geselecteerd met de nieuwe methode $(“#” + $.escapeSelector(“abc.xyz”)).

7. jQuery.when() Argumenten

Als u in jQuery 3 een invoerargument met een then()-methode toevoegt aan $.when(), wordt dit geïnterpreteerd als een Promise-compatibele “thenable”. Dit maakt een veel breder scala aan invoer mogelijk, waaronder Bluebird-beloften en ES6-beloften, waardoor het mogelijk wordt om geavanceerdere asynchrone callbacks te schrijven.

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

Multi-argument jQuery.when-aanroepen gedragen zich als Promise.all, waarbij vervullingswaarden worden samengevoegd in een vervullingsarray, of als alternatief wordt afgewezen met de eerste afwijzingswaarde. De aanroepen met enkelvoudige en nulargumenten gedragen zich als Promise.resolve en retourneren een Deferred die op dezelfde manier wordt opgelost als thenable, of voldoet aan de niet-Promise-invoer.

Bovendien geeft de methode jQuery.when() niet langer voortgangsmeldingen door van invoer uitgesteld naar uitvoer uitgesteld.

6. Hash in een URL blijft behouden

De methode jQuery.ajax() verzendt nu de volledige URL naar het transport (script, xhr, jsonp of aangepast transport). Het verwijdert niet langer de hash in de URL als deze er is. U moet dit echter handmatig verwijderen voordat u het verzoek verzendt als de server aan de andere kant van de verbinding een hash op een URL niet kan verwerken.

5. Uitgestelde objecten zijn compatibel met JS-beloften

Deferreds zijn aaneenschakelbare objecten die het mogelijk maken om terugbelwachtrijen te creëren. jQuery 3 heeft uitgestelde objecten compatibel gemaakt met de nieuwe Promises/A+ standaarden. Er is een belangrijke verandering in de .then() methode. Elke uitzondering die binnen een .then() callback wordt gegenereerd, wordt nu opgevangen en omgezet in een afwijzingswaarde. De niet-danable waarde die wordt geretourneerd door een afwijzingshandler, verandert in een vervullingswaarde.

De ouderwetse uitgestelde methode:

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

Het nieuwe standaard Promises/A+-gedrag

$.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. Nieuwe API voor animaties

jQuery 3 gebruikt de requestAnimationFrame() API voor het uitvoeren van animaties. Deze nieuwe API voert animaties vloeiender en sneller uit en verbruikt minder CPU-tijd. Het wordt alleen gebruikt in browsers die dit ondersteunen. Voor oudere browsers zoals Internet Explorer 9 gebruikt jQuery de oudere API als reservemethode.

Lezen:24 CSS3- en HTML5-animatietools voor ontwerpers

3. jQuery 3 draait in strikte modus

De meeste browsers die jQuery 3 ondersteunen, gebruiken de strikte modus en de nieuwe versie is gebouwd met deze richtlijn in gedachten. Hoewel jQuery 3 in de strikte modus is geschreven, hoeft uw code niet in de strikte modus te worden uitgevoerd. U hoeft de bestaande code dus niet te herschrijven als u naar de huidige versie gaat migreren. Er is echter één uitzondering:sommige versies van ASP.net zijn niet compatibel vanwege de strikte modus.

Als u ASP.net 4.0 gebruikt dat arguments.caller.callee gebruikt om te proberen de call-stacks te traceren in de doPostBack()-methode, kunt u beter jQuery 2.x of eerdere versies blijven gebruiken. Tegenwoordig ondersteunen browsers stacktraces via error.stack, dus het is niet nodig om arguments.caller.callee te onderzoeken.

2. Nieuwe handtekening voor de Get- en Post-methode

jQuery heeft een nieuwe handtekening voor de hulpprogrammafuncties $.get() en $.post() om ze uit te lijnen met $.ajax(). De nieuwe handtekening zijn de instellingenparameters.

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

De objectinstellingen kunnen veel eigenschappen hebben. Het is hetzelfde object dat u aan $.ajax() kunt opgeven. Het enige verschil bij het doorgeven van het object aan $.get() en $.post() in tegenstelling tot $.ajax() is dat de eigenschap method altijd wordt genegeerd, omdat $.get() en $.post() een vooraf ingestelde HTTP-methode hebben om het Ajax-verzoek uit te voeren (GET en POST).

Beschouw een code:

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

Ondanks de methode-eigenschap verzendt de instructie geen POST-verzoek maar een GET-verzoek.

1. Voor...van lus

jQuery 3 ondersteunt de for…of-lus die is geïntroduceerd in de ECMAScript 6-specificatie. Hiermee kunt u iterabele objecten zoals Map, Set, Array, enzovoort doorlopen. Wanneer u deze lus gebruikt, is de verkregen waarde een DOM-element van een jQuery-verzameling, één voor één.

Lezen:26 moderne jQuery-plug-ins om uw website beter te maken

De for…of-lus kan worden gebruikt om de vroegere $.each( )-syntaxis te vervangen, en maakt het eenvoudiger om door de elementen van een jQuery-verzameling te lopen. Laten we aannemen dat u elk invoerelement van een pagina een naam wilt geven.

De jQuery 2-code zou er als volgt uitzien...

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

De jQuery 3-code zal vergelijkbaar zijn met…

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