Méthode JS:
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
var username = "xiaoMing";
alerte (nom d'utilisateur);
}
</cript>
Ce qui suit est la méthode jQuery et le fichier jQuery doit être référencé.
La copie de code est la suivante:
<script type = "text / javascript">
$ (document) .ready (function () {
var username = "xiaoMing";
alerte (nom d'utilisateur);
});
</cript>
Ou son abréviation
La copie de code est la suivante:
$ (function () {
var username = "xiaoMing";
alerte (nom d'utilisateur);
});
Lorsque le DOM est chargé, il peut être exécuté (plus tôt que Window.onload). Il peut apparaître plusieurs fois dans la même page.ready ()
PS: la principale différence entre les deux
window.onload:
L'événement Window.onload n'est déclenché que lorsqu'un document est entièrement téléchargé dans le navigateur. Cela signifie que tous les éléments de la page sont opérationnels pour JS, ce qui signifie que tous les éléments de la page ne seront exécutés qu'après le chargement. Cette situation est très bénéfique pour la rédaction du code fonctionnel car l'ordre de chargement n'est pas pris en compte. ,
$ (document) .ready {}:
Sera appelé lorsque le DOM sera entièrement prêt et disponible. Bien que cela signifie également que tous les éléments sont accessibles au script, cela ne signifie pas que tous les fichiers associés ont été téléchargés. En d'autres termes, le code sera exécuté une fois le téléchargement HMTL terminé et analysé dans un arbre DOM.
Pour donner un exemple:
Supposons qu'il existe une page qui représente la galerie, qui peut contenir de nombreuses grandes images que nous pouvons masquer, afficher ou manipuler autrement via jQuery. Si nous définissons l'interface via la page Onload, l'utilisateur doit attendre que chaque image soit téléchargée avant de pouvoir utiliser cette page. Pire, si le comportement est légèrement ajouté aux éléments avec un comportement par défaut (tels que les liens), l'interaction de l'utilisateur peut conduire à des résultats inattendus. Cependant, lorsque nous essayons de le définir avec $ (document) .ready () {}, cette interface préparera le comportement correct disponible plus tôt.
L'utilisation de $ (document) .ready () {} est généralement meilleure que d'essayer des gestionnaires d'événements sur le surcharge, mais il doit être clair que, parce que le fichier de support peut ne pas encore être terminé, des propriétés comme la hauteur et la largeur de l'image peuvent ne pas être valides à ce moment.
Remarque: il y aura des problèmes avec l'utilisation de la méthode de mise en place de JS en bas de la page et de la méthode d'utilisation de Defer = "Defer". Il est préférable d'utiliser la fonction ci-dessus!