Conseils JQuery liés (1) ----À propos de $.Ready()

Conseils JQuery liés (1) ----À propos de $.Ready()_jquery

WBOY

Libérer： 2016-05-16 16:39:37

original

1605 Les gens l'ont consulté

J'ai étudié JQuery récemment, et cette chose est toujours très large et profonde. Permettez-moi de partager mon résumé d'apprentissage.

Méthode $(document).Ready() VS événement OnLoad VS méthode $(window).load()

La première chose que vous apprenez habituellement lorsque vous entrez en contact avec JQuery est quand démarrer l'événement. Pendant longtemps, les événements déclenchés après le chargement de la page étaient chargés dans l'événement Onload de "Body".

L'événement Body's Onload présente de nombreux inconvénients par rapport à la méthode Ready de JQuery. Par exemple :

1. Problème de chargement de plusieurs fonctions

<body onload="a();b();">

</body>

Copier après la connexion

Vous ne pouvez charger ainsi que dans l'événement Onload, ce qui est moche... Dans JQuery, vous pouvez utiliser plusieurs méthodes JQuery.Ready(), et elles seront exécutées dans l'ordre

2. Le code et le contenu ne sont pas séparés

Il va sans dire que c'est tellement dégoûtant -.- !!

3. L'ordre d'exécution est différent

Pour l'événement Body.Onload, il ne sera pas déclenché tant que tout le contenu de la page n'est pas chargé. Je veux dire tout le contenu, y compris les images, le flash, etc. Si la page a beaucoup de contenu, l'utilisateur attendra longtemps. 🎜>
Quant à la méthode $(document).ready(), cette méthode ne sera déclenchée qu'après le chargement de tout le DOM de la page, ce qui accélérera sans aucun doute grandement la page web

Mais pour certaines applications spéciales, telles que le zoom avant et arrière sur les images et le recadrage des images. Doit-il être exécuté une fois que tout le contenu de la page Web est chargé ? Je recommande d'utiliser la méthode $(window).load(). Cette méthode ne sera déclenchée que lorsque tout le contenu de la page sera chargé, et elle ne présente pas les inconvénients de l'événement OnLoad.

  <script type="text/javascript">
    $(window).load(function() {
      alert("hello");
    });
    $(window).load(function() {
      alert("hello again");
    });
  </script>

Copier après la connexion

Le code ci-dessus sera exécuté dans l'ordre une fois tout le contenu de la page chargé

Bien sûr n'oubliez pas la méthode Unload correspondante

$(window).unload(function() {
      alert("good bye");
    });

Copier après la connexion

Le code ci-dessus sera déclenché à la fermeture de la page

Fire JS avant tous les chargements du DOM

Cette méthode est ma préférée lors du débogage, et parfois j'utilise aussi cette méthode pendant le développement

<body>
  <script type="text/javascript">
    (function() {
      alert("hi");
    })(jQuery)
  </script>
</body>

Copier après la connexion

Oui, il s'agit d'utiliser la forme de fermeture js pour intégrer le code js dans le corps. Bien sûr, vous pouvez également intégrer le code js directement. problème de commande, comme suit :

<body>
<div id="test">this is the content</div>
  <script type="text/javascript">

    alert($("#test").html());//I Can display the content
    
  </script>
</body>
<body>

  <script type="text/javascript">

    alert($("#test").html());//I Can't display the content
    
  </script>
  <div id="test">this is the content</div>
</body>

Copier après la connexion

Les deux morceaux de code ci-dessus, le deuxième morceau de code ne peut interpréter le DOM qu'avant le code actuel, et le test n'existe pas dans le nombre de DOM analysés, donc le deuxième morceau de code ne peut pas être affiché correctement.