recherche

Maison >interface Web >js tutoriel >Conseils JQuery liés (1) ----À propos de $.Ready()_jquery

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

WBOY
WBOYoriginal
2016-05-16 16:39:371615parcourir

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>
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>
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");
    });
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>
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>
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.
Déclaration：
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
Article précédent：Explication détaillée de la programmation événementielle dans Node.js_node.jsArticle suivant：Explication détaillée de la programmation événementielle dans Node.js_node.js

Articles Liés

Voir plus