• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Modifier le contenu d'un élément

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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é CSS font-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éthode css(). Cette valeur sera utilisée pour mettre à jour la propriété CSS font-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 valeur undefined (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 page http://api.jquery.com et le second sur la page http://docs.jquery.com. À la ligne 16, on utilise l'instruction jQuery $('a').attr('href') pour lire le contenu de l'attribut href des balises <a> contenues dans le document. L'objet retourné est stocké dans la variable test. 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'adresse http://api.jquery.com qui 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'instruction var test = $('a').attr('class');, la valeur retournée serait undefined.

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'attribut src de l'élément d'identifiant logo.
La deuxième ligne crée (s'ils n'existent pas) ou modifie (s'ils existent) plusieurs attributs dans l'élément d'identifiant logo. Ici, l'attribut src est initialisé avec la valeur « logo.gif », l'attribut alt avec la valeur « Logo de la société » et l'attribut width avec la valeur « 200px ».
Enfin, la troisième ligne utilise une fonction JavaScript pour créer ou modifier l'attribut target des balises <a> du document. Voici par exemple à quoi pourrait ressembler la fonction passée en deuxième argument de la méthode attr() :

$('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'attribut target est initialisé avec la valeur « _self » (return '_self'). Dans le cas contraire, l'attribut target est 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éthode attr() pour lire, créer et modifier les attributs des balises HTML. Voici quelques exemples :

  • $('#plus').attr('src'); retourne l'attribut src de l'élément d'identifiant plus.

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

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

  • $('#illustration').attr('src','monimage.jpg'); modifie ou crée l'attribut src dans la balise d'identifiant illustration et 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éthode removeAttr() :

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

… où sel est un sélecteur jQuery et attribut est 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'attribut href de 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 jQuery css() 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'attribut font-size du premier élément de classe para et la stocke dans la variable taille :

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

Cette deuxième instruction affecte la valeur « 40px » à l'attribut font-size de tous les éléments de classe para :

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

Travailler avec l'attribut class

Comme tout programmeur (ou apprenti programmeur) Web, vous utilisez certainement l'attribut class pour donner la même apparence à plusieurs balises HTML. Pour accéder aux balises dont l'attribut class a 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 classe vert, 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 :

  • rouge affiche les caractères en rouge ;

  • vert affiche les caractères en vert ;

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

  • grand affiche 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 attribut class initialisé 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éthodes addClass(), removeClass() et toggleClass() en insérant du code jQuery ligne 30.

La balise <span> d'identifiant julia ne 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 classe vert. 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 classe vert (existante) et la classe rouge (que l'on veut ajouter). Pour parvenir au résultat souhaité, il faudrait supprimer la classe existante et la remplacer par la classe rouge :

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

La première méthode supprime la classe vert et la deuxième ajoute la classe rouge.

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

  • supprimer la classe vert ;

  • ajouter la classe rouge ;

  • supprimer la classe grand ;

  • ajouter la classe petit.

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éthodes removeClass() et addClass() peuvent également être remplacées par la méthode toggleClass(). 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'identifiant eric, le prénom Eric est affiché en caractères rouges de grande taille :

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

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

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

  • Enfin, la classe grand lui 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éthodes addclass(), removeclass() et toggleclass(). 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éthode hasClass() 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 valeur true, car le <span> est de classe rouge. L'instruction $('#jean').hasClass('petit'); renverra la valeur false, car le <span> n'est pas de classe petit.

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éthode is(). Raisonnons sur la balise <span> suivante :

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

L'instruction $('#jean').is('.grand.rouge'); renverra la valeur true, car le <span> est de classe grand et rouge. Par contre, l'instruction $('#jean').is('.petit.rouge'); renverra la valeur false, car le <span> n'est pas de classe petit. En enveloppant l'instruction jQuery par un if, 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éthode val() 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 radio H. Renvoie true si le bouton est sélectionné, sinon false.

$('#fonction').val()

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

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

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

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

Écrit « abcde » dans la zone de texte Mot de passe.

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

Sélectionne le bouton radio H.

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

Sélectionne Retraité 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éthode text(), comme ceci : function(index, actuel), où index représente le numéro de la valeur en cours de traitement (à partir de 0), et actuel repré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éthode text() par la méthode html(). 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 instructions alert($('p').html()); et alert($('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éthode text(), html() ne balaie pas tous les éléments, mais se contente du premier.

Les méthodes text() et html() 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'abscisse left et l'ordonnée top. Vous utiliserez donc :

  • offset().left et offset().top pour connaître la position absolue d'un élément.

  • position().left et position().top pour 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 respectifs parent et enfant :

<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'identifiant parent sont 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'identifiant enfant sont 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 balise enfant étant imbriquée dans la balise parent, le terme absolute a 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 balise parent et 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éthode offset() pour connaître les coordonnées absolues de la balise <div>parent. Ces coordonnées sont mémorisées dans la variable posparent.
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>enfant dans la variable posenfant.

La ligne 3 affiche les coordonnées absolues des balises parent et enfant dans la balise <span>. La méthode text() est utilisée pour insérer du texte dans la balise <span>. Les coordonnées left et top des balises parent et enfant sont extraites des variables posparent et posenfant. Par exemple, pour l'abscisse de la balise parent, on utilise posparent.left.

Pourquoi avoir défini les variables posparent et posenfant?

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'écrire posparent.left que $('#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'instruction posparent.left s'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éthodes offset() par position(), 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 #parent est 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éthode offset() 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éthode offset(). Par exemple, pour afficher la balise <div>#enfant aux 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 #enfant et le mémorise dans la balise posenfant. Les deux instructions suivantes définissent les nouvelles coordonnées et les affectent aux composantes top et left de l'objet posenfant. Enfin, la quatrième instruction utilise l'objet posenfant pour 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 type block :

  • width() : largeur de l'élément, de la fenêtre ou du document, sans inclure les marges (padding, border et margin). 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 le padding gauche et droit.

  • outerWidth() : largeur de l'élément, en incluant le padding gauche et droit et border.

  • outerWidth(true) : largeur de l'élément, en incluant padding gauche et droit, border et margin gauche et droit.

  • height() : hauteur de l'élément, de la fenêtre ou du document, sans inclure les marges (padding, border et margin). 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 le padding supérieur et inférieur.

  • outerHeight() : hauteur de l'élément, en incluant border et padding supérieur et inférieur.

  • outerHeight(true) : hauteur de l'élément, en incluant border, padding supérieur et inférieur et margin supé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éthodes width(), innerWidth(), outerWidth(), outerWidth(true), height(), innerheight(), outerHeight() et outerHeight(true). Ces informations sont mémorisées dans la variable dimensions. La troisième ligne affiche le contenu de la variable dimensions dans la balise <span> en utilisant la méthode jQuery text().

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 + 37 = 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éthodes width() et height() 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ù :

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

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

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

  • don est 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ù :

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

  • nom est 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ù :

  • uneVariable est une variable quelconque ;

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

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

  • nom_don est 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 mot div. 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ément div dans la variable div. Ainsi, il suffira d'écrire div à la place de $('div')[0] :

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

La ligne 16 attache trois données nommées « premier », « deuxieme » et « troisieme » à la variable mesValeurs et 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 variable mesValeurs associée à la balise <div> et la mémorise dans la variable val1 :

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, #sp2 et #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éthode removeData() dont voici la syntaxe :

$.removeData(el,'nom');

… où :

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

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

Par exemple, pour supprimer la variable mesValeurs associé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 variable div et y stocke le premier élément <div>. La deuxième instruction supprime la variable mesValeurs qui était associée à 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 valeur undefined (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éthode attr() pour lire, créer et modifier les attributs des balises HTML.

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

  • La méthode addClass() ajoute à la sélection l'attribut class dont le nom est indiqué entre les parenthèses. La méthode removeClass() supprime un attribut class dans une balise. Enfin, la méthode hasClass() permet de tester l'existence d'une classe dans les éléments retournés par le sélecteur.

  • La méthode val() 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éthodes text() et html() 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, et html() 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éthodes offset() et position(). Pour connaître les dimensions d'un élément, vous utiliserez les méthodes width(), innerWidth(), outerWidth(), height(), innerHeight(), et outerHeight().

  • 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().

Exemple de certificat de réussite
Exemple de certificat de réussite