• Medium

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

Got it!

Last updated on 5/18/20

Modifier le contenu d'un élément

Log in or subscribe for free to enjoy all this course has to offer!

Arrivés à ce point dans la lecture du cours, vous savez sélectionner à peu près tout ce qui peut se trouver dans un document HTML. Vous vous sentez peut-être un peu frustrés : à quoi bon effectuer des sélections si vous n'en faites rien ! Vous avez tout à fait raison.

Ce chapitre va (enfin !) vous montrer comment agir sur les éléments sélectionnés pour les transformer. Vous pourrez ainsi modifier les attributs et les propriétés CSS des éléments sélectionnés, mais aussi ajouter, réorganiser et supprimer des éléments du DOM pour modifier l'agencement de la page sur laquelle vous travaillez.

Poursuivez vite la lecture et surtout… amusez-vous bien !

Getters et setters

Plutôt que de différencier les méthodes chargées de lire (ces méthodes sont dites getters, de l'anglais to get qui signifie « obtenir ») et de modifier (ces méthodes sont dites setters, de l'anglais to set qui signifie « définir ») les valeurs HTML ou CSS, les concepteurs de jQuery ont choisi de leur donner le même nom. Mais alors, comment les différencier, me direz-vous ? C'est très simple, puisqu'il suffit d'observer les paramètres de la fonction. Raisonnons sur un exemple pour mieux comprendre de quoi il retourne. Observez les deux instructions suivantes :

$('h2').css('font-size');
$('h2').css('font-size','2em');

Dans la première instruction, aucune valeur n'est précisée. Il est impossible de modifier la valeur de la propriété CSSfont-size. La première méthode est donc un getter ; elle retourne la valeur de la propriétéfont-size. Pour faciliter sa manipulation, vous pouvez la mémoriser dans une variable :

var taille = $('h2').css('font-size');

Dans la deuxième instruction, la valeur « 2em » est précisée dans les paramètres de la méthodecss(). Cette valeur sera utilisée pour mettre à jour la propriété CSSfont-size(ou la créer si elle n'existe pas) de tous les éléments retournés par le sélecteur. La deuxième méthode est donc un setter.

Ce qui vient d'être dit peut se généraliser à toutes les méthodes jQuery :

  • Si aucune valeur n'est précisée dans les arguments de la méthode, il s'agit d'un getter. La méthode retourne la valeur qui correspond au premier argument.

  • Si une valeur est précisée dans les arguments de la méthode, il s'agit d'un setter. Le premier argument de la méthode est initialisé avec cette valeur. S'il n'existe pas, il est créé. S'il existe, il est modifié en conséquence.

Ce que renvoie un getter

Un sélecteur jQuery peut retourner zéro, un ou plusieurs éléments. Lorsqu'aucun élément n'est retourné, le getter renvoie la valeurundefined(c'est-à-dire « non défini »). Lorsqu'un seul élément est retourné, le getter renvoie la valeur de cet élément. Enfin, lorsque plusieurs éléments sont retournés, le getter renvoie la valeur du premier élément.

Examinez le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sélecteurs CSS</title>
</head>
<body>
<div id="listes">
<a href="http://api.jquery.com">API jQuery</a><br>
<a href="http://docs.jquery.com">Documentation jQuery</a><br>
</div>
<script src="jquery.js"></script>
<script>
$(function() {
var test = $('a').attr('href');
document.write(test);
});
</script>
</body>
</html>

Deux liens hypertextes sont définis lignes 9 et 10. Le premier pointe sur la pagehttp://api.jquery.comet le second sur la pagehttp://docs.jquery.com. À la ligne 16, on utilise l'instruction jQuery$('a').attr('href')pour lire le contenu de l'attributhrefdes balises<a>contenues dans le document. L'objet retourné est stocké dans la variabletest. La ligne 17 affiche cette variable. D'après vous, quelle valeur va s'afficher dans le navigateur ?

Comme il a été dit précédemment, dans le cas d'une réponse multiple, seule la première valeur est retournée par le getter. Ici, c'est donc l'adressehttp://api.jquery.comqui s'affichera dans le navigateur.

Comme vous pouvez le voir, les deux balises<a>de ce document ne contiennent qu'un seul attribut :href. Si on utilisait l'instructionvar test = $('a').attr('class');, la valeur retournée seraitundefined.

Ce qui peut être passé à un setter

Les méthodes setters peuvent se présenter sous trois formes différentes :

$('#logo').attr('src','logo.gif');
$('#logo').attr({src: 'logo.gif', alt: 'Logo de la société', width: '200px'});
$("a").attr({target:function(){}});

La première ligne se contente d'affecter la valeur « logo.gif » à l'attributsrcde l'élément d'identifiantlogo.
La deuxième ligne crée (s'ils n'existent pas) ou modifie (s'ils existent) plusieurs attributs dans l'élément d'identifiantlogo. Ici, l'attributsrcest initialisé avec la valeur « logo.gif », l'attributaltavec la valeur « Logo de la société » et l'attributwidthavec la valeur « 200px ».
Enfin, la troisième ligne utilise une fonction JavaScript pour créer ou modifier l'attributtargetdes balises<a>du document. Voici par exemple à quoi pourrait ressembler la fonction passée en deuxième argument de la méthodeattr():

$('a').attr('target', function() {
if(this.host == location.host) return '_self'
else return '_blank'
});

Si vous avez quelques rudiments de JavaScript, le code utilisé dans cette fonction ne devrait pas vous poser de problème. Dans le cas contraire, je vais décrire en détail les actions accomplies.

Si le lien (this.host) se trouve sur le même site que la page en cours (== location.host), l'attributtargetest initialisé avec la valeur « _self » (return '_self'). Dans le cas contraire, l'attributtargetest initialisé avec la valeur « _blank » (else return '_blank'). Une fois ces deux lignes exécutées, les liens hypertextes seront ouverts :

  • dans l'onglet courant du navigateur s'ils renvoient vers une page située dans le même nom de domaine que la page actuelle ;

  • dans une autre fenêtre (ou un nouvel onglet) du navigateur s'ils se trouvent sur un autre nom de domaine.

Accéder aux attributs HTML et aux propriétés CSS

Accéder aux attributs des balises HTML

Vous utiliserez la méthodeattr()pour lire, créer et modifier les attributs des balises HTML. Voici quelques exemples :

  • $('#plus').attr('src');retourne l'attributsrcde l'élément d'identifiantplus.

  • $('div').attr('class');retourne l'attributclassdu premier<div>.

  • $('div').attr('class', 'madiv');modifie ou crée l'attributclassdans les balises<div>du document et leur affecte la valeur « madiv ».

  • $('#illustration').attr('src','monimage.jpg');modifie ou crée l'attributsrcdans la balise d'identifiantillustrationet lui affecte la valeur « monimage.jpg ».

Vous savez maintenant comment lire et comment créer/modifier un attribut d'une balise ou d'un ensemble de balises HTML.

Voyons maintenant comment supprimer un attribut dans une balise ou un ensemble de balises. Pour cela, vous utiliserez la méthoderemoveAttr():

$(sel).removeAttr('attribut');

… oùselest un sélecteur jQuery etattributest l'attribut que vous voulez supprimer. Cette méthode agit sur tous les éléments sélectionnés par le sélecteur jQuery. Par exemple, pour supprimer l'attributhrefde toutes les balises<a>du document, vous utiliserez l'instruction suivante :

$('a').removeAttr('href');

Accéder aux propriétés CSS

Dans les chapitres précédents, nous avons utilisé à plusieurs reprises la méthode jQuerycss()pour créer ou modifier les propriétés CSS des balises HTML. Cette méthode peut également être utilisée comme un getter, pour connaitre la valeur d'une propriété CSS. Par exemple, l'instruction suivante récupère la valeur stockée dans l'attributfont-sizedu premier élément de classeparaet la stocke dans la variabletaille:

var taille = $('.para').css('font-size');

Cette deuxième instruction affecte la valeur « 40px » à l'attributfont-sizede tous les éléments de classepara:

$('.para').css('font-size', '40px');

Travailler avec l'attribut class

Comme tout programmeur (ou apprenti programmeur) Web, vous utilisez certainement l'attributclasspour donner la même apparence à plusieurs balises HTML. Pour accéder aux balises dont l'attributclassa une certaine valeur, il suffit de préciser cette valeur dans le sélecteur en la faisant précéder d'un point. Par exemple, pour sélectionner tous les éléments de classevert, vous utiliserez le sélecteur jQuery$('.vert').

Ajouter et supprimer des classes

Trois méthodes consacrées aux classes vont vous permettre d'aller plus loin :

  • addClass()ajoute une classe dans les éléments sélectionnés ;

  • removeClass()supprime (si elle existe) une classe des éléments sélectionnés ;

  • toggleClass()accomplit deux actions : si la classe spécifiée n'existe pas dans les éléments sélectionnés, elle y est ajoutée. Si elle existe, elle est supprimée.

La théorie étant posée, nous allons l'expérimenter en utilisant le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Manipulation de l'attribut class</title>
<style type="text/css">
.rouge { color: red; }
.vert { color: green; }
.petit { font-size: 100%; }
.grand {font-size: 250%; }
</style>
</head>
<body>
<span id="jean" class="rouge grand">Jean</span>
<span id="pierre">Pierre</span>
<span id="paul" class="vert grand">Paul</span>
<span id="julia">Julia</span>
<span id="eric" class="vert">Eric</span>
<span id="kevin" >Kévin</span>
<script src="jquery.js"></script>
<script>
$(function() {
// Ajouter le code jQuery ici
});
</script>
</body>
</html>

Les lignes 6 à 11 définissent quatre styles :

  • rougeaffiche les caractères en rouge ;

  • vertaffiche les caractères en vert ;

  • petitaffiche les caractères avec la taille par défaut (100%) ;

  • grandaffiche les caractères avec une grande taille (250%).

Les lignes 14 à 19 affichent six prénoms par l'intermédiaire de balises<span>. Chaque balise a un identifiant unique, et certaines balises ont un attributclassinitialisé avec une ou deux classes.

Pour l'instant, aucun code jQuery n'a été inséré dans le document. L'image suivante montre à quoi il ressemble une fois affiché dans un navigateur.

Le code précédent exécuté dans Firefox
Le code précédent exécuté dans Firefox

Nous allons expérimenter les méthodesaddClass(),removeClass()ettoggleClass()en insérant du code jQuery ligne 30.

La balise<span>d'identifiantjuliane possède aucune classe. Le prénom Julia est donc affiché en caractères noirs de taille standard. Supposons que nous voulions les afficher en rouge ; le code à utiliser est le suivant :

$('#julia').addClass('rouge');

Supposons maintenant que le prénom Julia doive être affiché en grands caractères verts. Le code à utiliser est le suivant :

$('#julia').addClass('vert grand');

Nous allons maintenant travailler avec le prénom Eric. Ce prénom est affiché via une balise<span>de classevert. Supposons que vous vouliez afficher le prénom Eric en rouge. L'instruction suivante n'a aucun effet :

$('#eric').addClass('rouge');

Avez-vous une idée de la raison de cet échec ? Cela vient d'un conflit entre la classevert(existante) et la classerouge(que l'on veut ajouter). Pour parvenir au résultat souhaité, il faudrait supprimer la classe existante et la remplacer par la classerouge:

$('#eric').removeClass('vert').addClass('rouge');

La première méthode supprime la classevertet la deuxième ajoute la classerouge.

Supposons maintenant que vous vouliez afficher le prénom Paul en petits caractères de couleur rouge. La balise<span>correspondante utilise deux classes :vertetgrand. Pour que le texte s'affiche en caractères rouges de taille standard, vous devez :

  • supprimer la classevert;

  • ajouter la classerouge;

  • supprimer la classegrand;

  • ajouter la classepetit.

Voici l'instruction à utiliser :

$('#paul').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit');

En utilisant un autre identifiant dans le sélecteur, ce chaînage de quatre méthodes peut également s'appliquer à une quelconque balise<span>du document. Ainsi par exemple, cette instruction affiche le prénom Pierre en caractères rouges de taille standard :

$('#pierre').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit');

Les méthodesremoveClass()etaddClass()peuvent également être remplacées par la méthodetoggleClass(). Ainsi, cette instruction affiche le prénom Paul en caractères rouges de petite taille :

$('#paul').toggleClass('vert').toggleClass('rouge').toggleClass('grand').toggleClass('petit');

Par contre, si vous l'appliquez au<span>d'identifianteric, le prénom Eric est affiché en caractères rouges de grande taille :

  • Le<span>étant de classevert, cette classe est supprimée :toggleClass('vert');

  • La classerougelui est ajoutée puisqu'elle n'existe pas :toggleClass('rouge');

  • Le<span>étant de classepetit, cette classe est supprimée :toggleClass('petit');

  • Enfin, la classegrandlui est ajoutée puisqu'elle n'existe pas :toggleClass('grand').

Pour simplifier l'écriture, il est possible d'indiquer plusieurs classes séparées par des espaces dans les méthodesaddclass(),removeclass()ettoggleclass(). Ainsi par exemple, cette instruction :

$('#pierre').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit');

Peut être simplifiée comme suit :

$('#pierre').removeClass('vert grand').addClass('rouge petit');

Tester l'existence de classes

La méthodehasClass()permet de tester si la sélection est d'une certaine classe. Supposons par exemple que la balise<span>suivante soit définie :

<span id="jean" class="rouge grand">Jean</span><br />

L'instruction$('#jean').hasClass('rouge');renverra la valeurtrue, car le<span>est de classerouge. L'instruction$('#jean').hasClass('petit');renverra la valeurfalse, car le<span>n'est pas de classepetit.

Ainsi, on pourra effectuer une action ou une autre en fonction de l'existence d'une classe :

if ($('#jean').hasClass('rouge'))
alert('le span #jean est de classe rouge');
else
alert('le span #jean n\'est pas de classe rouge');

Si vous devez tester l'appartenance à plusieurs classes, vous utiliserez la méthodeis(). Raisonnons sur la balise<span>suivante :

<span id="jean" class="rouge grand">Jean</span><br />

L'instruction$('#jean').is('.grand.rouge');renverra la valeurtrue, car le<span>est de classegrandetrouge. Par contre, l'instruction$('#jean').is('.petit.rouge');renverra la valeurfalse, car le<span>n'est pas de classepetit. En enveloppant l'instruction jQuery par unif, vous pourrez effectuer une action ou une autre en fonction de l'existence de deux ou plusieurs classes :

if ($('#jean').is('.grand.rouge'))
alert('le span #jean est de classe grand et rouge');
else
alert('le span #jean n\'est pas de classe grand et/ou rouge');

Travailler avec les formulaires

Vous utiliserez la méthodeval()pour tester/modifier la valeur des zones de texte, boutons radio, cases à cocher, listes déroulantes et zones de liste contenues dans un document HTML. Pour vous montrer comment utiliser cette méthode, nous allons raisonner sur un exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sélecteurs CSS</title>
</head>
<body>
<form>
Nom d'utilisateur
<input type="text" id="nom"><br />
Mot de passe
<input type="password" id="pass"><br />
Sexe
H <input type="radio" id="H" name="sexe" value="H">
F <input type="radio" id="F" name="sexe" value="F"><br />
Fonction
<select id="fonction">
<option VALUE="etudiant">Etudiant</option>
<option VALUE="ingenieur">Ingénieur</option>
<option VALUE="enseignant">Enseignant</option>
<option VALUE="retraite">Retraité</option>
<option VALUE="autre">Autre</option>
</select><br /><br />
<input type="submit" id="envoyer" value="Envoyer">
<input type="reset" id="annuler" value="Annuler">
</form>
<script src="jquery.js"></script>
<script>
$(function() {
// Entrer les instructions jQuery ici
});
</script>
</body>
</html>

Ce code définit une zone de texte (nom), un mot de passe (pass), deux boutons radio (sexe), une liste déroulante (fonction), un bouton « Envoyer » (envoyer) et un bouton « Annuler » (annuler).

Le tableau suivant donne un aperçu des instructions que vous pouvez utiliser pour lire et modifier les données stockées dans le formulaire.

Instruction jQuery

Effet

$('#nom').val()

Lit le nom de l'utilisateur.

$('#pass').val()

Lit le mot de passe.

$(':radio#H:checked').val() 

Lit l'état du bouton radioH. Renvoietruesi le bouton est sélectionné, sinonfalse.

$('#fonction').val()

Lit l'élément sélectionné dans la liste déroulante.

$('#nom').val('Michel')

Écrit « Michel » dans la zone de texteNom d'utilisateur.

$('#pass').val('abcde')

Écrit « abcde » dans la zone de texteMot de passe.

$(':radio').val(['H']);

Sélectionne le bouton radioH.

$('#fonction').val('retraite')

SélectionneRetraitédans la liste déroulante.

La syntaxe des instructions n'est pas complexe, mais rien de tel qu'un peu de pratique pour qu'elle ne vous pose plus aucun problème. Je vous suggère donc de vous entraîner à utiliser ces instructions en les tapant une à une sur la ligne 36 du code précédent !

Travailler avec les valeurs stockées dans des éléments

Lorsque vous définissez un sélecteur jQuery, vous obtenez un objet jQuery qui fait référence à zéro, un ou plusieurs éléments. Si ces éléments contiennent des valeurs textuelles, vous pouvez les lire ou les modifier en utilisant deux méthodes jQuery :

  • text()retourne/modifie la valeur textuelle stockée dans l'élément ;

  • html()retourne/modifie le code HTML stocké dans l'élément.

Comme toujours, nous allons utiliser un exemple pour bien comprendre le fonctionnement de ces deux méthodes. Voici le code utilisé :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Valeurs stockées dans les éléments</title>
</head>
<body>
<h1>Documentation jQuery</h1>
<p><a href='http://docs.jquery.com'>Documentation officielle</a></p>
<p><a href='http://api.jquery.com'>API jQuery</a></p>
<script src="jquery.js"></script>
<script>
$(function() {
// Entrer les instructions jQuery ici
});
</script>
</body>
</html>

Le corps du document définit un titre de niveau 1 et deux paragraphes qui pointent vers la documentation officielle de jQuery et l'API jQuery. Pour récupérer le texte stocké dans les deux paragraphes, nous utiliserons l'instruction$('p').text();, et pour afficher ce texte sur l'écran nous utiliserons une boîte de dialogue :alert($('p').text());. Tapez cette instruction à la ligne 15 du code précédent, sauvegardez le document et affichez-le dans le navigateur de votre choix. L'image suivante vous montre le résultat sous Internet Explorer.

Une boîte de dialogue s'affiche
Une boîte de dialogue s'affiche

Comme vous pouvez le voir, l'instruction retourne les deux valeurs textuelles stockées dans les balises<p>. Ces deux valeurs sont placées l'une à la suite de l'autre. Pour accéder individuellement à la première et à la dernière valeur, le plus simple consiste à utiliser des pseudo-opérateurs :

var premier = $('p:first').text();
var dernier = $('p:last').text();

Si vous voulez accéder individuellement à chacune des valeurs, vous devez définir une fonction comme paramètre de la méthodetext(), comme ceci :function(index, actuel), oùindexreprésente le numéro de la valeur en cours de traitement (à partir de 0), etactuelreprésente la valeur en cours de traitement.

À titre d'exemple, pour afficher la valeur contenue dans chaque paragraphe du document, vous pourriez utiliser le code suivant :

$('p').text(function(index,actuel) {
alert('Paragraphe ' + (index+1) + ' : '+actuel);
});

Ce qui vous donnerait la figure suivante.

Affiche le code HTML du premier élément
Affiche le code HTML du premier élément

Vous savez maintenant récupérer sous forme de texte les valeurs stockées dans des éléments HTML. Pour en obtenir une forme HTML, remplacez la méthodetext()par la méthodehtml(). Voici quelques-unes des instructions que vous pourriez utiliser :

Instructions

Résultat

alert($('p').html());

Affiche le code HTML du premier élément (voir image suivante).

alert($('p:first').html());

Affiche le code HTML du premier élément.

alert($('p:last').html());

Affiche le code HTML du dernier élément.

$('p').html(function(index,actuel) { alert('Paragraphe ' + (index+1) + ' : '+actuel);});

Affiche individuellement le code HTML de chaque élément.

En observant les deux premiers exemples de code dans le tableau précédent, vous vous demandez certainement si une erreur ne s'est pas glissée dans la colonne « Résultat ». En effet, est-ce que les instructionsalert($('p').html());etalert($('p:first').html());seraient équivalentes et renverraient toutes deux le code HTML du premier élément ? Eh bien oui, ces deux instructions sont équivalentes car, contrairement à la méthodetext(),html()ne balaie pas tous les éléments, mais se contente du premier.

Les méthodestext()ethtml()peuvent bien évidemment être utilisées en tant que setters. Par exemple, pour que le premier paragraphe du listing précédent pointe vers le moteur de recherche Google et non vers la documentation officielle de jQuery, vous utiliserez l'instruction suivante :

$('p:first').html('<a href="http://www.google.com">Moteur de recherche Google</a>');

Position et taille des éléments

Je vais vous montrer comment connaître et modifier la position et les dimensions des éléments affichés dans une page Web.
Pour gérer la position des éléments dans une page HTML, vous utiliserez les méthodes suivantes :

  • offset(): position absolue d'un élément dans la page (getter et setter) ;

  • position(): position relative d'un élément dans son parent (getter seulement).

Les positions retournées par ces méthodes ont deux composantes : l'abscisseleftet l'ordonnéetop. Vous utiliserez donc :

  • offset().leftetoffset().toppour connaître la position absolue d'un élément.

  • position().leftetposition().toppour connaître la position d'un élément dans son parent.

Pour montrer comment utiliser ces deux méthodes, nous allons utiliser le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Valeurs stockées dans les éléments</title>
<style type="text/css">
#parent {
width: 300px;
height:300px;
position: absolute;
top: 100px;
left: 200px;
background-color: yellow;
}
#enfant {
width: 100px;
height:100px;
position: absolute;
top: 150px;
left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
Texte dans le parent
<div id="enfant">
Texte dans l'enfant
</div>
</div>
<span id="resultat"></span>
<script src="jquery.js"></script>
<script>
$(function() {
// Entrer les instructions jQuery ici
});
</script>
</body>
</html>

Le corps du document contient deux balises<div>imbriquées, d'identifiants respectifsparentetenfant:

<div id="parent">
Texte dans le parent
<div id="enfant">
Texte dans l'enfant
</div>
</div>

… ainsi qu'une balise<span>qui sera utilisée par la suite pour afficher les coordonnées des balises<div>:

<span id="resultat"></span>

Ces balises sont mises en forme par des règles CSS, entre les lignes 7 et 23. Les dimensions de la balise d'identifiantparentsont fixées à 300 pixels sur 300. Cette balise est positionnée de façon absolue à 100 pixels du bord supérieur et à 200 pixels du bord gauche de la page. Enfin, la couleur d'arrière-plan est jaune :

#parent {
width: 300px;
height:300px;
position: absolute;
top: 100px;
left: 200px;
background-color: yellow;
}

Les dimensions de la balise d'identifiantenfantsont fixées à 100 pixels sur 100. Cette balise est positionnée de façon absolue à 150 pixels du bord supérieur et à 100 pixels du bord gauche de son parent. Oui, vous avez bien lu, de son parent : la baliseenfantétant imbriquée dans la baliseparent, le termeabsolutea une valeur toute… relative (sans vouloir faire un jeu de mots). En effet, le positionnement est bien absolu, si on se réfère à la baliseparentet non au document dans son ensemble. Enfin, la couleur d'arrière-plan est rouge :

#enfant {
width: 100px;
height:100px;
position: absolute;
top: 150px;
left: 100px;
background-color: red;
}

Si vous affichez ce document dans votre navigateur, vous devriez obtenir l'image suivante.

Le code précédent exécuté dans Internet Explorer
Le code précédent exécuté dans Internet Explorer

Connaître la position des éléments sur la page

Nous allons ajouter quelques instructions jQuery à partir de la ligne 38 pour afficher les coordonnées absolues des deux balises<div>dans la balise<span>:

var posparent=$('#parent').offset();
var posenfant=$('#enfant').offset();
$('span').text('Parent : x=' + posparent.left + ', y=' + posparent.top + ' Enfant : x=' + posenfant.left + ', y=' + posenfant.top);

La ligne 1 utilise la méthodeoffset()pour connaître les coordonnées absolues de la balise<div>parent. Ces coordonnées sont mémorisées dans la variableposparent.
La ligne 2 est très proche de la ligne 1, à ceci près qu'elle mémorise les coordonnées absolues de la balise<div>enfantdans la variableposenfant.

La ligne 3 affiche les coordonnées absolues des balisesparentetenfantdans la balise<span>. La méthodetext()est utilisée pour insérer du texte dans la balise<span>. Les coordonnéesleftettopdes balisesparentetenfantsont extraites des variablesposparentetposenfant. Par exemple, pour l'abscisse de la baliseparent, on utiliseposparent.left.

Pourquoi avoir défini les variablesposparentetposenfant?

Deux objectifs ont motivé l'écriture de variables intermédiaires :

  1. L'instruction$('span').text()est ainsi allégée. En effet, il est plus court d'écrireposparent.leftque$('#parent').offset().left. Si vous n'utilisiez pas de variables intermédiaires, l'instruction deviendrait :

    $('span').text('Parent : x=' + $('#parent').offset().left + ', y=' + $('#parent').offset().top + ' Enfant : x=' + $('#enfant').offset().left + ', y=' + $('#enfant').offset().top);
  2. L'instructionposparent.lefts'exécute bien plus vite que l'instruction$('#parent').offset().left. Le code sera donc optimisé en utilisant des variables intermédiaires.

Une fois ces trois lignes de code insérées après la ligne 38, sauvegardez puis affichez le document dans un navigateur. L'image suivante représente ce que vous devriez obtenir.

Le code précédent a été modifié grâce à jQuery
Le code précédent a été modifié grâce à jQuery

Remplaçons les méthodesoffset()parposition(), sans toucher à l'affichage dans la balise<span>:

var posparent=$('#parent').position();
var posenfant=$('#enfant').position();
$('span').text('Parent : x=' + posparent.left + ', y=' + posparent.top + ' Enfant : x=' + posenfant.left + ', y=' + posenfant.top);

Les coordonnées renvoyées sont relatives au parent de chaque balise. Le parent de la balise#parentest le document. Elles ne devraient donc pas changer. Quant au parent de la balise#enfant, il s'agit de la balise#parent. Ses coordonnées seront donc relatives à cette balise.
Une fois le code modifié et sauvegardé, exécutez le fichier. Vous devriez obtenir l'image suivante.

Les coordonnées ont changé
Les coordonnées ont changé

Modifier la position des éléments

Nous avons vu que la méthodeoffset()pouvait être utilisée en tant que setter, et donc pouvait modifier les coordonnées absolues d'un élément. Pour cela, il suffit d'indiquer les nouvelles coordonnées dans les paramètres de la méthodeoffset(). Par exemple, pour afficher la balise<div>#enfantaux coordonnées absolues (100,100), voici le code à mettre en place :

var posenfant = $('#enfant').offset();
posenfant.top = 100;
posenfant.left = 100;
$('#enfant').offset(posenfant);

La première instruction crée un objet jQuery contenant les coordonnées absolues de la balise#enfantet le mémorise dans la variable posenfant. Les deux instructions suivantes définissent les nouvelles coordonnées et les affectent aux composantestopetleftde l'objetposenfant. Enfin, la quatrième instruction utilise l'objetposenfantpour modifier les coordonnées absolues de la balise#enfant.

Connaître les dimensions des éléments

Examinez l'image suivante. Elle représente une balise<div>dans laquelle ont été définies :

  • une marge intérieure (padding) ;

  • une marge extérieure (margin) ;

  • une bordure (border).

Une balise <div> avec padding, margin et border
Une balise <div> avec padding, margin et border

Plusieurs méthodes jQuery permettent de connaître les dimensions et de redimensionner les éléments de typeblock:

  • width(): largeur de l'élément, de la fenêtre ou du document, sans inclure les marges (padding,borderetmargin). Cette méthode peut être utilisée comme getter (pour connaître la largeur d'un élément) ou comme setter (pour modifier la largeur d'un élément).

  • innerWidth(): largeur de l'élément, en incluant lepaddinggauche et droit.

  • outerWidth(): largeur de l'élément, en incluant lepaddinggauche et droit etborder.

  • outerWidth(true): largeur de l'élément, en incluantpaddinggauche et droit,borderetmargingauche et droit.

  • height(): hauteur de l'élément, de la fenêtre ou du document, sans inclure les marges (padding,borderetmargin). Cette méthode peut être utilisée comme getter (pour connaître la hauteur d'un élément) ou comme setter (pour modifier la hauteur d'un élément).

  • innerHeight(): hauteur de l'élément, en incluant lepaddingsupérieur et inférieur.

  • outerHeight(): hauteur de l'élément, en incluantborderetpaddingsupérieur et inférieur.

  • outerHeight(true): hauteur de l'élément, en incluantborder,paddingsupérieur et inférieur etmarginsupérieur et inférieur.

Voyons comment utiliser ces méthodes en exploitant les propriétés CSS d'une balise<div>. Voici le code utilisé :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Manipulation de l'attribut class</title>
<style type="text/css">
div {
width: 250px;
height: 250px;
background-color: #AEEE00;
padding: 35px;
margin: 35px;
border-width : 6px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<span id="resultat"></span>
<script src="jquery.js"></script>
<script>
$(function() {
// Entrer les instructions jQuery ici
});
</script>
</body>
</html>

Le corps du document accomplit deux actions :

  1. Mise en place d'une balise<div>et insertion d'un peu de texte dans cette balise.

  2. Mise en place d'une balise<span>d'identifiant#resultat, dans laquelle les dimensions de la balise<div>seront affichées.

Le style de la balise<div>est redéfini dans l'en-tête, entre les balises<style>et</style>:

  • Dimensions :width: 250px; height: 250px;

  • Couleur d'arrière-plan :background-color: #AEEE00;

  • Marges internes :padding: 35px;

  • Marges externes :margin: 35px;

  • Bordure :border-width : 6px; border-color: black; border-style: solid;

Pour accéder aux dimensions de la balise<div>, nous allons insérer un peu de code jQuery après la ligne 30 :

var dimensions = 'width=' + $('div').width() + ', innerWidth=' + $('div').innerWidth() + ', outerWidth=' + $('div').outerWidth() + ', outerWidth(true)=' + $('div').outerWidth(true);
dimensions = dimensions + ', height=' + $('div').height() + ', innerHeight=' + $('div').innerHeight() + ', outerHeight=' + $('div').outerHeight() + ', outerHeight(true)=' + $('div').outerHeight(true);
$('#resultat').text(dimensions);

Les deux premières lignes obtiennent les dimensions de la balise<div>avec les méthodeswidth(),innerWidth(),outerWidth(),outerWidth(true),height(),innerheight(),outerHeight()etouterHeight(true). Ces informations sont mémorisées dans la variabledimensions. La troisième ligne affiche le contenu de la variabledimensionsdans la balise<span>en utilisant la méthode jQuerytext().

Le résultat se trouve à l'image suivante.

Les dimensions sont affichées sur la page
Les dimensions sont affichées sur la page

Aux imprécisions près, les valeurs retournées par les méthodes jQuery correspondent bien aux dimensions définies dans le style CSS de la balise<div>:

Méthode

Propriété(s) CSS

Valeur

width()

width

250

innerWidth()

width + padding gauche + padding droit

250 + 35 + 35 = 320

outerWidth()

width + padding gauche + padding droit + border gauche + border droit

250 + 35 + 35 + 6 + 6 = 332

outerWidth(true)

width + padding gauche + padding droit + border gauche + border droit + margin gauche + margin droit

250 + 35 + 35 + 6 + 6 + 35 + 35 = 402

height()

height

250

innerHeight()

height + padding supérieur + padding inférieur

250 + 35 + 35 = 320

outerHeight()

height + padding supérieur + padding inférieur + border supérieur + border inférieur

250 + 35 + 35 + 6 + 6 = 332

outerHeight(true)

height + padding supérieur + padding inférieur + border supérieur + border inférieur + margin supérieur + margin inférieur

250 + 35 + 35 + 6 + 6 + 35 + 35 = 402

Supposons maintenant que vous vouliez modifier les dimensions de la balise<div>. Vous utiliserez pour cela les méthodeswidth()etheight()en tant que setters. Dans cet exemple, les dimensions de la balise<div>sont fixées à 400×200 pixels :

$('div').width('400px');
$('div').height('200px');

Associer des données aux balises

Utilisée en setter, la méthode jQuery$.data()permet d'associer une ou plusieurs données textuelles à n'importe quel élément du DOM. Oui, vous avez bien lu ! Il peut s'agir de données complémentaires quelconques que vous retrouverez par la suite en utilisant la méthode$.data()en getter. Rassurez-vous, ces données ne surchargent pas la mémoire de l'ordinateur : elles sont détruites lorsque l'élément auquel elles sont liées est retiré du DOM ou lorsque la page Web change.

La syntaxe de cette méthode est un peu particulière. Supposons que vous vouliez associer une donnée unique à un élément, vous utiliserez la syntaxe suivante :

$.data(el, 'nom', nom_don: don);

… où :

  • elest le nom de l'élément concerné, sans apostrophes ;

  • nomest le nom (entre apostrophes) de la « variable » dans laquelle sera stockée la donnée ;

  • nom_donest le nom (sans apostrophes) associé à la donnée ;

  • donest une donnée quelconque. S'il s'agit d'un nombre, les apostrophes sont inutiles. Par contre, s'il s'agit d'une chaîne, mettez-la entre apostrophes.

Si vous voulez associer plusieurs données à un élément, vous utiliserez une syntaxe légèrement différente :

$.data(el, 'nom', {nom_don1: don1, nom_don2: don2, nom_don3: don3, etc.});

… où :

  • elest le nom de l'élément concerné, sans apostrophes ;

  • nomest le nom (entre apostrophes) dans lequel sera stockée la donnée ;

  • nom_don1,nom_don2,nom_don3, etc. sont les noms (sans apostrophes) associés aux données ;

  • don1,don2,don3, etc. sont des données quelconques. Lorsqu'une de ces données est numérique, ne mettez pas d'apostrophes. Au contraire, lorsqu'une de ces données est une chaîne, mettez-la entre apostrophes.

Pour retrouver une donnée associée à un élément, utilisez la syntaxe suivante :

var uneVariable = $.data(el,'nom').nom_don;

… où :

  • uneVariableest une variable quelconque ;

  • elest le nom de l'élément (sans apostrophes) auquel une donnée a été associée ;

  • nomest le nom (entre apostrophes) dans lequel a été stockée la donnée ;

  • nom_donest le nom de la donnée à retrouver, sans apostrophes.

Si tout ceci est confus pour vous, un petit exemple va vous apporter la lumière ! Dans le code suivant, nous allons associer trois données à une balise<div>, retrouver ces données et les afficher dans trois balises<span>enfants du<div>. Voici le code : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Manipulation de l'attribut class</title>
</head>
<body>
<div id="mondiv">
Les valeurs stockées dans la balise &lt ;div&gt ; sont : <span id="sp1"></span>, <span id="sp2"></span> et <span id="sp3"></span>.
</div>
<script src="jquery.js"></script>
<script>
$(function() {
var div = $('div')[0];
$.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12, troisieme: 'http://www.siteduzero.com'});
var val1 = $.data(div, 'mesValeurs').premier;
var val2 = $.data(div, 'mesValeurs').deuxieme;
var val3 = $.data(div, 'mesValeurs').troisieme;
$('#sp1').text(val1);
$('#sp2').text(val2);
$('#sp3').text(val3);
});
</script>
</body>
</html>

Remarquez :

  • Les codes HTML&lt;et&gt;qui apparaissent autour du motdiv. Ces codes remplacent les caractères < et >. Sans eux, le texte « <div> » serait interprété comme une balise, et le code ne produirait pas l'effet recherché. ‌

  • L'emplacement stratégique des balises<span>. En y insérant des données, elles complèteront la phrase « Les valeurs stockées […] » d'une façon naturelle, comme si la phrase avait été écrite « en dur ».

La partie intéressante du code se trouve entre les lignes 15 et 22.

Pour alléger l'écriture, la ligne 15 commence par stocker le premier élémentdivdans la variablediv. Ainsi, il suffira d'écriredivà la place de$('div')[0]:

var div = $('div')[0];

La ligne 16 attache trois données nommées « premier », « deuxieme » et « troisieme » à la variablemesValeurset relie cette variable à l'unique balise<div>du document. Remarquez les apostrophes utilisées autour des données textuelles « premier » et « troisieme » :

$.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12, troisieme: 'http://www.siteduzero.com'});

Les lignes 17 à 19 sont construites sur le même modèle. À titre d'exemple, la ligne 17 lit la valeur « premier » de la variablemesValeursassociée à la balise<div>et la mémorise dans la variableval1:

var val1 = $.data(div, 'mesValeurs').premier;

Les lignes 20 à 22 insèrent les trois valeurs récupérées lignes 17 à 19 dans les balises<span>#sp1,#sp2et#sp3:

$('#sp1').text(val1);
$('#sp2').text(val2);
$('#sp3').text(val3);

Si vous exécutez ce code dans votre navigateur, vous devriez obtenir le même résultat qu'à l'image suivante.

Le code exécuté dans le navigateur
Le code exécuté dans le navigateur

Je vous ai dit que les données associées aux éléments ne surchargeaient pas la mémoire de l'ordinateur, car elles étaient détruites lorsque l'élément auquel elles sont liées est retiré du DOM, lorsque la page Web change ou que le navigateur est fermé.

Je voudrais vous parler d'une troisième technique, moins destructrice que les deux premières puisqu'elle se contente de supprimer les données associées à un élément sans supprimer l'élément et sans changer de page. Il s'agit de la méthoderemoveData()dont voici la syntaxe :

$.removeData(el,'nom');

… où :

  • elest le nom de l'élément (sans apostrophes) auquel les données ont été associées ;

  • nomest le nom (entre apostrophes) de la « variable » dans lequel les données ont été stockées.

Par exemple, pour supprimer la variablemesValeursassociée à la première (et unique d'ailleurs) balise<div>de l'exemple précédent, vous utiliserez les instructions suivantes :

var div = $('div')[0];
$.removeData(div, 'mesValeurs');

La première instruction définit la variabledivet y stocke le premier élément<div>. La deuxième instruction supprime la variablemesValeursqui était associée à la première balise<div>.

  • Les termes getter et setter correspondent aux méthodes de lecture (getter) et d'écriture (setter) du langage jQuery. Ils viennent des verbes anglais to get (obtenir) et to set (définir). En jQuery, un getter est une méthode qui obtient une valeur HTML ou CSS en interrogeant le code. Inversement, un setter est une méthode qui modifie une valeur HTML ou CSS dans le code du document.

  • Un sélecteur jQuery peut retourner zéro, un ou plusieurs éléments. Lorsqu'aucun élément n'est retourné, le getter renvoie la valeurundefined(c'est-à-dire « non défini »). Lorsqu'un seul élément est retourné, le getter renvoie la valeur de cet élément. Les setters reçoivent généralement plusieurs paramètres textuels qui permettent de modifier une propriété CSS, un attribut HTML ou encore d'insérer un élément dans le code.

  • Vous utiliserez la méthodeattr()pour lire, créer et modifier les attributs des balises HTML.

  • Vous utiliserez la méthodecss()pour lire, créer et modifier les propriétés CSS attachées au document.

  • La méthodeaddClass()ajoute à la sélection l'attributclassdont le nom est indiqué entre les parenthèses. La méthoderemoveClass()supprime un attributclassdans une balise. Enfin, la méthodehasClass()permet de tester l'existence d'une classe dans les éléments retournés par le sélecteur.

  • La méthodeval()permet de connaître et de modifier la valeur des zones de texte, boutons radio, cases à cocher, listes déroulantes et zones de liste contenues dans un document HTML.

  • Les méthodestext()ethtml()permettent de travailler avec les valeurs stockées dans des éléments HTML :text()retourne/modifie la valeur textuelle stockée dans l'élément, ethtml()retourne/modifie le code HTML stocké dans l'élément.

  • Pour connaître/modifier la position absolue d'une balise dans le document, vous utiliserez les méthodesoffset()etposition(). Pour connaître les dimensions d'un élément, vous utiliserez les méthodeswidth(),innerWidth(),outerWidth(),height(),innerHeight(), etouterHeight().

  • En utilisant le langage jQuery, il est possible d'associer des données aux balises HTML. Pour cela, on utilise la méthode$.data(). Dans un premier temps, on affecte une ou plusieurs données à la balise en utilisant la méthode$.data()en tant que setter. Lorsque cela est nécessaire, la ou les valeurs associées à la balise sont récupérées en utilisant la méthode$.data()en getter. Lorsque les données associées à une balise ne sont plus nécessaires, on peut les supprimer avec la méthode$.removeData().

Example of certificate of achievement
Example of certificate of achievement