Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

DECOUVERTE DE JQUERY

Syntaxe de base de jQuery

Le jQuery possède une syntaxe de base assez simple, logique et intuitive.

Tout d’abord, vous devez savoir que le jQuery va baser tout son fonctionnement sur la fonction jQuery(). Cette fonction est généralement écrite de manière abrégée $().

Nous utiliserons l’écriture abrégée dans ce cours. Vous vous rappellerez que l’utilisation du signe dollar en JavaScript signifie l’appel à la librairie jQuery.

Cette fonction jQuery va pouvoir accepter différents arguments et va toujours retourner un objet jQuery. Les arguments peuvent être des sélecteurs CSS ou des fonctions.

L’une des grandes forces du jQuery est que l’on va pouvoir avoir accès aux éléments HTML en utilisant des sélecteurs CSS. Cela simplifie grandement l’accès au contenu HTML.

La syntaxe de base du jQuery pour accéder aux éléments HTML va donc être de la forme suivante : $(selecteur).

Par exemple, pour accéder à tous les éléments p de notre page HTML, nous écrirons en jQuery : $('p'). Nous reparlerons des sélecteurs CSS plus en détail plus tard dans ce chapitre.

Ensuite, nous allons pouvoir appliquer des méthodes à l'objet jQuery créé et retourné faisant référence aux éléments HTML ciblés.

Une grande partie de ce cours va être dédiée à la découverte des méthodes fournies par le jQuery puisque c’est ce qui en fait son principal intérêt.

Effectivement, rappelez vous que le jQuery est là pour simplifier nos développements en JavaScript. Ainsi, jQuery va nous fournir des scripts complets JavaScript déjà prêts à l’emploi enfermés dans des méthodes. Nous n’avons alors plus qu’à appeler la bonne méthode.

Par exemple, jQuery dispose d’une méthode hide() qui, comme son nom l’indique, va nous permettre de cacher des éléments HTML (« hide » signifie « cacher » en anglais).

Cette méthode contient tout un script JavaScript qu'il aurait été fastidieux de créer nous mêmes. Nous n’avons pas à nous préoccuper de ce code ni à l’écrire : il nous suffit d’appeler hide().

Pour cacher tous les paragraphes de notre page HTML, nous écrirons donc tout simplement en jQuery : $('p').hide().

Voici un premier exemple pratique :

On utilise la méthode hide() de jQuery

Notre paragraphe a bien été caché grâce à hide() en jQuery

Essayer ce code !

Ici, nous réalisons deux opérations en une : on commence par accéder à tous les paragraphes de notre page HTML avec $('p') et on applique directement la méthode hide() à l'objet jquery retourné. Pour cela, on utilise le symbole point (".") comme on avait déjà l'habitude de le faire en JavaScript.

Sélecteurs CSS, objets et méthodes jQuery

Nous allons pouvoir utiliser tous les sélecteurs CSS (incluant les sélecteurs CSS3) en jQuery.

Nous allons tout d’abord évidemment pouvoir utiliser les sélecteurs simples de type « élément », comme le sélecteur p par exemple pour accéder aux paragraphes de notre page.

L'une des grandes forces du jQuery est que l’on va également pouvoir utiliser les sélecteurs d'attributs ou des sélecteurs complexes afin de cibler précisément certains éléments dans notre page.

Par exemple, on va pouvoir sélectionner tous les éléments portant la class para, en écrivant $('.para') en jQuery.

Vous aurez bien compris le principe : nous allons simplement pouvoir utiliser n’importe quel sélecteur CSS pour accéder à nos éléments HTML en jQuery.

Une fois un élément sélectionné, vous devez savoir que le jQuery va retourner un objet jQuery faisant référence à l'élément en question. C’est ce qui nous permet d'appliquer des méthodes directement à cet objet.

Si plusieurs éléments ont été sélectionnés d’un coup (par exemple, si l’on sélectionne tous les paragraphes de notre page), nous allons pouvoir accéder à un objet en particulier en utilisant un système d’indices comme pour les tableaux.

Comme la fonction jQuery renvoit toujours un objet jQuery, nous allons pouvoir pratiquer ce qu’on appelle le « chaînage » de méthodes.

Chaîner des méthodes, c’est tout simplement juxtaposer plusieurs méthodes afin de les appliquer à la suite à notre objet.

Pour chaîner des méthodes, nous allons utiliser la syntaxe suivante : $(selecteur).methode1().methode2().methode3().

Dans ce cas là, la méthode « methode1 » va s’exécuter d’abord, puis la méthode « methode2 » sa s’exécuter immédiatement après, et enfin la méthode « methode3 ».

Où écrire le jQuery ?

Pour des raisons d’optimisation du code, et pour permettre une maintenance plus simple dans le temps, nous écrirons généralement notre code jQuery dans un fichier séparé (fichier externe) portant l’extension « .js ».

Nous ferons ensuite un lien dans notre page HTML pour inclure notre fichier jQuery.

Cependant, dans ce cours, pour des raisons pratiques et pour une plus grande simplicité de démonstration, les scripts seront écrits à l’intérieur d’un même fichier HTML.

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

Généralement, lorsque l’on code en JavaScript, on attend la fin du chargement de la page pour exécuter nos scripts.

En effet, certains codes JavaScript peuvent mal s’exécuter ou même ne pas s’exécuter du tout si la page n’a pas été totalement chargée avant.

A titre d’exemple, on peut imaginer un script qui tente de modifier le code HTML via le DOM. Si l’arbre DOM n’a pas été totalement chargé auparavant, ce script va mal fonctionner.

Pour faire cela, on utilise généralement un gestionnaire d’évènement load que l’on applique à notre objet Window en JavaScript.

l’évènement load JavaScript

En jQuery, nous allons avoir affaire à la même problématique puisque, rappelons le, le jQuery est une librairie JavaScript (et donc on travaille avec le langage JavaScript).

Le jQuery dispose de sa propre solution et met à notre disposition un évènement appelé ready que nous allons utiliser avec l’objet Document.

Cette solution est plus optimisée que le recours à load en JavaScript puisqu’elle va nous permettre d’exécuter le code JavaScript dès que possible et non pas forcément après le chargement complet de la page HTML.

Voici l'écriture complète en jQuery utilisant l'évènement ready :

Utilisation de l’évènement ready en jQuery

Exécution d'un code jQuery utilisant ready

Essayer ce code !

A partir de maintenant, nous enfermerons à chaque fois l’intégralité de notre code jQuery à l’intérieur du gestionnaire d’évènement ready pour éviter tout problème d’exécution du code.

Remarquez déjà qu'en jQuery, à la différence du JavaScript, nous allons pouvoir gérer les évènements à l'aide de méthodes aux noms analogues. Nous reparlerons bien évidemment plus en détail de la gestion d'évènements en jQuery plus tard dans ce cours.

Comme vous pouvez le voir dans l’exemple ci-dessus, nous utilisons ici une fonction anonyme pour gérer l’évènement, comme nous l’avons souvent fait en JavaScript. Notez que nous allons faire un usage extensif des fonctions anonymes en jQuery.

Notez par ailleurs que la mention de ready est facultative en jQuery. En effet, on peut écrire une version raccourcie du code ci-dessus en laissant implicite la mention de l'évènement ready.

Ainsi, le code ci-dessous est strictement équivalent au code précédent :

Utilisation de l’évènement ready en jQuery sans mention de ready

Essayer ce code !

Pour des raisons de lisibilité et de clarté, je vous conseille de bien mentionner ready tant que vous n'êtes pas totalement familiers avec le jQuery.

Chapitre précédent

Chapitre suivant