jQuery
dokumentbereites Ereignis

Was ist dokumentenbereit und wie soll ich es verwenden?

jQuery-Code wird häufig in jQuery(function($) { ... }); so dass es erst ausgeführt wird, nachdem das Laden des DOM abgeschlossen ist.

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

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

Dies ist wichtig, da jQuery (und JavaScript im Allgemeinen) kein DOM-Element auswählen können, das nicht für die Seite gerendert wurde.

<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>

Beachten Sie, dass Sie den jQuery-Namespace .ready() indem Sie einen benutzerdefinierten Handler an die .ready() -Methode übergeben. Dies ist nützlich, wenn eine andere JS-Bibliothek denselben verkürzten $ -Alias ​​verwendet wie jQuery , wodurch ein Konflikt entsteht. Um diesen Konflikt zu vermeiden, müssen Sie $.noConflict(); - Dies zwingt Sie, nur den Standard- jQuery- Namespace zu verwenden (anstelle des kurzen Alias ​​" $ ).
Durch Übergeben eines benutzerdefinierten .ready() an den .ready() Handler können Sie den Aliasnamen für die Verwendung von jQuery auswählen.

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

Anstatt Ihren jQuery-Code einfach am unteren Rand der Seite zu platzieren, stellt die Funktion $(document).ready sicher, dass alle HTML-Elemente gerendert werden und das gesamte Document Object Model (DOM) für die Ausführung von JavaScript-Code bereit ist.

jQuery 2.2.3 und früher

Diese sind alle gleichwertig. Der Code in den Blöcken wird ausgeführt, wenn das Dokument fertig ist:

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

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

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

Da diese gleichwertig sind, wird zuerst das empfohlene Formular verwendet. Nachfolgend wird eine Version mit jQuery Schlüsselwort anstelle von $ die die gleichen Ergebnisse liefern:

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

jQuery 3.0

Notation

Ab jQuery 3.0 wird nur dieses Formular empfohlen:

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 anderen dokumentbereiten Handler werden in jQuery 3.0 nicht mehr unterstützt.

Asynchron

Ab jQuery 3.0 wird der Ready-Handler immer asynchron aufgerufen . Das bedeutet, dass im folgenden Code immer das Protokoll "Outside Handler" angezeigt wird, unabhängig davon, ob das Dokument zum Zeitpunkt der Ausführung bereit war.

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

> Äußerer Handler
> im Handler

Unterschied zwischen $ (document) .ready () und $ (window) .load ()

$(window).load() wurde in jQuery Version 1.8 nicht mehr unterstützt (und vollständig von jQuery 3.0 entfernt ) und sollte daher nicht mehr verwendet werden. Die Gründe für die Abwertung werden auf der jQuery-Seite zu diesem Ereignis angegeben

Vorbehalte des Ladeereignisses bei Verwendung mit Bildern

Eine häufige Herausforderung, die Entwickler mithilfe der .load() Verknüpfung lösen .load() ist das Ausführen einer Funktion, wenn ein Bild (oder eine Bildersammlung) vollständig geladen wurde. Es gibt einige bekannte Vorbehalte, die beachtet werden sollten. Diese sind:

• Es funktioniert nicht konsistent oder zuverlässig über Browser
• Es wird nicht richtig in WebKit ausgelöst, wenn die Image- src auf dieselbe src wie zuvor eingestellt ist
• Der DOM-Baum wird nicht richtig angezeigt
• Kann für Bilder, die sich bereits im Cache des Browsers befinden, nicht mehr ausgelöst werden

Wenn Sie noch load() möchten, wird dies nachfolgend dokumentiert:

$(document).ready() wartet, bis das vollständige DOM verfügbar ist - alle Elemente im HTML-Code wurden analysiert und befinden sich im Dokument. Ressourcen wie Bilder wurden an diesem Punkt jedoch möglicherweise nicht vollständig geladen. Wenn es wichtig ist, zu warten, bis alle Ressourcen geladen sind, $(window).load() und Sie sich der erheblichen Einschränkungen dieses Ereignisses bewusst sind, können Sie stattdessen Folgendes verwenden:

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

Ereignisse anfügen und das DOM in ready () bearbeiten

Beispielanwendungen von $(document).ready() :

1. Event-Handler anhängen
   Fügen Sie jQuery-Ereignishandler hinzu

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

2. Führen Sie jQuery-Code aus, nachdem die Seitenstruktur erstellt wurde

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

3. Bearbeiten Sie die geladene DOM-Struktur
   Zum Beispiel: Ein div ausblenden, wenn die Seite zum ersten Mal div wird, und es beim Klickereignis einer Schaltfläche anzeigen

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

Unterschied zwischen jQuery (fn) und vorherigem Ausführen Ihres Codes

Die Verwendung des dokumentbereiten Ereignisses kann kleine Leistungsnachteile mit einer verzögerten Ausführung von bis zu ~ 300 ms haben. Dasselbe Verhalten kann manchmal durch die Ausführung von Code unmittelbar vor dem schließenden </body> -Tag erreicht werden:

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

führt zu einem ähnlichen Verhalten, führt jedoch früher aus, als es nicht auf den Ereignisauslöser für das Dokument bereit wartet, wie in:

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

Betonen Sie die Tatsache, dass das erste Beispiel auf Ihrem Wissen über Ihre Seite und der Platzierung des Skripts unmittelbar vor dem schließenden </body> -Tag und insbesondere nach dem span Tag beruht.