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

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

Ceci sera le cas pour le code d'une balise <script> placée juste avant le </body>.

Cependant, il arrive que les balises <script> soient placées plus haut dans la page pour toutes sortes de raisons.

Dans ces cas, il faudra travailler avec l'instruction jQuery $(document).ready(); ou, sous sa forme abrégée, $(function() { ... });.

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

HTML

$(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

$(document).ready(function() {

...

});

</script>

En comparant la syntaxe des deux extraits de code, on voit que la section (document).ready est optionnelle.

La seconde 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, appelé le sélecteur jQuery, 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

$(function() {

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

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

});

</script>