Inhoudsopgave:
- Hoe $ (document) te gebruiken. ready ()
- Het document gebruiken. klaar mechanisme
- Alternatieven voor document. gereed
Video: Ons aller Ajax: Spelersmakelaars op De Toekomst 2024
Veel HTML5- en CSS3-pagina's hebben een initialisatiefunctie nodig. Het body-onload-mechanisme wordt vaak gebruikt in DOM / JavaScript om pagina's te laden zodra het document is begonnen met laden. Dit is een functie die vroeg wordt uitgevoerd om de rest van de pagina in te stellen. Hoewel body onload dit werk goed doet, bestaan er een paar problemen met de traditionele techniek:
-
Het vereist een wijziging in de HTML. De JavaScript-code moet volledig gescheiden zijn van HTML. U moet uw HTML niet wijzigen om deze met JavaScript te laten werken.
-
De timing is nog steeds niet helemaal goed. De code die is opgegeven in body onload wordt pas uitgevoerd nadat de volledige pagina is weergegeven. Het zou beter zijn als de code is geregistreerd na de DOM is geladen maar vóór de pagina wordt weergegeven.
Hoe $ (document) te gebruiken. ready ()
jQuery heeft een geweldig alternatief voor body-onload dat deze tekortkomingen overwint. Bekijk de code om te zien hoe het werkt:
klaar. html $ (document). ready (changeme); function changeMe () {$ ("# output"). html ("I changed");}
Het document gebruiken. klaar mechanisme
Is dit veranderd?
Deze code gebruikt de jQuery-techniek voor het uitvoeren van initialisatiecode:
-
De body-tag heeft niet langer een onload -attribuut. Dit is een algemene functie van jQuery-programmering. De HTML heeft geen directe links naar JavaScript omdat jQuery de JavaScript-code koppelt aan de webpagina.
-
De initialisatiefunctie wordt aangemaakt met $ (document). ready () functie. Deze techniek vertelt de browser om een functie uit te voeren wanneer de DOM klaar is met laden (zodat deze toegang heeft tot alle elementen van het formulier) maar voordat de pagina wordt weergegeven (zodat eventuele effecten van het formulier ogenblikkelijk voor de gebruiker lijken)).
-
$ document maakt een jQuery-object uit het hele document. Het volledige document kan in een jQuery-object worden omgezet door een document op te geven in de functie $ (). Merk op dat u in dit geval geen aanhalingstekens gebruikt.
-
De opgegeven functie wordt automatisch uitgevoerd. In dit specifieke geval wilt u de changeMe () -functie uitvoeren, zodat u deze in de parameter van de methode ready () plaatst. Merk op dat dit verwijst naar changeMe als een variabele, dus het heeft geen aanhalingstekens of haakjes.
U ziet verschillende andere plaatsen (met name in eventafhandeling) waar jQuery een functie als parameter verwacht. Een dergelijke functie wordt vaak een callback -functie genoemd omdat deze wordt genoemd nadat een of andere gebeurtenis is opgetreden.U ziet ook callback-functies die reageren op toetsenbordgebeurtenissen, muisbewegingen en de voltooiing van een AJAX-aanvraag.
Alternatieven voor document. gereed
U ziet soms een aantal snelkoppelingen omdat het zo vaak voorkomt om de initialisatiecode uit te voeren. U kunt
$ verkorten (document). ready (changeme);
naar de volgende code:
$ (changeMe);
Als deze code niet is gedefinieerd binnen een functie en changeMe een functie is die op de pagina is gedefinieerd, voert jQuery de functie automatisch net zoals het document rechtstreeks uit. klaar aanpak.
U kunt ook rechtstreeks een anonieme functie maken:
$ (document). ready (function () {$ ("# output"). html ("I changed");});
Deze methode (anonieme functie) is omslachtig, maar u ziet vaak jQuery-code met deze techniek. U kunt een functie maken met de naam init () en deze met een regel als deze aanroepen:
$ (init);
Deze techniek is eenvoudig en gemakkelijk te begrijpen, maar u kunt de andere varianten tegenkomen terwijl u de code op het web bekijkt.
