jQuery
document-klaar evenement

Wat is documentklaar en hoe moet ik het gebruiken?

jQuery-code is vaak verpakt in jQuery(function($) { ... }); zodat deze alleen wordt uitgevoerd nadat de DOM is geladen.

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

Dit is belangrijk omdat jQuery (en JavaScript in het algemeen) geen DOM-element kan selecteren dat niet naar de pagina is weergegeven.

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

Merk op dat u de jQuery-naamruimte een alias kunt geven door een aangepaste handler door te geven aan de .ready() -methode. Dit is handig voor gevallen waarin een andere JS-bibliotheek dezelfde verkorte $ alias gebruikt als jQuery , waardoor een conflict ontstaat. Om dit conflict te voorkomen, moet u $.noConflict(); - Dit dwingt je om alleen de standaard jQuery- naamruimte te gebruiken (in plaats van de korte $ alias).
Door een aangepaste handler door te geven aan de .ready() -handler, kunt u de aliasnaam kiezen om jQuery te gebruiken.

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

In plaats van eenvoudigweg uw jQuery-code onderaan de pagina te plaatsen, zorgt de functie $(document).ready ervoor dat alle HTML-elementen zijn weergegeven en het volledige Document Object Model (DOM) gereed is om JavaScript-code uit te voeren.

jQuery 2.2.3 en eerder

Dit zijn allemaal equivalenten, de code binnen de blokken wordt uitgevoerd wanneer het document klaar is:

$(function() {
  // code
});

$().ready(function() {
  // code
});

$(document).ready(function() {
  // code
});

Omdat deze equivalent zijn, is de eerste de aanbevolen vorm, de volgende is een versie daarvan met het trefwoord jQuery plaats van de $ die dezelfde resultaten opleveren:

jQuery(function() {
  // code
});

jQuery 3.0

schrijfwijze

Vanaf jQuery 3.0 wordt alleen dit formulier aanbevolen:

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

Alle andere document-ready handlers zijn verouderd in jQuery 3.0.

Asynchronous

Vanaf jQuery 3.0 wordt de ready-handler altijd asynchroon genoemd . Dit betekent dat in de onderstaande code het logboek 'externe handler' altijd eerst wordt weergegeven, ongeacht of het document klaar was op het moment van uitvoering.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> externe handler
> binnen handler

Verschil tussen $ (document) .ready () en $ (venster) .load ()

$(window).load() is verouderd in jQuery versie 1.8 (en volledig verwijderd uit jQuery 3.0 ) en mag als zodanig niet meer worden gebruikt. De redenen voor de afschrijving staan vermeld op de jQuery-pagina over deze gebeurtenis

Voorbehoud van de laadgebeurtenis bij gebruik met afbeeldingen

Een veel voorkomende uitdaging die ontwikkelaars proberen op te lossen met behulp van de sneltoets .load() is het uitvoeren van een functie wanneer een afbeelding (of verzameling afbeeldingen) volledig is geladen. Er zijn verschillende bekende kanttekeningen waarmee dit moet worden opgemerkt. Dit zijn:

• Het werkt niet consistent of betrouwbaar cross-browser
• Het wordt niet correct geactiveerd in WebKit als de image src is ingesteld op dezelfde src als voorheen
• Het borrelt de DOM-boom niet correct op
• Kan stoppen met schieten voor afbeeldingen die al in de cache van de browser staan

Als u nog steeds load() wilt gebruiken, wordt dit hieronder gedocumenteerd:

$(document).ready() wacht tot de volledige DOM beschikbaar is - alle elementen in de HTML zijn ontleed en bevinden zich in het document. Het is echter mogelijk dat bronnen zoals afbeeldingen op dit moment niet volledig zijn geladen. Als het belangrijk is om te wachten tot alle bronnen zijn geladen, $(window).load() en je bent je bewust van de belangrijke beperkingen van deze gebeurtenis, dan kan het onderstaande worden gebruikt:

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

Gebeurtenissen koppelen en de DOM erin manipuleren klaar ()

Voorbeeldgebruik van $(document).ready() :

1. Event-handlers koppelen
   Bevestig jQuery-gebeurtenishandlers

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

2. Voer jQuery-code uit nadat de paginastructuur is gemaakt

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

3. Bewerk de geladen DOM-structuur
   Bijvoorbeeld: verberg een div wanneer de pagina voor de eerste keer laadt en toon het bij de klikgebeurtenis van een knop

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

Verschil tussen jQuery (fn) en het eerder uitvoeren van uw code

Het gebruik van de documentklare gebeurtenis kan kleine nadelen hebben met een vertraagde uitvoering van maximaal ~ 300 ms. Soms kan hetzelfde gedrag worden bereikt door de code net voor de afsluitende tag </body> :

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

zal soortgelijk gedrag produceren, maar eerder presteren dan omdat het niet wacht op de activering van de documentklaar gebeurtenis zoals in:

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

Nadruk op het feit dat het eerste voorbeeld afhankelijk is van uw kennis van uw pagina en plaatsing van het script net vóór de afsluitende tag </body> en specifiek na de span tag.