Nous avons une déclaration JQuery $(function() comme:
<script type="text/javascript">
$(function(){
//Code..
})
</script>
question Dumb - quand est exactement cette fonction exécutée? Est-ce lorsque la totalité de la page HTML a été téléchargée par le client?
Quel est l'avantage d'utiliser l'emballage de votre code dans $(function() par opposition à faire juste:
<script type="text/javascript">
//Code..
</script>
Il est exécuté dès que le DOM est analysé et est appelé par ordre d'apparition s'il y a plusieurs apparences. À ce stade, le document n'est cependant pas affiché, il est juste analysé.
Je ne suis pas sûr que ce soit correct sur le document analysé mais pas affiché. Je pensais que les navigateurs affichaient généralement des éléments lorsqu'ils étaient analysés. Est-ce que je me trompe? – user113716
@patrick dw: vous n'êtes pas. En outre, vous pouvez lire et manipuler les données de style et de position à partir de '$ .ready'; le navigateur a déjà calculé la disposition de la page à ce moment-là. – Tgr
La structure est analysée (peut inclure des calculs de mise en page) par le navigateur, mais l'interface utilisateur n'est pas encore peinte, c'est-à-dire visible par l'utilisateur .. – Nrj
Lorsque le document termine le chargement. Il est le même que la rédaction du présent:
$(document).ready(function(){});
EDIT: Pour répondre à votre deuxième question:
Si vous ne pas envelopper votre code dans le bloc ci-dessus, il mettrait le feu dès qu'il est rencontré à la place de tous les contrôles sur la page ont chargé. Donc, si un bloc était en haut d'une page et qu'il faisait référence à des éléments de la page, ces références ne fonctionneraient pas car les éléments n'ont pas encore été chargés. Mais si vous retournez dans le bloc, vous savez que la page est chargée et que tous les éléments sont disponibles pour référence.
Il arrive en effet ** avant ** le document entier a été chargé; c'est juste quand le DOM est prêt. – VoteyDisciple
@Votey vous avez raison. J'aurais dû être plus clair. Dans la plupart des cas, ce n'est généralement pas un problème, mais il peut parfois y avoir une différence importante. – spinon
Il se déclenche lorsque le document a été analysé et est prêt, et est l'équivalent de $(document).ready(function() { }).
L'avantage évident est que d'avoir votre tag de script avant les autres éléments de la page signifie que votre script peut interagir avec eux, même s'ils ne sont pas disponibles au moment de l'analyse. Si vous exécutez votre script avant que les éléments aient été analysés et que le document n'est pas prêt, ils ne seront pas disponibles pour l'interaction.
Il se déclenche une fois le document entièrement chargé, l'arborescence DOM a été initialisée, tous les styles CSS ont été appliqués et tout le code Javascript a été exécuté. Il diffère de l'événement load en ce que les éléments (autres que CSS/JS) qui chargent leur contenu à partir d'autres URL, telles que des images ou des fichiers flash, n'ont pas nécessairement terminé le chargement à ce stade. Ceci est généralement appelé l'événement "domready" ou "domloaded", et certains navigateurs modernes le supportent directement (par exemple Firefox a un événement DomContentLoaded), et sur d'autres, il peut être simulé avec divers attributs, comme l'attribut defer ou un script à la toute fin du corps.
L'avantage est que vous pouvez interagir de manière fiable avec le document en ce moment; Par exemple, vous pouvez définir un gestionnaire d'événement sur un élément avec un certain ID et être sûr qu'il existe déjà dans l'arborescence DOM. D'un autre côté, il peut fonctionner beaucoup plus tôt que l'événement de chargement, si une ressource externe est lente à charger. Si votre script est à la fin de votre code HTML, il peut y avoir peu de différences dans l'utilisation ou non de l'événement domready, mais généralement les scripts sont appelés à partir de la balise head, et aucun élément du corps n'est disponible pour le moment.
Je ne pense pas que ce sera le cas à moins de fermer cette parenthèse. jQuery n'élimine pas le besoin d'une syntaxe correcte! – chriscauley