Syntaxe de base

Introduction

Dans ce nouveau cours, nous allons apprendre la syntaxe de base de jQuery et écrire les premières instructions jQuery. Nous verrons également où écrire du code jQuery.

Où écrire le code jQuery

Lors du développement, il est généralement considéré comme une bonne pratique de séparer les différents modules du projet en les mettant dans des fichiers différents, d'autant plus que cela simplifie la maintenance du code et rend l'ensemble de celui-ci plus lisible pour les développeurs.

Notre code jQuery ne fait pas exception, nous écrivons donc ce code dans des fichiers séparés. Ensuite, nous utiliserons l'élément script et son attribut src pour inclure les fichiers requis dans le fichier HTML.

Pour la suite de ce cours, nous allons créer deux fichiers : un fichier appelé index.html et un fichier appelé script.js, où nous placerons le code jQuery.

La syntaxe du jQuery

JQuery a une syntaxe de base relativement simple, logique et intuitive, adaptée aux personnes qui ont des notions débutantes à intermédiaires en HTML, CSS et JavaScript.

Nous pourrons utiliser jQuery() ou $() pour accéder aux différents attributs et méthodes de la bibliothèque jQuery.

jQuery est le langage de "queries" JavaScript, c'est-à-dire le langage de requête JavaScript. Nous utiliserons jQuery pour effectuer des opérations sur des éléments HTML.

Par conséquent, pour sélectionner tous les paragraphes de la page, nous écrirons $("p"), et pour sélectionner uniquement l'élément avec l'attribut id = "p1", nous écrirons $("# p1").

Nous pourrons utiliser n'importe quel sélecteur CSS pour localiser des éléments HTML dans jQuery, y compris des sélecteurs CSS complexes ou composés. Cela nous permettra de localiser tout type de contenu HTML de manière très précise et simple.

Lors de l'utilisation de la syntaxe $(selecteur), jQuery renvoie en fait un objet jQuery. Ensuite, nous pourrons appliquer des méthodes ou des propriétés à l'objet retourné pour effectuer des opérations ou obtenir des informations à son sujet.

Plus précisément, notre code jQuery ressemblera à ceci : $(selecteur).action(). Ici, la partie $(selecteur) retourne un objet auquel nous appliquerons la méthode action().

$('#p1').hide();