Table des matières:
- Comment utiliser $ (document). ready ()
- Utilisation du document. mécanisme prêt
- Alternatives au document. ready
Vidéo: Formation apprendre le JavaScript - Partie 1/11 2024
De nombreuses pages HTML5 et CSS3 nécessitent une fonction d'initialisation. Le mécanisme body onload est fréquemment utilisé dans DOM / JavaScript pour charger les pages dès que le chargement du document a commencé. C'est une fonction qui est lancée tôt pour configurer le reste de la page. Alors que le body onload fait bien ce travail, quelques problèmes existent avec la technique traditionnelle:
-
Cela nécessite de changer le HTML. Le code JavaScript doit être complètement séparé du HTML. Vous ne devriez pas avoir à changer votre HTML pour le faire fonctionner avec JavaScript.
-
Le timing n'est toujours pas correct. Le code spécifié dans body onload ne s'exécute qu'après l'affichage de la page entière. Il serait préférable que le code soit enregistré après le DOM est chargé mais avant la page s'affiche.
Comment utiliser $ (document). ready ()
jQuery a une excellente alternative au body onload qui pallie ces défauts. Jetez un oeil sur le code pour voir comment cela fonctionne:
prêt. html $ (document). prêt (changeMe); function changeMe () {$ ("# sortie"). html ("J'ai changé");}
Utilisation du document. mécanisme prêt
Est-ce que cela a changé?
Ce code utilise la technique jQuery pour exécuter le code d'initialisation:
-
La balise body n'a plus d'attribut onload . Ceci est une caractéristique commune de la programmation jQuery. Le HTML n'a plus de liens directs vers le JavaScript car jQuery permet au code JavaScript de se lier à la page Web.
-
La fonction d'initialisation est créée avec le $ (document). fonction ready () . Cette technique indique au navigateur d'exécuter une fonction à la fin du chargement du DOM (pour avoir accès à tous les éléments du formulaire) mais avant que la page ne soit affichée (pour que les effets du formulaire apparaissent instantanément à l'utilisateur).
-
$ document crée un objet jQuery à partir du document entier. Le document entier peut être transformé en objet jQuery en spécifiant un document dans la fonction $ (). Notez que vous n'utilisez pas de guillemets dans ce cas.
-
La fonction spécifiée est automatiquement exécutée. Dans ce cas particulier, vous souhaitez exécuter la fonction changeMe (), placez-la dans le paramètre de la méthode ready (). Notez que cela fait référence à changeMe en tant que variable, donc il n'a pas de guillemets ou de parenthèses.
Vous voyez plusieurs autres endroits (en particulier dans la gestion des événements) où jQuery attend une fonction en tant que paramètre. Une telle fonction est souvent appelée fonction callback car elle est appelée après qu'une sorte d'événement s'est produit.Vous voyez également les fonctions de rappel qui répondent aux événements du clavier, au mouvement de la souris et à l'achèvement d'une requête AJAX.
Alternatives au document. ready
Vous voyez parfois quelques raccourcis parce qu'il est si courant d'exécuter le code d'initialisation. Vous pouvez raccourcir
$ (document). prêt (changeMe);
au code suivant:
$ (changeMe);
Si ce code n'est pas défini dans une fonction et que changeMe est une fonction définie sur la page, jQuery exécute automatiquement la fonction directement comme le document. approche prête.
Vous pouvez également créer directement une fonction anonyme:
$ (document). ready (function () {$ ("# output"). html ("J'ai changé");});
Cette méthode (fonction anonyme) est lourde, mais vous voyez souvent le code jQuery utilisant cette technique. Vous pouvez créer une fonction appelée init () et l'appeler avec une ligne comme ceci:
$ (init);
Cette technique est simple et facile à comprendre, mais vous pouvez rencontrer les autres variantes lorsque vous examinez le code sur le Web.
