Quand dois-je utiliser du jQuery document.fonction ready?

Question

Quand dois-je utiliser du jQuery document.fonction ready?

Demandé el 25 de Octobre, 2012: Quand la question a-t-elle été
27739 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

On m'a dit d'utiliser document.prêt quand j'ai commencé à utiliser du Javascript/jQuery mais je n'ai jamais vraiment appris pourquoi.

Quelqu'un pourrait fournir quelques directives de base sur lorsque cela a du sens pour l'envelopper de javascript/jquery code à l'intérieur de jQuery document.ready?

Certains sujets, je suis intéressé par:

jQuery .on() méthode: - je utiliser l' .on() méthode pour AJAX un peu (en général sur le de créer dynamiquement des éléments du DOM). Si l' .on() cliquez sur gestionnaires de toujours être à l'intérieur d' document.ready?
Performance: Est-il plus performant pour garder divers javascript/jQuery objets à l'intérieur ou à l'extérieur du document.prêt (d'ailleurs, est la différence de performance significative?)?
La portée de l'objet: AJAX-pages chargées ne peuvent pas accéder à des objets qui étaient à l'intérieur de la page précédente du document.prêt, correct? Ils ne peuvent accéder à des objets qui ont été en dehors de document.prêt (c'est à dire, vraiment "mondiale" des objets)?

Mise à jour: À suivre les meilleures pratiques, tout mon javascript (bibliothèque jQuery et mon code d'applications) est au bas de ma page HTML et je suis à l'aide de l' defer d'attribut sur le jQuery contenant des scripts sur mon AJAX chargement des pages afin que je puisse accéder à la bibliothèque jQuery sur ces pages.

Demandé el 25 de Octobre, 2012 par tim peterson

Answer 1

5 Réponses

Answer 2

152voto

Jashwant Points 10008

En termes simples,

$(document).ready est un événement qui se déclenche quand documentest prêt.

Supposons que vous avez placé votre code jQuery en head section et en essayant d'accéder à un dom élément (une ancre, d'une img, etc), vous ne serez pas en mesure d'y accéder à cause html est interprété de haut en bas et de vos éléments html ne sont pas présents lors de votre jQuery code s'exécute.

Pour surmonter ce problème, nous plaçons chaque jQuery/javascript code (qui utilise les DOM) à l'intérieur d' $(document).ready de la fonction qui est appelée lorsque tous les dom éléments peut être consulté.

Et c'est la raison, lorsque vous placez votre jQuery code en bas (après que tous les éléments du dom, juste avant </body>) , il n'est pas nécessaire pour $(document).ready

Il n'est pas nécessaire de placer on méthode de $(document).ready uniquement lorsque vous utilisez on méthode document à cause de la même raison que j'ai expliqué ci-dessus.

    //No need to put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

MODIFIER

D'après les commentaires,

$(document).ready ne pas attendre pour les images ou les scripts. C'est la grande différence entre $(document).ready et $(document).load
Seulement le code qui accède à la DOM devrait être prêt gestionnaire. Si c'est un plugin, il ne devrait pas être dans l'événement ready.

Répondu el 25 de Octobre, 2012 par Jashwant (10008 Points )

Answer 3

7voto

Justin Points 2493

Réponses:

jQuery .sur la (les) méthode: - je utiliser l' .() la méthode AJAX un peu (création dynamique d'éléments du DOM). Si l' .() des gestionnaires de clic toujours être à l'intérieur du document.est-il prêt?

Non, pas toujours. Si vous chargez votre JS dans le head document, vous devrez. Si vous créez les éléments après le chargement de la page via AJAX, vous aurez besoin de. Vous n'aurez pas besoin de si le script est en dessous de l'élément html à l'ajout d'un gestionnaire de trop.

Performance: Est-il plus performant pour garder divers javascript/jQuery des objets à l'intérieur ou à l'extérieur du document.prêt (d'ailleurs, est la différence de performance significative?)?

Il dépend. Il va prendre la même quantité de temps pour joindre les gestionnaires, cela dépend si vous voulez que cela se produise immédiatement que le chargement de la page, ou si vous voulez attendre jusqu'à ce que toute la doc est chargé. Donc ça dépendra de ce que d'autres choses que vous faites sur la page.

La portée de l'objet: AJAX-pages chargées ne peuvent pas accéder à des objets qui étaient à l'intérieur l'état de la page du document.prêt, correct? Ils ne peuvent accéder à des objets qui étaient à l'extérieur du document.prêt (c'est à dire, vraiment "mondiale" des objets)?

C'est essentiellement, c'est propre fonction de sorte qu'il ne peut accéder à vars déclaré à une portée globale (en dehors de/au-dessus de toutes les fonctions) ou avec window.myvarname = '';

Répondu el 25 de Octobre, 2012 par Justin (2493 Points )

Answer 4

6voto

Tom Sarduy Points 5636

Avant de vous pouvez les utiliser jQuery, vous devez vous assurer que la page est dans un état où il est prêt à être manipulé. Avec jQuery, nous accomplissons cela en mettant notre code dans une fonction, puis passage que la fonction d' $(document).ready(). La fonction que nous avons passe peut-être qu'une fonction anonyme.

$(document).ready(function() {  
    console.log('ready!');  
});

Ce sera l'exécution de la fonction que l'on passe .prêt() une fois que le document est prêt. Ce qui se passe ici? Nous sommes à l'aide de $(document) pour créer un objet jQuery à partir de notre page de document, puis d'appeler la .prêt() sur cet objet, en lui passant la fonction que nous voulons exécuter.

Puisque c'est quelque chose que vous allez trouver vous-même faire beaucoup, il y a une méthode abrégée pour cela, si vous préférez - le $ (), fonction ne double devoir comme un alias pour $(document).prêt() si vous passer d'une fonction:

$(function() {  
    console.log('ready!');  
});

C'est une bonne lecture: Jquery principes de base

Répondu el 25 de Octobre, 2012 par Tom Sarduy (5636 Points )

Answer 5

3voto

Dipaks Points 6880

.prêt() - Spécifier une fonction à exécuter lorsque le DOM est chargé complètement.

$(document).ready(function() {
  // Handler for .ready() called.
});

Voici une Liste de toutes les Méthodes jQuery

Lire sur l'Introduction de $(document).prêt()

Répondu el 25 de Octobre, 2012 par Dipaks (6880 Points )

Answer 6

3voto

elclanrs Points 40467

Pour être réaliste, document.ready n'est pas nécessaire pour rien d'autre que de la manipulation du DOM avec précision et il n'est pas toujours nécessaire que le ou la meilleure option. Ce que je veux dire, c'est que lorsque vous développez un grand plugin jQuery par exemple vous avez à peine l'utiliser dans le code parce que vous essayez de garder au SEC, de sorte que vous abstrait, autant que possible, des méthodes pour manipuler le DOM, mais sont destinées à être invoquée plus tard. Lorsque votre code est étroitement intégré la seule méthode exposée en document.ready est habituellement init où tous les DOM magie se produit. Espérons que cela répond à votre question.

Répondu el 25 de Octobre, 2012 par elclanrs (40467 Points )

Quand dois-je utiliser du jQuery document.fonction ready?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Quand dois-je utiliser du jQuery document.fonction ready?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: