Maison > interface Web > js tutoriel > le corps du texte

Une brève introduction à l'ordre d'exécution de JavaScript

黄舟
Libérer: 2017-03-14 15:12:43
original
1488 Les gens l'ont consulté

Ceci est un article sur les bases de JavaScript. Il explique principalement l'ordre dans lequel JavaScript est exécuté après le chargement de la page Web. Il est très important pour nous de comprendre le mécanisme d'exécution de JavaScript. Jetons un coup d'oeil.

Javascript est exécuté de haut en bas Sauf indication contraire de votre part, le code Javascript n'attendra pas que la page soit chargée avant de s'exécuter. Par exemple, une page web contient le code HTML suivant :

<p id="ele">welcome to www.codeceo.com</p>
Copier après la connexion

Si vous ajoutez le code Javascript suivant avant cette ligne de code HTML :

<script type="text/javascript">
  document.getElementById(&#39;ele&#39;).innerHTML= &#39;welcome to my blog&#39;;
</script>
Copier après la connexion

Exécutez la page, vous allez obtenez quelque chose comme ceci Message d'erreur : "document.getElementById('ele') is null." La raison est que lorsque le javascript ci-dessus est exécuté, il n'y a aucun élément DOM avec le ID 'ele' sur la page.

Il existe deux solutions :

1. Placez le code javascript après le code HTML :

<p id="ele">welcome to www.codeceo.com</p>
Copier après la connexion

2 Attendez que la page Web soit chargée et exécutez le javascript. code. Vous pouvez utiliser la solution traditionnelle (load) : ajoutez d'abord "," au corps HTML, puis appelez le code javascript ci-dessus dans la fonction load() . Ce sur quoi je veux me concentrer ici, c'est utiliser jQuery pour y parvenir :

<script>
$(document).ready(function(){
   document.getElementById(&#39;ele&#39;).innerHTML= &#39;welcome to my blog&#39;;
});
</script>
//当然,既然用到了jQuery,更简单的写法是:
<script>
$(document).ready(function(){
   $(&#39;#ele&#39;).html(&#39;welcome to my blog&#39;); //这里也可用.text()方法
});
</script>
Copier après la connexion

Vous pouvez placer le code jQuery ci-dessus n'importe où sur la page, et il attendra toujours que la page est chargé avant son exécution.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal