Apprendre à utiliser jQuery
Auteur: Winkin Adrien
Publié le 20-08-2023 | Catégorie: Développement front-end
Dans cet article, le but est de vous apprendre à créer des designs dynamiques et complexes tels que des animations. Pour ce faire, nous allons apprendre à utiliser jQuery. C'est une librairie JavaScript qui permet de réaliser des styles dynamiques en peu de lignes de code. D'ailleurs, le slogan de ce framework est "écrivez moins, faites plus". Ce framework est assez connu et est d'ailleurs utiliser pour des sites tels que FaceBook ou Netflix. Après avoir lu cet article, vous serez capables de développer des pages web attractives et dynamiques.
Comment utiliser jQuery?
Pour utiliser ce framework, il faut installer les fichiers jQuery et les intégrer à vos pages web ou utiliser le CDN de la même façon. Étant donné que ce framework subit des mises à jour régulières, je vous donne ici le lien vers les ressources à télécharger. Nous allons maintenant voir comment mettre en place ces 2 manières d'utiliser jQuery.
Méthode 1 : les fichiers
D'abord, vous cliquez sur le lien (voir paragraphe précédent), et vous téléchargez la version compressée du fichier jQuery. Ensuite pour l'intégrer, vous utiliserez une balise <script> à l'intérieur de la balise <head> de votre page HTML. Dans cette balise <script>, vous intégrerez le fichier compressé que vous avez téléchargé plus tôt de cette façon : <script src="lien/vers/votre/fichier"></script>
.Méthode 2 : le CDN
De la même manière, on peut utiliser un CDN qui permet d'inclure ce même fichier jQuery depuis un serveur distant. On peut inclure ce fichier de la même façon avec : <script src="lien/vers/le/CDN"></script>. Si vous utilisez cette méthode, vous n'aurez donc pas besoin de télécharger de fichier. Il vous faudra juste une connexion Internet.
Les sélecteurs
Pour commencer à utiliser jQuery, il faut d'abord créer un fichier JavaScript (car jQuery est une librairie JS). Pour initialiser du code jQuery, il y a une ligne de code à connaître et qu'il n'est pas vraiment nécessaire de comprendre. Tout document jQuery commence comme ceci :
$(document).ready(function(){
... ...
});
Le "$(document)" désigne le(s) document(s) HTML au(x)quel(s) vous allez relier votre code. Le ".ready" est un évènement jQuery et le terme "function()" veut dire "fonction anonyme". Le tout signifie : "lorsque le document est prêt, il faut exécuter la fonction suivante". Je précise que les points de suspension à l'intérieur de la fonction d'initialisation représentent tous les évènements animations et autres designs jQuery que nous ajouterons à nos pages web.
Nous allons également voir dans les paragraphes suivants que pour sélectionner les éléments de nos pages HTML auxquels nous allons appliquer des styles, nous utiliserons les mêmes sélecteur que nous avons vu dans l'article sur le CSS (nous verrons plusieurs exemples). Généralement, comme nous allons le voir dans les exemples de l'article, les sélecteurs se notent souvent avec des guillemets. Par exemple, pour sélectionner un id, on notera $('#mon_id') mais il existe des sélecteurs qui ne prennent pas de guillemet. J'aimerais que vous en reteniez 2 qui sont très importants : $(document) et $(window).
Comment améliorer vos pages?
Dans cette section, nous allons voir ce qu'il est possible de faire avec du code jQuery. Nous ne verrons pas tout dans le détail. Le but ici est que vous puissiez créer vos designs dynamiques mais rien ne vous empêche, si vous voulez utiliser des fonctions plus complexes, d'aller voir la documentation de jQuery (un lien se trouve à la fin de l'article).Les évènements
Les évènements permettent de réaliser des actions avec du code jQuery à un moment précis. Ils ne permettent pas de créer des styles à proprement parlé mais sont indispensables à leur réalisation. Nous allons commencer par voir une liste non exhaustive des sélecteurs jQuery.
- click : cet évènement se déclenche lorsqu'un utilisateur clique sur un élément.
- change : cet événement se produit lorsque la valeur d'un élément de formulaire tels que input, select, textarea,...(voir notre article sur le langage HTML) change.
- keyup ou keydown : ces événements se produisent respectivement lorsque l'utilisateur relâche ou pressionne une touche du clavier.
- mouseenter ou mouseleave : ces événements se produisent respectivement lorsque la souris entre ou sort d'un élément.
- resize : cet événement se produit lorsque la fenêtre du navigateur est redimensionnée.
- scroll : cet événement se produit lorsque l'utilisateur fait défiler la page.
Je vais quand même vous donner un exemple de style pour illustrer l'utilisation des évènements :
<script>
$(function(){
$(.ma_div).click(function(){
$(#p1).hide();
});
});
</script>
Ce code indique que, lorsque l'on clique sur l'élément défini par la classe "ma_div", l'élément défini par l'id "p1" disparait. De plus, il faut remarquer que la fonction d'initialisation présentée plus haut a été remplacée par son abréviation : $(function). Voici le résultat du code :
Cliquez ici pour voir
Ceci est mon paragraphe 1
Les effets
Nous allons enfin voir concrètement comment utiliser jQuery pour réaliser des styles grâce aux effets. Comme pour le chapitre précédent, nous allons commencer par une liste des principaux effets jQuery qu'il est primordial de connaître. Ensuite nous verrons les fonctions call-back et pour finir, des exemples de code tout au long de ce chapitre.
Liste des principaux effets
- fadeIn, fadeOut et fadeToggle : ces effets contrôlent la visibilité progressive (apparition et dispation) des éléments.
- show, hide et toggle : ces effets contrôlent la visibilité instantanée (affichage et masquage) des éléments.
- addClass, removeClass, toggleClass : ces méthodes ajoutent, suppriment ou basculent des classes CSS sur les éléments, ce qui peut être utilisé pour déclencher des changements de style.
- delay : cette méthode introduit un délai avant d'exécuter une action.
- stop : cette méthode interrompt les animations en cours sur un élément.
- slideDown, slideUp et slideToggle : ces effets contrôlent le mouvement vertical des éléments.
Tous ces effets peuvent prendre des attributs. Le premier attribut est la durée (exprimée en millisecondes). Pour les effets fadeIn, fadeOut et fadeToggle, il y a l'opacité à laquelle on veut arriver (une valeur comprise entre 0 et 1) qui vaut 0 ou 1 par défaut. Il y a également beaucoup d'autres possibilités. Nous verrons comment utiliser les attributs dans les exemples mais il est impossible de tous les citer ici. Encore une fois, si ce framework vous intéresse vraiment, rien ne vous empêche de lire la documentation pour compléter vos connaissances.
Les fonctions call-back
Il est également possible de réaliser des effets en cascade avec jQuery. Pour ce faire, on utilisera des fonctions anonymes qu'on placera en dernier argument d'un ou plusieurs effets (les fameuses fonctions call-back). Je conçois que cela puisse paraître un peu flou. C'est pourquoi je vous propose d'illustrer ce concept à l'aide d'un exemple :
<script>
$(function(){
$('.p1').click(function(){
$('.p2').hide(function(){
$('.p3').hide(function(){
$('.p4').hide();
});
});
});
});
</script>
<p class=p1>Cliquez ici pour voir</p>
<p class=p2>Ceci est mon paragraphe 2</p>
<p class=p3>Ceci est mon paragraphe 3</p>
<p class=p4>Ceci est mon paragraphe 4</p>
<p>Ceci est mon paragraphe 5</p>
Dans ce code, nous pouvons voir que la fonction hide() prend une fonction anonyme comme argument ce qui crée une réaction en chaîne (le masquage de l'élément avec la classe p1 entraine le masquage de l'élément avec la classe p2,...). Regardez le résultat de ce code :
Cliquez ici pour voir
Ceci est mon paragraphe 2
Ceci est mon paragraphe 3
Ceci est mon paragraphe 4
Ceci est mon paragraphe 5
Exemples de code
Dans cette section, nous allons voir deux exemples de code dans le but d'illustrer les différents points abordés dans ce chapitre sur les effets.
Voici le premier exemple
<script>
$(function(){
$('.p1').click(function(){
$('.p2').fadetoggle(3000,function(){
$('.p3').fadetoggle(3000,function(){
$('.p4').fadetoggle(3000);
});
});
});
});
</script>
<p class=p1>Cliquez ici pour voir</p>
<p class=p2>Ceci est mon paragraphe 6</p>
<p class=p3>Ceci est mon paragraphe 7</p>
<p class=p4>Ceci est mon paragraphe 8</p>
<p>Ceci est mon paragraphe 9</p>
Voici le résultat de ce premier exemple :
Cliquez ici pour voir
Ceci est mon paragraphe 6
Ceci est mon paragraphe 7
Ceci est mon paragraphe 8
Ceci est mon paragraphe 9
Voici le deuxième exemple
<head>
<style>
.ma_nouvelle_class{
background-color: #0000FF;
}
</style>
</head>
<script>
$(function(){
$("#mon_lien").mouseenter(function(){
$("#mon_lien").addClass("ma_nouvelle_class"); // Utilisation de $(this) pour sélectionner l'élément actuel
}).mouseleave(function(){
$("#mon_lien").removeClass("ma_nouvelle_class");
});
});
</script>
<a id=mon_lien href="index.php">Ceci est un lien</a>
Voici le résultat du deuxième exemple :
Ceci est un lien
Dans ce code, lorsque la souris entre sur le lien, la classe "ma_nouvelle_class" lui est appliqué et lorsque la souris quitte le lien, cette même class est désappliquée au lien.
Les animations
Nous arrivons aux animations qui sont généralement les styles préférés des développeurs front-end. C'est sûrement le point le plus important car le fait d'utiliser jQuery rime souvent avec la création d'animation. Avec celles-ci, il y a des règles plus précises qu'avec les simples effets. Dans ce chapitre, nous allons voir ces règles puis nous passerons directement aux exemples.
Comment créer des animations
Pour créer une animation, il faut utiliser la fonction "animate()" qui prendra 3 arguments. Le premier argument sera un objet (nous verrons la syntaxe dans les exemples), le deuxième sera le temps d'exécution de l'animation et le dernier sera une fonction call-back. Les deux derniers arguments sont donc facultatifs et le premier comprendra toutes les propriétés de notre élément HTML que nous voulons changer (souvent des propriétés CSS). Le squelette de nos animations se présentera comme ceci :
<script>
$(*selecteur).animate(arg1, arg2, function(){});
</script>
Exemple
Nous verrons ici un exemple complet et expliqué pour nous assurer que vous êtes aptes à utiliser jQuery pour créer des animations.
<script>
$(function(){
$("#mon_bouton").click(function(){
$("#ma_div3").animate({width:'250px',height:'250px',opacity:0.3,marginLeft:'350px'}, 5000, function(){
$("#ma_div3").hide();
});
});
});
</script>
<button id=mon_bouton>Lancer l'animation</button>
<div id=ma_div3 style=width:100px;height:100px;margin-top:24px;margin-left:24px;background-color:green;></div>
Dans cette animation, nous pouvons d'abord voir que nous associons l'évènement "click" à un bouton qui nous permet de lancer l'animation. Ensuite, nous voyons aussi la syntaxe du premier argument de la fonction "animate()". En effet, cet argument est entouré de {} qui renferment toutes les propriétés que nous voulons changer au cours de l'animation. Dernière remarque, nous pouvons voir que la propriété "margin-left" de CSS s'écrit "marginLeft" dans le code jQuery. C'est dû au fait que jQuery n'interprète pas bien les "-" et par conséquent, ce caractère sera remplacé par une lettre majuscule comme dans l'exemple.
Conclusion
Pour conclure cet article, vous êtes maintenant capables de réaliser vos propres styles dynamiques à l'aide de jQuery. Je vous rappelle également que la seule manière de maîtriser un framework est de pratiquer le plus possible donc je vous encourage à faire preuve de curiosité et à développer un maximum de styles avec jQuery. Je vous mets également un lien ici vers la documentation de jQuery (oui, elle est en anglais).