Detaillierte Erläuterung der Verwendung der jQuery.ready()-Funktionsinstanz-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung der jQuery.ready()-Funktionsinstanz

巴扎黑

Freigeben： 2017-06-25 10:22:24

Original

1349 Leute haben es durchsucht

Die Funktion ready() wird verwendet, um die angegebene Funktion unmittelbar nach dem Laden der aktuellen Dokumentstruktur auszuführen.

Diese Funktion entspricht dem window.onload-Ereignis.

Sie können diese Funktion mehrmals aufrufen, um mehrere Funktionen zu binden. jQuery führt diese Funktionen sofort nach dem Laden der DOM-Dokumentstruktur in der Bindungsreihenfolge aus.

Bitte beachten Sie: Bitte verwenden Sie die Funktion „ready()“ und die Funktion „onload event binding“ des Elements nicht gleichzeitig auf derselben Seite, da sie nicht vollständig miteinander kompatibel sind. Wenn Sie „load“ verwenden müssen, verwenden Sie bitte nicht „ready()“ und „load()“ von jQuery, um einen Load--Ereignishandler zum Fenster oder zu weiteren angegebenen Elementen (z. B. Bildern) hinzuzufügen.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

jQueryObject.ready( fn )

Parameter

Parameterbeschreibung

fn Funktionstyp gibt die Funktion an, die sein muss hingerichtet.

ready() übergibt einen Parameter an Funktionsparameterfn. Dieser Parameter ist die jQuery-Kennung. Sie können den Namen des Parameters anpassen und ihn als Alias für jQuery verwenden.

Rückgabewert

ready()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Im Vergleich zum window.onload-Ereignis hat ready() eine höhere Ausführungspriorität. window.onload muss warten, bis alle Elemente der aktuellen Seite, einschließlich Bilder, geladen sind, bevor es ausgeführt wird. ready() wird unmittelbar nach dem Zeichnen der HTML-Struktur ausgeführt, ohne auf das Laden aller Ressourcen wie Bilder zu warten.

Meistens können Sie ready() anstelle von window.onload verwenden. Es gibt jedoch einige Ausnahmen, z. B. wenn Sie den :target-Selektor verwenden, müssen Sie das window.onload-Ereignis verwenden (da es auch auf etwas außerhalb der Dokumentstruktur basiert).

Beispiel und Beschreibung

Die Funktion „ready()“ hat die folgenden drei äquivalenten Formen:

Funktionshandler(){

//Hier werden die Anforderungen ausgeführt Code

}

// Formular 1

$(document).ready( handler );

// Formular 2

$( ).ready( handler ); // Dieses Formular wird nicht empfohlen

// Formular 3

$( handler );

Nehmen Der folgende HTML-Code als Beispiel:

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung der Funktion ready() zu demonstrieren:

// Form 1

$(document ).ready ( function(){

// Klickereignis für BTN-Schaltfläche binden

$("#btn").click( function(){

Alert( „Sie haben auf die Schaltfläche geklickt!“);

} );

// Form 3

$( function(){

$("#message").html( 'Dokument geladen!' );

Wenn mehrere JS-Bibliotheken nebeneinander existieren, kann die Kontrolle über die Variable $ anderen JS-Bibliotheken wie Prototype übertragen werden. Zu diesem Zeitpunkt können wir die Variable jQuery nur im globalen Bereich verwenden. Die Funktion ready() übergibt jedoch einen Parameter; jQuery, sodass wir den Parameternamen anpassen können, um die Variable $ innerhalb der Funktion für den Zugriff auf die jQuery-Bibliothek fortzusetzen (Sie können sie auch auf einen anderen Namen festlegen und dann Verwenden Sie die Parametervariable, um auf jQuery zuzugreifen.

// Laden Sie die Prototype-Bibliotheksdatei

// Laden Sie die jQuery-Bibliotheksdatei

//Gib die Kontrolle über die Variable $

jQuery auf ();

// Führe

DOM-Operationen basierend auf Prototype aus

(die Kontrolle über die Variable $ liegt in den Händen von Prototype)$("myDiv").setStyle( {color : "#ffffff"} );

jQuery(document).ready( function( $ ){

// Innerhalb der Funktion können wir weiterhin die Variable $ verwenden, um auf jQuery zuzugreifen

$("#message").html( "Die aktuelle jQuery-Version ist: " + $.fn.jquery );

jQuery(document ).ready( function( abc ){

// Innerhalb der Funktion können wir die Variable abc verwenden, um auf jQuery zuzugreifen

abc("#message").html( "Die aktuelle jQuery Version ist: " + abc .fn.jquery );

} );

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jQuery.ready()-Funktionsinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!