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.

Cet article vous a-t-il été utile ?