Vanilla JavaScript équivalent de JQuery's $.prêt?

Lors du développement de sites Web, les programmeurs utilisent le simple JavaScript appelé «Vanille javascrip"Et la bibliothèque JavaScript"jquery". De nombreux cadres et bibliothèques de développement Web modernes encouragent ou même nécessitent d'utiliser Vanilla Javascript au lieu de jQuery, car il peut être plus efficace, flexible et plus facile à comprendre et à entretenir.

Ce blog démontrera l'équivalent JavaScript de Vanilla du jQuery $.Méthode Ready ().

Vanilla JavaScript équivalent de JQuery's $.prêt()

L'équivalent JavaScript Vanilla de JQuery.La fonction prête () est la «document.addEventListener («DomContentloaded», function () …);" fonction.

Comment utiliser l'événement «DomContent Télélé» de Vanilla JavaScript?

"DomContentélé"Est un événement en JavaScript qui est tiré ou déclenché sans avoir à attendre les feuilles de style, les graphiques ou les sous-trames pour se charger complètement avant d'analyser le contenu HTML de base.

Syntaxe

élément.AddeventListener (événement, fonction, useCapture);

Dans cette syntaxe:

• "événement«Est le premier paramètre, qui peut être tout événement JavaScript valide.
• "fonction«Le corps principal est-il exécuté lorsque l'événement est déclenché.
• "user"Est un paramètre facultatif.

Exemple

Dans cet exemple, le script est exécuté lorsque le DOM est entièrement chargé à l'aide de Vanilla JavaScript.

Pour ce faire, nous créerons des en-têtes dans un fichier HTML qui s'affichera sur la page après le chargement de la page:

Vanille javascrip

Dom est entièrement chargé

Dans "”Tag, affichez un message d'alerte lors du chargement de la page et imprimez le message sur la console lorsque la page est chargée:

Selon l'extrait de code ci-dessus:

• Invoque le «addEventListener ()«Méthode avec l'événement»DomContentélé»Et une fonction qui imprimera un message après avoir chargé la page entière.
• La boîte de dialogue d'alerte est affichée avant de charger la page.

On peut observer que le contenu a été affiché lorsque le DOM est complètement chargé:

Comment utiliser jQuery $ ready ()?

Le "$.prêt()»La fonction dans jQuery est utilisée pour exécuter une fonction ou un bloc de code dès que le DOM est prêt / disponible pour la manipulation. Cela signifie que la fonction sera exécutée dès que la page aura terminé le chargement et l'analyse du HTML mais avant que toutes les autres ressources, telles que les images et les feuilles de style, aient terminé le chargement.

Syntaxe

Pour le "prêt()”Fonction dans jQuery, utilisez la syntaxe dirigée ci-dessous:

$ (document).prêt () corps

Dans cette syntaxe, le «corps«Est exécuté après que la page entière est complètement chargée.

Exemple

Dans l'exemple suivant, le document HTML spécifique masque l'élément sur le bouton cliquer après le chargement de la page entière.

Pour utiliser jQuery dans votre code, il est important de charger d'abord la bibliothèque:

Ajoutez du contenu dans le fichier HTML qui s'affiche sur la page après avoir chargé le DOM:

Fonction jQuery Ready ()

Dom est entièrement chargé

Cacher l'élément

Dans la balise, affichez d'abord un message d'alerte tout en chargeant le DOM. Ensuite, après avoir affiché du contenu, masquez l'en-tête en cliquant sur le bouton:

On peut voir que le contenu a été chargé sur la page après le chargement de l'élément DOM et que l'en-tête se cachera sur le bouton CLIC:

Il s'agissait de l'équivalent de la fonction jQuery $ Ready () dans Vanilla JavaScript.

Conclusion

Le "DomContentélé"L'événement est équivalent à JQuery"$.prêt()" méthode. Le «domtentélété» et le «$.Ready () ”tirera avant l'événement de chargement. Cela signifie que vous pouvez l'utiliser pour exécuter du code dès que le DOM est prêt sans attendre que toutes les ressources soient chargées. Ce blog a démontré l'équivalent JavaScript Vanilla du jQuery $.Méthode Ready ().