$(document).ready(function () { … }); ou $(function () { … });

Lorsqu'on veut effectuer des opérations sur les éléments d'une page Web côté client, il est important de s'assurer d'abord que les objets JavaScript permettant d'effectuer de telles manipulations soient bel et bien créés.

Voilà précisément le rôle de l'instruction jQuery $(document).ready(function () { ... }); ou, sous sa forme abrégée, $(function () { ... });.

▼Publicité

Voici la structure typique du code qui doit être effectué lorsque les objets sont entièrement chargés sur la page.

HTML

<script>

    $(function () {

        ...   // les instructions placées ici peuvent manipuler les objets représentant les éléments HTML

    });

</script>

Le bloc de code précédent aurait donc pu être écrit comme suit :

HTML

<script>

    $(document).ready(function () {

        ...   

    });

</script>

Cette notation est plus longue à écrire mais elle montre mieux ce qui se passe :

  • Notez d'abord le signe de dollar au début de l'expression. Ce signe est un alias pour jQuery. On aurait donc pu changer $(document).ready(function () { ... }); pour jQuery(document).ready(function () { ... });

    De façon plus concrète, le signe de dollar permet d'accéder à l'objet correspondant à ce qui est entre parenthèses. Dans le cas présent, il permet d'accéder à l'objet représentant la page Web (document). 

  • On applique ensuite la fonction ready() à l'objet document. Cette fonction retournera true lorsque tous les objets représentant les éléments HTML de la page seront créés. Cette représentation objet des éléments de la page Web est appelée DOM (Document Object Model).

    Le plus beau dans tout ça, c'est que ready() retournera true dès que le DOM sera créé, avant-même que le contenu de la page soit chargé dans le navigateur. Donc, l'exécution du code associé se déroulera le plus tôt possible dans le cycle de chargement de la page.

  • Dès que $(document).ready() retourne true, une fonction anonyme est définie puis elle est immédiatement exécutée. Il s'agit d'une fonction qui n'a pas de nom et donc qui sera exécutée une seule fois.

    Prenez note que les variables locales définies dans une fonction anonyme ne pourront pas être utilisées à l'extérieur de cette fonction, ce qui est souhaitable pour éviter les conflits de noms de variables.

En résumé, on utilisera $(function () { ... }); pour écrire les lignes de code qui doivent être exécutées automatiquement dès que le DOM sera créé.

Ex :

HTML

<script>

    $(function () {

        // applique la fonction datepicker() à tous les élément ayant la classe datepicker

        $(".datepicker").datepicker();   

    });

</script>

Pour plus d'information

« .ready() ». jQuery. http://api.jquery.com/ready/

« $( document ).ready() ». jQuery. http://learn.jquery.com/using-jquery-core/document-ready/

« Introducing $(document).ready() ». Learning jQuery. http://www.learningjquery.com/2006/09/introducing-document-ready/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories