Tutoriel de jQuery : les bases des sélecteurs et de la syntaxe
jQuery est une bibliothèque JavaScript conçue par le développeur de logiciels américain John Resig qui a été publiée en 2006 avec le licence libre du MIT. Cette bibliothèque fournit un nombre considérable de possibilités permettant de manipuler HTML et CSS, de commander des événements mais également d’accélérer les fonctionnalités d’Ajax. L’intégration de jQuery aux textes sources HTML est relativement simple. La bibliothèque est déjà intégré dans un bon nombre de systèmes de gestion de contenu et de Frameworks tels que Joomla!, WordPress voire MediaWiki. Il se distingue non seulement par sa large palette de fonctionnalités mais aussi par sa grande communauté et son développement continu que gère entre temps l’équipe jQuery.
Ce que dévoile jQuery
jQuery facilite le programmation grâce à son langage de script. Cette bibliothèque est constituée d’ seul fichier JavaScript qui contient les fonctions de bases de DOM, d’Ajax, d’événements et d’effets. Elle présente une collection impressionnante de programmes qui permettent de traiter des éléments à l’intérieur d’un projet Web. C’est ainsi que vous pouvez choisir des objets et modifier leurs apparences (couleurs, position, taille…), ce processus également possible avec JavaScript mais qui demande bien plus de temps.
Par ailleurs, jQuery vous permet de répondre aux actions de vos utilisateurs de manière plus ciblée et ce en programmant les éléments de la page destinée aux événements. Les utilisateurs déclenchent au préalable des événements définis avec leurs souris ou en entrant un texte, puis reçoivent les contenus ou les animations qui ont été rassemblés. Les effets graphiques tels que les superpositions de texte peuvent rapidement être insérés et ce juste avec une ligne de code. Par ailleurs, jQuery facilite le travail avec Ajax. La bibliothèque jQuery optimise la technologie qui charge le contenu de la page actuelle en arrière-plan notamment en ce qui concerne les interfaces inter navigateur. Il facilite l’utilisation et la configuration d’Ajax pour la plupart des navigateurs, que leurs versions soient récentes ou plus anciennes. En général, jQuery comble les lacunes existantes entre les mises en place de JavaScript de chaque navigateur.
Elargir les Frameworks grâce aux plugins
La pertinence de jQuery pour les projets Web actuels repose avant tout sur la facilité qu’à la bibliothèque JavaScript à s’élargir. Des milliers de plugins permettant de faciliter la programmation sont présents sur le site Internet officiel de jQuery et sont pour la plupart gratuits. C’est là que la large communauté chargée du développement de la bibliothèque présentent des avantages. Si la fonction désirée n’est disponible ni dans le champ d’application standard, ni en tant que plugin, les développeurs ont alors également la possibilité de créer leur propres extensions.
Voilà comment intégrer la bibliothèque de JavaScript
Afin d’utiliser jQuery pour votre projet, il vous faut tout d’abord intégrer la bibliothèque. C’est la seule manière pour vous d’héberger des fichiers JavaScript sur votre espace Web personnel ou de placer un lien vers un espace externe.
En ce qui concerne la première variante, vous pouvez trouver le ficher dans le centre de téléchargement du site officiel de jQuery. Vous avez le choix entre la version compressée (compressed, production jQuery) et celle décompressée (uncompressed, development jQuery). Pour enregistrer le fichier au niveau local, il vous suffit de cliquer avec la souris sur le lien en question, de sélectionner « enregistrer la cible sous… » et d’indiquer le répertoire cible que vous souhaitez. Par la suite, placez votre lien dans le champ <head> de votre site Internet :
<head>
<script type="text/javascript" src="chemin_vers_fichier_query /jquery.js"></script>
</head>
Si vous optez à l’inverse pour le ficher externe, il vous faut en conséquence adapter la référence dans l’en-tête. Pour utiliser par exemple le ficher jQuery des bibliothèques hébergées par Google, il vous suffit d’indiquer l’URL suivante en y incluant la version respective (le lien ci-dessous 3.0.0) comme un élément de source (src) :
http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js
La formation de la syntaxe jQuery
Les codes jQuery permettent d‘accéder aux éléments HTML de votre projet Web. Vous pouvez sélectionner ces éléments via un sélecteur qui est basé de manière syntaxique sur des sélecteurs CSS. La suite logique est le déclenchement d’une action qui décrit la manière dont l’élément sélectionné doit être modifié. Un signe de dollar ($) est placé devant à la fois le sélecteur et l’action dans le but de caractériser le code en tant que fonction jQuery. Ce procédé sert à éviter toute confusion dans l’utilisation des différentes bibliothèques. $() sert de raccourci pour la fonction jQuery(). Voici la syntaxe de base :
$(Selektor).action()
La ligne de code indispensable qui doit précéder les balises jQuery dans votre document HTML est l’événement document ready. Ce code assure que toutes les commandes contenues dans jQuery soient exécutées seulement après que tous les éléments HTML ont été chargés. D’un côté, le but est d’éviter des erreurs si par exemple un élément qui n’a pas encore été affiché doit être caché. D’un autre côté, l’événement document ready permet également d’ajouter le code dans le champ <head>. La construction syntaxique de la ligne de code correspondante correspond à la configuration suivante :
<script type="text/javascript">
$(document).ready(function(){
//weiterer jQuery-Code
});
</script>
Les sélecteurs les plus importants
Les sélecteurs jQuery sont les composants les plus importants de la bibliothèque JavaScript. Ils vous permettent en effet d’adapter les divers éléments de votre site Internet. Il existe donc plusieurs genres de sélecteurs dont le but est de trouver et de choisir les unités HTML en prenant compte différents critères tels que l’identité, la classe, le type, etc. Le sélecteur d’éléments le plus couramment utilisé ordonne les actions correspondantes en fonction de leurs noms. Vous pouvez ainsi définir avec le code jQuery suivant que tous les éléments <p>, soit tous les blocs de texte, soient masqués lorsqu’un internaute clique sur un bouton :
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
Un autre sélecteur important est le #id-Selektor. Ce dernier vous permet de caractériser dans un document HTML un seul élément, qui par la suite peut être modifié par exemple avec JavaScript mais c’est également le cas pour les manipulations CSS. S’il vous ne voulez pas que la totalité des blocs de texte soient cachés à l’occasion d’un clic de l’utilisateur, vous avez la possibilité d’ajouter à cet élément <p> la valeur id (<p id="testblock">) et de compléter l’élément sélecteur dans l’exemple de code ci-dessus via le sélecteur #id.
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#testblock").hide();
});
});
</script>
Un autre sélecteur relativement simple est le .class-Selektor dont le but est de sélectionner au préalable des classes définies. Voici les autres sélecteurs qui peuvent vous être utiles :
Sélecteurs | Description |
$("*") | Sélectionne tous les éléments |
$(this) | Sélectionne l’élément actuel |
$("p:first") | Sélectionne le premier élément <p> |
$("ul li:first-child") | Sélectionne le premier élément <li> de la liste dans toutes les listes présentes <ul> |
$("[href]") | Sélectionne tous les éléments disposant d’un attribut href |
$("tr:even") | Sélectionne toutes les lignes paires du tableau |
$("tr:odd") | Sélectionne toutes les lignes impaires du tableau |
$("p.intro") | Sélectionne tous les éléments <p> avec la classe class="intro" |
Réagir aux événements des internautes avec jQuery
Les utilisateurs de votre site interagissent de différentes manières. Ils peuvent cliquer avec leurs souris, effectuer des saisies de clavier, remplir des formulaires ou agrandir des fenêtres. Ces événements sont également connus sous le nom d’événements DOM et peuvent être définis dans jQuery en tant que déclencheur d’actions.
A titre d’exemple, il est possible de déplacer le curseur de la souris pour déclencher une action. Ce procédé est réalisé avec les commandes mouseenter() et plus particulièrement mouseleave(). La première fonction réagit lorsque l’internaute déplace la souris sur l’élément HTML choisi. La deuxième fonction réagit lorsque le curseur de la souris quitte l’élément. Le code jQuery suivant a pour effet de prévenir l’internaute via une fenêtre de dialogue lorsqu’il vise un bloc de texte avec sa souris :
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
alert("vous avez sélectionné un bloc de texte!");
});
});
</script>
Voici d’autres éléments déclencheurs :
Déclencheurs | Description |
focus() | Est déclenché lorsqu’un élément est ciblé par un clic de souris |
blur() | Est déclenché lorsqu’un élément n’est plus ciblé |
keydown() | Est déclenché lorsqu’une touche est actionnée et maintenue |
keyup() | Est déclenché si une touche est désactionnée |
change() | Est déclenché lorsqu’une saisie au clavier est confirmée ou lorsqu’une sélection est faite |
scroll() | Est déclenchée lorsqu’une page est défilée |
select() | Est déclenché lorsqu’un texte est mis en valeur dans un formulaire |
La commande on() vous permet par ailleurs d’ajouter plusieurs autres déclencheurs à un élément sélectionné et de combiner sans heurt divers événements. Avec le code jQuery suivant, il est possible par exemple de changer la couleur du fond d’écran de l’élément <p> change. Il est également possible que les visiteurs le sélectionnent (blue) mais aussi qu’ils le désélectionnent (red) ou qu’il clique dessus (yellow) :
<script type="text/javascript">
$("p").on({
mouseenter: function(){
$(this).css("background-color", "blue");
},
mouseleave: function(){
$(this).css("background-color", "red");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
</script>
Pour avoir un aperçu détaillé de la gamme complète des capacités de la bibliothèque JavaScript, nous vous conseillons de jeter un coup d’œil au tutoriel jQuery d’Openclassrooms. Un autre tutoriel existe en anglais et est plus détaillé : w3schools.com.
Articles similaires
Les bibliothèques et frameworks JavaScript les plus populaires
Tout internaute ayant déjà travaillé avec JavaScript pour un projet de site Web connaît la complexité du Document Object Model (DOM). Les frameworks et les bibliothèques JavaScript permettent une prise en main facilitée et un large spectre de fonctionnalités pratiques et visant à faciliter le travail des développeurs et les soutenir dans leurs efforts. Mais quels sont les meilleurs frameworks et…
REDPIXEL.PLShutterstock Le développement Web moderne : les bases et les outils
La tendance en développement Web est passée ces dernières années des sites statiques aux sites riches en contenus interactifs. Bien que les langages HTML et CSS constituent toujours la base de tout site Web, les développeurs ont de plus en plus souvent recours à des langages de script du côté du serveur comme PHP pour produire des pages Web dynamiques. Les langages de script côté client (exécutés…
MooTools : Le framework JavaScript compact
Développé en 1995 pour le navigateur Netscape comme une alternative à l’applet Java, JavaScript est le langage de programmation qui a connu un fort engouement et le plus grand succès. Il est aujourd’hui très difficile de s’en passer. Les critiques dénoncent et à juste titre qu’il manque cependant à JavaScript un système de classes et que le langage est globalement pas assez structuré. Le framework…
Svelte : le framework léger pour des applications mobiles rapides sur le Web
Les frameworks traditionnels pour la programmation d’applications Web telles que React et Vue délocalisent la majeure partie du travail d’une application Web dans le navigateur. Les applications s’en trouvent ralenties et consomment un important volume de données. En arrière-plan, Svelte compile les applications en un JavaScript léger et optimisé, apportant une nette amélioration de la performance…
ESB ProfessionalShutterstock Tutoriel jQuery.each : comment utiliser l’itération de code
La fonction jQuery.each est très utilisée dans le développement logiciel. Elle permet d’effectuer des itérations rapides à travers un groupe d’éléments pour effectuer des actions. Ce tutoriel vous explique la syntaxe de base pour jQuery.each() avec des exemples pratiques à l’appui pour illustrer comment utiliser cette fonction dans vos propres projets.
