jQuery est une bi­blio­thèque Ja­vaS­cript conçue par le dé­ve­lop­peur de logiciels américain John Resig qui a été publiée en 2006 avec le licence libre du MIT. Cette bi­blio­thèque fournit un nombre con­si­dé­rable de pos­si­bi­li­tés per­met­tant de manipuler HTML et CSS, de commander des évé­ne­ments mais également d’accélérer les fonc­tion­na­li­tés d’Ajax. L’in­té­gra­tion de jQuery aux textes sources HTML est re­la­ti­ve­ment simple. La bi­blio­thèque est déjà intégré dans un bon nombre de systèmes de gestion de contenu et de Fra­me­works tels que Joomla!, WordPress voire MediaWiki. Il se distingue non seulement par sa large palette de fonc­tion­na­li­tés mais aussi par sa grande com­mu­nauté et son dé­ve­lop­pe­ment continu que gère entre temps l’équipe jQuery.

Ce que dévoile jQuery

jQuery facilite le pro­gram­ma­tion grâce à son langage de script. Cette bi­blio­thèque est cons­ti­tuée d’ seul fichier Ja­vaS­cript qui contient les fonctions de bases de DOM, d’Ajax, d’évé­ne­ments et d’effets. Elle présente une col­lec­tion im­pres­sion­nante de pro­grammes qui per­met­tent de traiter des éléments à l’intérieur d’un projet Web. C’est ainsi que vous pouvez choisir des objets et modifier leurs ap­pa­rences (couleurs, position, taille…), ce processus également possible avec Ja­vaS­cript mais qui demande bien plus de temps.

Par ailleurs, jQuery vous permet de répondre aux actions de vos uti­li­sa­teurs de manière plus ciblée et ce en pro­gram­mant les éléments de la page destinée aux évé­ne­ments. Les uti­li­sa­teurs dé­clenchent au préalable des évé­ne­ments définis avec leurs souris ou en entrant un texte, puis reçoivent les contenus ou les ani­ma­tions qui ont été ras­sem­blés. Les effets gra­phiques tels que les su­per­po­si­tions de texte peuvent ra­pi­de­ment être insérés et ce juste avec une ligne de code. Par ailleurs, jQuery facilite le travail avec Ajax. La bi­blio­thèque jQuery optimise la tech­no­lo­gie qui charge le contenu de la page actuelle en arrière-plan notamment en ce qui concerne les in­ter­faces inter na­vi­ga­teur. Il facilite l’uti­li­sa­tion et la con­fi­gu­ra­tion d’Ajax pour la plupart des na­vi­ga­teurs, que leurs versions soient récentes ou plus anciennes. En général, jQuery comble les lacunes exis­tantes entre les mises en place de Ja­vaS­cript de chaque na­vi­ga­teur.

Elargir les Fra­me­works grâce aux plugins

La per­ti­nence de jQuery pour les projets Web actuels repose avant tout sur la facilité qu’à la bi­blio­thèque Ja­vaS­cript à s’élargir. Des milliers de plugins per­met­tant de faciliter la pro­gram­ma­tion sont présents sur le site Internet officiel de jQuery et sont pour la plupart gratuits. C’est là que la large com­mu­nauté chargée du dé­ve­lop­pe­ment de la bi­blio­thèque pré­sen­tent des avantages. Si la fonction désirée n’est dis­po­nible ni dans le champ d’ap­pli­ca­tion standard, ni en tant que plugin, les dé­ve­lop­peurs ont alors également la pos­si­bi­lité de créer leur propres ex­ten­sions.

Voilà comment intégrer la bi­blio­thèque de Ja­vaS­cript

Afin d’utiliser jQuery pour votre projet, il vous faut tout d’abord intégrer la bi­blio­thèque. C’est la seule manière pour vous d’héberger des fichiers Ja­vaS­cript 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é­char­ge­ment du site officiel de jQuery. Vous avez le choix entre la version com­pres­sée (com­pres­sed, pro­duc­tion jQuery) et celle dé­com­pres­sée (un­com­pres­sed, de­ve­lop­ment jQuery). Pour en­re­gis­trer le fichier au niveau local, il vous suffit de cliquer avec la souris sur le lien en question, de sé­lec­tion­ner « en­re­gis­trer la cible sous… » et d’indiquer le ré­per­toire 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 con­sé­quence adapter la référence dans l’en-tête. Pour utiliser par exemple le ficher jQuery des bi­blio­thèques hébergées par Google, il vous suffit d’indiquer l’URL suivante en y incluant la version res­pec­tive (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 per­met­tent d‘accéder aux éléments HTML de votre projet Web. Vous pouvez sé­lec­tion­ner ces éléments via un sélecteur qui est basé de manière syn­taxique sur des sé­lec­teurs CSS. La suite logique est le dé­clen­che­ment d’une action qui décrit la manière dont l’élément sé­lec­tionné doit être modifié. Un signe de dollar ($) est placé devant à la fois le sélecteur et l’action dans le but de ca­rac­té­ri­ser le code en tant que fonction jQuery. Ce procédé sert à éviter toute confusion dans l’uti­li­sa­tion des dif­fé­rentes bi­blio­thèques. $() sert de raccourci pour la fonction jQuery().  Voici la syntaxe de base : 

$(Selektor).action()

La ligne de code in­dis­pen­sable 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 cons­truc­tion syn­taxique de la ligne de code cor­res­pon­dante cor­res­pond à la con­fi­gu­ra­tion suivante : 

<script type="text/javascript">
    $(document).ready(function(){
        //weiterer jQuery-Code
    });
</script>

Les sé­lec­teurs les plus im­por­tants

Les sé­lec­teurs jQuery sont les com­po­sants les plus im­por­tants de la bi­blio­thèque Ja­vaS­cript. Ils vous per­met­tent en effet d’adapter les divers éléments de votre site Internet. Il existe donc plusieurs genres de sé­lec­teurs dont le but est de trouver et de choisir les unités HTML en prenant compte dif­fé­rents critères tels que l’identité, la classe, le type, etc. Le sélecteur d’éléments le plus cou­ram­ment utilisé ordonne les actions cor­res­pon­dantes 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 in­ter­naute 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 ca­rac­té­ri­ser dans un document HTML un seul élément, qui par la suite peut être modifié par exemple avec Ja­vaS­cript mais c’est également le cas pour les ma­ni­pu­la­tions CSS. S’il vous ne voulez pas que la totalité des blocs de texte soient cachés à l’occasion d’un clic de l’uti­li­sa­teur, vous avez la pos­si­bi­lité 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 re­la­ti­ve­ment simple est le .class-Selektor dont le but est de sé­lec­tion­ner au préalable des classes définies. Voici les autres sé­lec­teurs qui peuvent vous être utiles :

Sé­lec­teurs Des­crip­tion
$("*") Sé­lec­tionne tous les éléments
$(this) Sé­lec­tionne l’élément actuel
$("p:first") Sé­lec­tionne le premier élément <p>
$("ul li:first-child") Sé­lec­tionne le premier élément <li> de la liste dans toutes les listes présentes <ul>
$("[href]") Sé­lec­tionne tous les éléments disposant d’un attribut href
$("tr:even") Sé­lec­tionne toutes les lignes paires du tableau
$("tr:odd") Sé­lec­tionne toutes les lignes impaires du tableau
$("p.intro") Sé­lec­tionne tous les éléments <p> avec la classe class="intro"

Réagir aux évé­ne­ments des in­ter­nautes avec jQuery

Les uti­li­sa­teurs de votre site in­te­ra­gis­sent de dif­fé­rentes manières. Ils peuvent cliquer avec leurs souris, effectuer des saisies de clavier, remplir des for­mu­laires ou agrandir des fenêtres. Ces évé­ne­ments sont également connus sous le nom d’évé­ne­ments DOM et peuvent être définis dans jQuery en tant que dé­clen­cheur d’actions.

A titre d’exemple, il est possible de déplacer le curseur de la souris pour dé­clen­cher une action. Ce procédé est réalisé avec les commandes mou­seen­ter() et plus par­ti­cu­liè­re­ment mou­se­leave(). La première fonction réagit lorsque l’in­ter­naute 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’in­ter­naute 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é­clen­cheurs :

Dé­clen­cheurs Des­crip­tion
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é­sac­tion­née
change() Est déclenché lorsqu’une saisie au clavier est confirmée ou lorsqu’une sélection est faite
scroll() Est dé­clen­chée lorsqu’une page est défilée
select() Est déclenché lorsqu’un texte est mis en valeur dans un for­mu­laire

La commande on() vous permet par ailleurs d’ajouter plusieurs autres dé­clen­cheurs à un élément sé­lec­tionné et de combiner sans heurt divers évé­ne­ments. 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é­lec­tion­nent (blue) mais aussi qu’ils le dé­sé­lec­tion­nent (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 bi­blio­thèque Ja­vaS­cript, nous vous con­seil­lons de jeter un coup d’œil au tutoriel jQuery d’Open­class­rooms. Un autre tutoriel existe en anglais et est plus détaillé : w3schools.com.

Aller au menu principal