Découverte de la syntaxe de base de jQuery

Dans cette nouvelle leçon, nous allons découvrir la syntaxe de base de jQuery et écrire nos première instructions jQuery. Nous allons également voir où écrire le code jQuery.

 

Où écrire le code jQuery

Dans ce cours, j’utiliserai le site codepen.io pour partager mes différents codes et afin que vous puissiez voir les résultats des différents exemples immédiatement.

Cependant, en conditions “réelles”, c’est-à-dire lorsqu’on travaille sur un projet web, on créera nos différents fichiers avec un éditeur de texte comme Visual Studio Code, Brackets, Atom, Sublime Text ou encore Komodo.

Je vous conseille donc durant ce cours d’utiliser l’éditeur de texte de votre choix afin de coder en même temps que moi.

Lorsqu’on code, il est généralement considéré comme une bonne pratique de séparer les différents modules d’un projet en les plaçant dans différents fichiers, notamment car cela permet une maintenance du code beaucoup plus simple et car cela rend l’ensemble d’un projet beaucoup plus lisible pour un développeur.

Nos codes jQuery ne font pas exception et nous allons donc écrire ces différents codes dans des fichiers séparés. Nous inclurons ensuite les fichiers voulus dans nos fichiers HTML grâce à des éléments script et à leur attribut src.

Pour ce cours, nous allons donc déjà créer deux fichiers : un fichier qu’on va nommer cours.html et un fichier qu’on appellera cours.js dans lequel nous placerons tout notre code jQuery.

 

La syntaxe du jQuery

Le jQuery possède une syntaxe de base relativement simple, logique et intuitive pour des personnes maitrisant bien les langages HTML, CSS et JavaScript.

Une fois la librairie jQuery inclue dans nos scripts, jQuery va créer deux objets jQuery et $ qui vont être des propriétés de l’objet global window.

Nous allons pouvoir accéder aux différentes propriétés et méthodes de la librairie jQuery en utilisant jQuery() ou $().

Notez que les deux propriétés jQuery et $ sont ce qu’on appelle des alias : cela signifie qu’on va pouvoir utiliser l’une ou l’autre de façon complètement interchangeable.

La plupart des développeurs utilisent plutôt la propriété $ puisqu’elle est plus rapide à écrire que jQuery. Dans ce cours, nous utiliserons également $.

Concrètement, nous allons donc commencer nos scripts jQuery comme cela :

Le jQuery est ensuite un langage de “queries” JavaScript c’est-à-dire un langage de requêtes JavaScript. Nous allons utiliser le jQuery pour effectuer des actions sur des éléments HTML.

Pour effectuer ces actions, nous allons donc déjà devoir sélectionner nos éléments HTML. Nous allons ici découvrir l’une des grandes forces du jQuery : l’utilisation des sélecteurs CSS. En effet, pour sélectionner un élément HTML en jQuery, il va nous suffire de mentionner le sélecteur CSS associé à cet élément dans notre méthode $() (ou dans la méthode jquery()).

Pour sélectionner tous les paragraphes d’une page, nous écrirons donc $("p") tandis que pour ne sélectionner que l’élément possèdent un attribut id="p1", on écrira $(“#p1").

Nous allons pouvoir utiliser n’importe quel sélecteur CSS pour cibler nos éléments HTML en jQuery, et notamment les sélecteurs CSS complexes ou composés. Cela va nous permettre de cibler très précisément n’importe quel type de contenu HTML de manière simple.

Lorsqu’on utilise la syntaxe $(selecteur), jQuery retourne en fait un objet jQuery. Nous allons ensuite pouvoir appliquer des méthodes ou des propriétés à l’objet retourné afin d’effectuer des actions ou d’obtenir des informations sur celui-ci.

Pour cela, on utilisera généralement une fonctionnalité du JavaScript qui s’appelle le chainage des méthodes. “Chainer” une méthode signifie simplement appliquer directement cette méthode au résultat de la précédente. Pour chainer une méthode, nous allons utiliser l’opérateur ..

De manière concrète, nos codes jQuery vont donc ressembler à cela : $(selecteur).action(). Ici, la partie $(selecteur) renvoie un objet auquel on applique la méthode action().

See the Pen
Cours jQuery 1.3.1 by Pierre ( @pierregiraud)
on CodePen.

Dans le code ci-dessus, on commence par sélectionner tous les éléments p de notre page avec $("p"). Ce code renvoie un objet jQuery auquel on applique la méthode jQuery hide() qui va se charger de cacher tous les paragraphes de notre page.

Notez qu’on va bien évidemment tout à fait pouvoir chainer plusieurs méthodes à la suite avec la syntaxe $(selecteur).methode1().methode2().methode3()… Pour que ce type de code fonctionne, cependant, il faudra s’assurer que chaque méthode renvoie bien un objet afin de pouvoir appliquer la méthode suivante à cet objet renvoyé.

 

Attendre le chargement de la page pour exécuter le jQuery

La plupart des opérations qu’on va effectuer en jQuery vont être des manipulations de la structure HTML de la page. Or, pour manipuler cette structure HTML, il faut qu’elle existe.

Il faudra donc s’assurer que le navigateur a fini de charger la structure HTML de notre page avant d’effectuer une quelconque opération en jQuery.

Pour faire cela, on peut utiliser l’événement JavaScript load pour attendre la fin du chargement du document avant d’effectuer nos opérations jQuery. Cette méthode n’est cependant pas optimale car on n’aura bien souvent pas besoin d’attendre que chaque élément du document soit chargé pour effectuer une opération.

Ici, nous allons donc plutôt utiliser un événement mis à notre disposition par jQuery: l’événement ready. Cet événement va nous permettre d’exécuter notre code jQuery dès que le document est prêt (“ready) à être manipulé.

On va pouvoir utiliser cet événement comme cela :

See the Pen
Cours jQuery 1.3.2 by Pierre ( @pierregiraud)
on CodePen.

Ici, on accroche notre événement ready au document et on passe une fonction de rappel anonyme à cet événement.

L’événement ready se déclenche dès que le document est prêt à être manipulé et la code contenu dans la fonction anonyme s’exécute alors.

Retenez bien cette structure de base car c’est celle qui nous allons utiliser durant tout le cours et c’est également celle que vous utiliserez par la suite dans tous vos projets de développement utilisant jQuery.

Vous pouvez également noter que jQuery nous fournit une notation abrégée pour $(document).ready() sous la forme de $(). Ces deux notations sont strictement équivalentes.

La forme abrégée est plus rapide à écrire et est généralement préférée par les développeurs expérimentés. Dans ce cours, j’utiliserai la forme longue qui est plus lisible afin d’éviter certaines confusions.