Débuter avec jQuery
Avant de débuter avec jQuery, il faut installer le fichier jquery.js sur son ordinateur. Une fois l'installation terminée, nous pourrons commencer à découvrir petit à petit les formidables possibilités de ce framework JavaScript.
Ma première page HTML - jQuery
Pour bien commencer et suivre notre guide au fur et à mesure vous pouvez créer votre propre page de test comme suit :
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// notre code javascript sera ajouté ici
// Attention le code javascript doit toujours être ajouté entre des balises script
</script>
</head>
<body>
<!-- notre code HTML sera ajouté ici -->
</body>
</html>
La page HTML est-elle prête ?
Avant d'exécuter du JavaScript, il faut s'assurer que les éléments de la page ont terminé d'être chargés (on parle de Document Ready). En effet le JavaScript permet de manipuler les éléments HTML mais si vous essayez de manipuler un élément qui n'est pas encore chargé votre code risque de tomber en erreur en vous indiquant qu'il n'a pas trouvé l'élément. Heureusement jQuery vous fournit une fonction ready() qui permet de savoir le plus tôt possible quand la page est prête pour le JavaScript. Insérons le code correspondant dans la zone JavaScript de notre page HTML:
$(document).ready(function(){
// vous pouvez exécuter du code JavaScript ici car la page HTML est prête...
});
Pour l'instant notre page ne fait pas grand chose, nous allons donc ajouter un peu d'animation à tout ça. Pour cela nous utiliserons la fonction JavaScript alert() qui permet d'afficher un message à l'aide d'une popup. Remplaçons la ligne de commentaire précédente pour obtenir le code suivant :
$(document).ready(function(){
alert("Le JavaScript et jQuery c'est vraiment génial !! ");
});
Très bien, nous avons réussi à créer notre première fonctionnalité JavaScript. Essayons maintenant d'interagir avec l'utilisateur de la page HTML
Comment capter un évènement utilisateur en jQuery?
L'un des principaux intérêts du JavaScript c'est de pouvoir exécuter un traitement en réponse à un événement utilisateur comme un clic ou un survole de souris. Cela permet à votre page HTML de devenir plus interactive et plus ergonomique. Avec jQuery rien de plus simple, il suffit de remplacer le code JavaScript et le code HTML précédent par les exemples ci-dessous :
$(document).ready(function(){
$("#demo1 a").click(function(){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#demo1 a").click(function(){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
});
</script>
</head>
<body>
<div id="demo1">
<div id="div1">
<h1>Ma page HTML pour tester jQuery</h1>
<p>Entete de ma page avec un <a href="#">lien 1</a></p>
</div>
<div id="div2">
<p>Contenu de ma page avec un <a href="#">lien 2</a></p>
</div>
<div id="div3">
<p>Pied de page avec un <a href="#">lien 3</a></p>
</div>
</div>
</body>
</html>
Ma page HTML pour tester jQuery
Entete de ma page avec un lien 1
Contenu de ma page avec un lien 2
Voilà nous venons donc, très simplement et avec peu de code, d'associer un traitement lors du clic sur chacun des liens de notre page. Analysons ensemble ce code jQuery. Nous pouvons remarquer l'utilisation de 3 fonctions jQuery, les fonctions $(), click() et html().
La fonction $() (écriture simplifiée de la fonction jQuery()) représente la fonction principale du framework jQuery. Cette fonction vous permet notamment de récupérer un élément de votre page HTML en fonction de sélecteurs CSS (la même syntaxe que dans vos styles CSS). De plus la fonction $() ajoute de nouvelles propriétés à l'élément récupéré, on dit qu'elle étend les fonctionnalités de base de l'objet pour pouvoir le manipuler plus facilement. Dans notre exemple, nous avons :
$("#demo1 a")
La fonction $() va alors nous récupérer tous les éléments HTML de la page qui vérifient le sélecteur CSS à savoir toutes les balises de type a (lien) qui sont contenues dans l'élément dont l'attribut "id" est égal à "demo1". Dans notre exemple, la fonction nous ramène donc une liste de trois éléments HTML correspondant aux liens 1, 2 et 3. Ensuite, de manière transparente, jQuery applique la fonction click() à chaque élément récupéré. Nous utilisons le terme transparent car vous n'avez pas à vous soucier du fait que la fonction ramène un ou plusieurs éléments, jQuery s'occupe de ça pour vous. Vous pouvez par exemple changer le sélecteur pour récupérer uniquement le lien 2 dans le contenu de la page et tester que seul ce lien ouvre une popup alert :
$("#demo1 #div2 a")
Lorsque vous appliquez la fonction
click() à un élément jQuery (un élément récupéré avec la fonction
$()) vous lui ajouter ce qu'on appelle un programme d'écoute ou listener d'évènements. C'est à dire que vous allez être capable de détecter lorsque un utilisateur clique sur l'élément et donc d'ajouter un traitement spécifique en conséquence. Le traitement que vous voulez effectuer en réponse au clic devra être décrit dans une fonction qui sera passée en paramètre de la fonction
click(). Voici la fonction utilisée dans notre exemple :
$("#demo1 a").click(function(){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
Il est important de noter l'utilisation de l'objet this qui représente l'élément source de l'évènement. Dans notre cas this représente le lien <a> sur lequel l'utilisateur vient de cliquer. La fonction click() est en fait un cas particulier qui a été ajoutée pour simplifier toujours plus le code. En effet c'est la fonction générale jQuery bind() qui permet d'ajouter un listener d'évènements pour n'importe quel type d'évènement. Le type d'évènement est passé comme premier argument de la fonction. Voici un exemple de notre fonction click() codée en utilisant la fonction générale bind():
$("#demo1 a").bind("click",function (){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
Si nous avions voulu ajouter un évènement lors du survole de la souris, nous aurions écrit :
$("#demo1 a").bind("mouseover",function (){
alert("Vous venez de survoler le "+ $(this).html());
return false;
});
Ou la version plus simple
$("#demo1 a").mouseover(function (){
alert("Vous venez de survoler le "+ $(this).html());
return false;
});
La fonction
html() permet de récupérer le contenu html (innerHTML) de l'élément sur lequel elle est appliquée. Dans notre cas, nous affichons le contenu HTML de l'élémént
this, c'est à dire l'élément source de l'évènement. Cela nous a permis d'afficher dans la popup le nom du lien sur lequel nous avons cliqué (c'est à dire le contenu qui se situe entre la balise ouvrante <a> et la balise fermante </a>).
Nous pouvons également utiliser la fonction
html() pour modifier le contenu HTML d'un élément. Dans ce cas, il faut passer en paramètre le code HTML que l'on souhaite insérer à la place de l'ancien. Voici un exemple de code :
$("#demo1 a").click(function (){
//Lorsque nous allons cliquer sur le lien, celui-ci va changer d'apparence
//Modifions en conséquence le contenu du lien pour le mettre en évidence
$(this).html("<strong>lien cliqué</strong>");
return false;
});
Animations et effets en jQuery
jQuery vous fournit un ensemble de fonctions qui vont vous permettre d'appliquer des animations à vos éléments HTML.
Essayons par exemple de coder un lien qui permettra d'afficher ou de cacher une zone de texte.
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").show();
});
$("a.hide").click(function(){
$("#text-hidden").hide();
});
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").show();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").hide();
return false;
});
});
</script>
</head>
<body>
<a class="show" href="#">Afficher</a>
<div id="text-hidden" style="display:none">
<a class="hide" href="#">Fermer</a>
<p>Mon texte caché s'affiche ou disparait en fonction de mes clics</p>
<a class="hide" href="#">Fermer</a>
</div>
</body>
</html>
Dans cet exemple, nous utilisons deux nouvelles fonctions jQuery, la fonction show() et la fonction hide(). Lorsque nous cliquerons sur un lien avec la class "show" alors nous appliquerons la fonction show à l'élément identifié par l'id="text-hidden". Lorsque nous cliquerons sur les liens avec la class "hide" alors nous appliquerons la fonction hide à l'élément identifié par l'id="text-hidden".
La fonction show() permet d'afficher des éléments cachés. Dans notre exemple, on arrive à afficher l'élément "text-hidden" qui était initialement caché grâce au style="display:none". Au contraire, la fonction hide() permet de cacher des éléments visibles. Ces fonctionnalités sont pratiques mais l'effet produit n'est pas très impressionnant. Essayons de modifier notre exemple en utilisant les effets fade ou slide
Remplaçons notre code JavaScript pour le suivant :
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").fadeIn();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").fadeOut();
return false;
});
});
La fonction fadeIn() a le même but que la fonction show() c'est à dire afficher un élément caché. La différence c'est que la fonction fadeIn ajoute un effet de type fondu (l'opacité augmente de 0 à 1). Réciproquement, la fonction fadeOut permet de caché un élément mais moins brutalement que la fonction hide().
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").slideDown();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").slideUp();
return false;
});
});
La fonction slideDown() a le même but que la fonction show() c'est à dire afficher un élément caché. La différence c'est que la fonction slideDown ajoute un effet de type slide. Réciproquement, la fonction slideUp permet de caché un élément mais moins brutalement que la fonction hide().
Modifier l'apparence d'éléments HTML en jQuery
Une fonctionnalité importante de jQuery, c'est la possibilité de modifier à la volée l'apparence (c'est à dire les styles CSS) d'un élément HTML . Pour illustrer ce paragraphe, nous allons essayer de coder une zone de texte dont l'apparence change lorsqu'elle est survolée par la souris de l'utilisateur
$(document).ready(function(){
$("#zone-texte").hover(function(){
$(this).css({'background-color' : '#555', 'color' : '#FFF', 'border' : '1px solid #000'});
},function(){
$(this).css({'background-color' : '#FFF', 'color' : '#555', 'border' : '1px solid #555'});
});
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zone-texte").hover(function(){
$(this).css({'background-color' : '#555', 'color' : '#FFF', 'border' : '1px solid #000'});
},function(){
$(this).css({'background-color' : '#FFF', 'color' : '#555', 'border' : '1px solid #555'});
});
});
</script>
</head>
<body>
<div id="zone-texte">
Zone de texte qui change d'apparence lors d'un survol de souris !!!
</div>
</body>
</html>
Zone de texte qui change d'apparence lors d'un survol de souris !!!
Dans cet exemple, nous avons utilisé deux nouvelles fonctions jQuery, hover() et css(). Comme vous pouvez vous en douter , la fonction hover() va permettre de gérer l'évènement "survole de la souris" alors que la fonction css() permet de modifier les styles css et donc l'apparence de votre élément HTML.
La fonction hover va vous permettre de gérer l'entrée et la sortie de la souris sur l'élément auquel elle est appliquée. Vous pouvez remarquer que la fonction hover possède deux arguments (hover(function(){...}, function(){...}) , une première fonction qui contient le traitement exécuté lorsque la souris entre sur l'élément puis une seconde fonction qui contient le traitement exécuté lorsque la souris sort de l'élément
Utiliser la fonction hover est la manière simplifiée de coder l'exemple suivant :
$(document).ready(function(){
//Ajout d'un traitement lorsque la souris entre dans la zone de texte
$("#zone-texte").mouseover(function(){
$(this).css({'background-color' : '#555', 'color' : '#FFF', 'border' : '1px solid #000'});
});
//Ajout d'un traitement lorsque la souris sort de la zone de texte
$("#zone-texte").mouseout(function(){
$(this).css({'background-color' : '#FFF', 'color' : '#555', 'border' : '1px solid #555'});
});
});
Comme son nom l'indique, la fonction css vous permet de modifier dynamiquement les propriétés CSS de l'élément auquel elle est appliquée. La syntaxe à utiliser est quasiment la même que pour les styles CSS sauf qu'il ne faut pas oublier d'ajouter les caractères quote ' autour des propriétés.
Les fonctions jQuery sont "chaînables"
La plupart des fonctions jQuery retourne l'objet jQuery sur lequel elles sont appliquées. Concrètement cela signifie que vous pouvez enchainer les fonctions les unes après les autres. Pour illustrer nos propos, reprenons l'exemple où nous avions modifié le texte du lien sur lequel l'utilisateur clique
$("#demo1 a").click(function (){
$(this).html("<strong>lien cliqué</strong>");
return false;
});
Dans cet exemple, nous avions modifié le texte du lien pour indiquer qu'il avait été cliqué ("lien cliqué"). Imaginons maintenant que nous souhaitions mettre encore plus en évidence le lien cliqué en lui ajoutant un fond rouge. Dans ce cas nous pourrions modifier le code pour obtenir
$(this).html("<strong>lien cliqué</strong>");
$(this).css({'background':'red'});
Mais pour simplifier le code, jQuery nous permet d'enchainer les fonctions
$(this).html("<strong>lien cliqué</strong>").css({'background':'red'});
Récupérer un objet javascript standard à partir de l'objet jQuery
Dans le concept jQuery, tout est encapsulé dans le fameux objet jQuery que nous avons étudié précédemment. Cependant il arrivera parfois que vous souhaitiez utiliser les propriétés des objets javascript standards (éléments DOM). Pour cela jQuery vous fournit la fonction get qui vous permet de récupérer les objets javascript standards à partir de l'objet jQuery.
Ici nous ajoutons à tous les éléments (grâce au caractère spéciale *) contenu dans l'élément identifié par "demo-get" un traitement lors du clic utilisateur. Pour chaque élément, nous récupérons l'objet javascript standard correspondant pour pouvoir utiliser la propriété classique tagName.
$(function(){
$("#demo-get *").click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0); //équivalent à $(this)[0]
$("#demo-get span").html("Elément de type - " + domEl.tagName);
});
});
Vous avez peut être remarqué lors de la demo une imperfection au niveau du code. Cette imperfection a été ajoutée volontairement pour vous faire bien comprendre comment passer d'un objet javascript standard à un objet jQuery et vis versa. En effet, l'objet identifié par this représente un objet javascript standard, nous lui avons appliquer la méthode $() pour le transformer en objet jQuery et ainsi ajouter les propriétés et méthodes jQuery. Enfin nous avons utilisé la méthode jQuery get pour repasser d'un élément jQuery à un élément javascript standard.
$(this).get(0) équivaut à this
Ci-dessous le code simplifié :
$(function(){
$("#demo2-get *").click(function (e) {
e.stopPropagation();
$("#demo2-get span").html("Elément de type - " + this.tagName);
});
});
Aller plus loin avec jQuery
Voilà , ce petit quide démarrage jQuery est terminé en espérant que celui-ci vous ait donné envie d'approfondir votre apprentissage. Pour cela, nous travaillons sur d'autres rubriques à venir.
