Explication détaillée de l'utilisation de l'instance de fonction jQuery.ready()

La fonction ready() est utilisée pour exécuter la fonction spécifiée immédiatement après le chargement de la structure actuelle du document.

Cette fonction est équivalente à l'événement window.onload.

Vous pouvez appeler cette fonction plusieurs fois pour lier plusieurs fonctions. jQuery exécutera ces fonctions dans l'ordre de liaison immédiatement après le chargement de la structure du document DOM.

Veuillez noter : veuillez ne pas utiliser la fonction ready() et la fonction de liaison d'événement onload de l'élément en même temps sur la même page, car elles ne sont pas entièrement compatibles entre elles. Si vous devez utiliser Load, veuillez ne pas utiliser les fonctions ready() et Load() de jQuery pour ajouter un gestionnaire d'événement Load à la fenêtre ou à des éléments plus spécifiés (tels que des images).

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

jQueryObject.ready( fn )

Paramètres

Description du paramètre

fn Le type de fonction spécifie la fonction qui doit être exécuté.

ready() transmettra un paramètre au paramètre de fonctionfn Ce paramètre est l'identifiant jQuery. Vous pouvez personnaliser le nom du paramètre et l'utiliser comme alias pour jQuery.

Valeur de retour

ready()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Par rapport à l'événement window.onload, ready() a une priorité d'exécution plus élevée. window.onload doit attendre que tous les éléments de la page actuelle, y compris les images, soient chargés avant d'être exécuté ; ready() est exécuté immédiatement après le dessin de la structure HTML, sans attendre que toutes les ressources telles que les images soient chargées.

La plupart du temps, vous pouvez utiliser ready() au lieu de window.onload. Cependant, il existe quelques exceptions, par exemple lors de l'utilisation du sélecteur :target, vous devez utiliser l'événement window.onload (car il repose également sur quelque chose en dehors de la structure du document).

Exemple et description

La fonction ready() a les trois formes équivalentes suivantes :

function handler(){

//Voici les exigences Exécuté code

}

// Formulaire 1

$(document).ready( handler );

// Formulaire 2

$( ).ready( handler ); // Ce formulaire n'est pas recommandé

// Formulaire 3

$( handler );

Prendre le code HTML suivant à titre d'exemple :

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation spécifique de la fonction ready() :

// Form 1

$(document ).ready ( function(){

// Lier l'événement de clic pour le bouton btn

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

alert( "Vous avez cliqué sur le bouton!");

} );

} );

// Formulaire 3

$( function(){

$("#message").html( 'Document chargé !' );

} );

Lorsque plusieurs bibliothèques JS coexistent, le contrôle de la variable $ peut être donné à d'autres bibliothèques JS, comme Prototype. À ce stade, nous ne pouvons utiliser la variable jQuery que dans la portée globale. Cependant, la fonction ready() passera un paramètre ; jQuery, nous pouvons donc personnaliser le nom du paramètre, de manière à continuer la variable $ dans la fonction pour accéder à la bibliothèque jQuery (vous pouvez également lui attribuer un autre nom, puis utilisez la variable paramètre pour accéder à jQuery).

// Chargez le fichier de bibliothèque Prototype

// Chargez le fichier de bibliothèque jQuery

//Abandonnez le contrôle de la variable $

jQuery. ();

// Effectuer des opérations DOM basées sur le prototype (le contrôle de la variable $ est entre les mains du prototype)

$("myDiv").setStyle( {color : "#ffffff"} );

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

// A l'intérieur de la fonction, on peut toujours utiliser la variable $ pour accéder à jQuery

$("#message").html( "La version actuelle de jQuery est : " + $.fn.jquery );

} );

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

// A l'intérieur de la fonction, on peut utiliser la variable abc pour accéder à jQuery

abc("#message").html( "Le jQuery actuel la version est : " + abc .fn.jquery );

} );

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn