Médiaforma

All posts tagged jquery

Le tableau suivant regroupe les différents événements souris qui peuvent être traités en jQuery :

Méthode Événement géré
click() Clic gauche
dbclick() Double-clic
mousedown() Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l’élément
mouseenter() ou mouseover() Début de survol de l’élément
mouseleave() ou mouseout() Arrêt de survol de l’élément
mousemove() Déplacement du pointeur au-dessus de l’élément
mouseup() Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l’élément
scroll() Utilisation de la roulette alors que le pointeur se trouve au-dessus d’un élément concerné par ce type d’événement

 

Ce premier exemple va capturer les coordonnées de la souris au-dessus d’une image et les afficher dans un span. L’événement capturé est onmousemove. Ainsi, à chaque déplacement de la souris, les coordonnées seront mises à jour dans le span. Tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier mouse-move.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Utilisation de l'événement mousemove</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
        // Gestion du clic et déplacement de l'image
        $("#target").mousemove(function(e) {
          var y = e.pageY;
          var x = e.pageX;
          $('#xy').html("x = " + x + ", y = " + y);
         });
      });
    </script>
  </body>
</html>

 

 

Voici le résultat :

 

Exercice

Tapez ce code dans Notepad++ et sauvegardez-le sous le nom taille-image.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de l'image sur click et mouseout</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Ecrivez quelques lignes de jQuery pour :

  1. Augmenter la taille de l’image lorsque l’utilisateur clique dessus.
  2. Redonner la taille originale à l’image lorsque le pointeur ne la survole plus.

 

Solution

$(function() {
  $("#target").mousedown(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',largeur+10);
  });
  $("#target").mouseout(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',160);
  });
});

jQuery est en mesure de réagir aux événements générés par la souris, le clavier et les éléments du DOM. Pour cela, vous devez définir une méthode de gestion événementielle en écrivant quelque chose comme ceci :

$(sélecteur).événement(function(){
  // Gestion de l'événement
});

Où :

  • sélecteur permet de sélectionner un ou plusieurs éléments du DOM
  • événement est le nom de l’événement à gérer.

Plusieurs méthodes jQuery permettent de manipuler les classes des éléments du DOM :

  • addClass() : ajoute la classe spécifiée en argument
  • removeClass() : supprime la classe de la sélection, si elle existe
  • toggleClass() : retire ou ajoute la classe de la sélection, selon si elle existe ou si elle n’existe pas

Pour vous entrainer à manipuler ces méthodes, saisissez le code suivant dans Notepad+++ et sauvegardez-le sous le nom manipule-classes.htm :

<!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: 300%; }
    </style>
  </head>
  <body>
    <div id="kevin">Kévin</div>
    <div id="eric">Eric</div>
    <div id="cathy">Cathy</div>
    <div id="julie">Julie</div>
    <div id="trich">Patricia</div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Ajouter le code jQuery ici

      });
    </script>
  </body>
</html>

 

Exécutez le code. Voici ce que vous devez obtenir :

 

A l’aide des méthodes addClass(), removeClass() et toggleClass(), modifiez les classes des éléments div pour obtenir ce résultat :

 

Voici le code à utiliser :

$('#kevin').removeClass('rouge').addClass('vert');
$('#eric').addClass('rouge').addClass('grand');
$('#cathy').removeClass('grand');
$('#julie').addClass('vert');
$('#trich').removeClass('vert').addClass('rouge').addClass('grand');

 

Remarque : Plusieurs autres variantes sont possibles.

Il est possible d’enlever ou d’ajouter plusieurs classes simultanément : précisez le nom des classes concernées dans les parenthèses en les séparant d’un espace. Par exemple :

addClass('bleu immense');

 

Simplifiez le code jQuery précédent :

$('#kevin').removeClass('rouge').addClass('vert');
$('#eric').addClass('rouge grand');
$('#cathy').removeClass('grand');
$('#julie').addClass('vert');
$('#trich').removeClass('vert').addClass('rouge grand');

 

Pour terminer, la méthode hasClass() renvoie la valeur true si la sélection a pour classe la valeur spécifiée en argument. Elle renvoie la valeur false dans le cas contraire.

 

Exercice : A titre d’exemple, appliquez la méthode hasClass() à tous les éléments div du document. Si un élément est de classe rouge, supprimez cette classe et remplacez-la par la classe vert.

Solution :

    $('div').each(function(){
  element=$(this);
  if (element.hasClass('rouge')) {
    element.removeClass('rouge');
    element.addClass('vert');
  }
});

Vous appliquerez la méthode remove() aux éléments jQuery à supprimer.

Saisissez le code suivant dans Notepad++ et enregistrez-le sous le nom supprimer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
        $('p').remove();
      });
    </script>
  </body>
</html>

 

Exercice : Insérez le code nécessaire pour supprimer tous les paragraphes (<p>).

Solution :

$('p').remove();

 

Exercice : Supprimer le deuxième enfant <li> des balises <ul>

Solution :

$('li:nth-child(2)').remove();

Quatre méthodes permettent d’insérer un élément (el) avant ou après l’élément ciblé (cible) :

  • el.appendTo(cible) insère un élément à la fin de la cible
  • el.prependTo(cible) insère un élément au début de la cible
  • el.insertBefore(cible) insère un élément avant la cible
  • el.insertAfter(cible) insère un élément après la cible

Saisissez ce code dans Notepad++ et sauvegardez-le sous le nom inserer-elements.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion d'éléments</title>
    <script src="jquery.js"></script>
  </head>
  <body>
<h2>Titre</h2>
  <div class="parent">
    <div>Bonjour</div>
    <div>jQuery</div>
  </div>
  <script>
      $(function() {
        //$('<p>Comment ça va ?</p>').appendTo('.enfant');
      });
    </script>
  </body>
</html>

 

Exécutez ce code dans Firefox. Supprimez les commentaires et ré exécutez ce code. Voici le résultat :

 

Expérimentez les méthodes prependTo(), insertBefore() et insertAfter() pour comprendre leurs différences.

Si vous ne voyez pas la différence entre appendTo() et insertAfter(), ou entre prependTo() et insertBefore(), utilisez Firebug pour visionner le code généré. Pour cela, appuyez sur la touche F12, sélectionnez l’onglet HTML et développez les balises <body> puis <div> :

 


Commencez par saisir ce code et sauvegardez-le sous le nom remplacer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <ul>
      <li>un
      <li>deux
      <li>trois
      <li>quatre
    </ul>
    <hr>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <ul>
      <li>premier
      <li>deuxième
      <li>troisième
    </ul>
    <hr>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Vous utiliserez la méthode replaceWith() pour remplacer la sélection.

Par exemple, pour remplacer tous les éléments hr par des éléments br, vous utiliserez cette instruction :

$('hr').replaceWith('<br>');

 

Exercice : remplacez tous les paragraphes par le texte “Ceci est un paragraphe”.

Solution :

$('p').replaceWith('Ceci est un paragraphe');

 

Exercice : remplacer les listes ul par des listes ol

Si vous avez songé à cette instruction :

$('ul').replaceWith('ol');

 

Le résultat est loin de ce qui était attendu :

 

Pour comprendre ce qui s’est passé, utilisez Firebug.

Appuyez sur F12, sélectionnez l’onglet HTML et développez l’élément body :

 

Les éléments ul ont été remplacés par des éléments ol et les enfants li ont été supprimés.

Il va donc falloir utiliser une autre méthode. Vous allez parcourir chacun des éléments ul avec la méthode each() et les remplacer par une balise <ol> suivie du contenu de l’élément ol et de la balise </ol> :

$('ul').each(function(){
  var dum=$(this);
  dum.replaceWith('<ol>'+dum.html()+'</ol>');
});

 

Voici le résultat :

 

Voyons si vous avez compris. Ajoutez quelques instructions jQuery pour remplacer tous les titres h2 de la page par des titres h1.

Voici la solution :

$('h2').each(function(){
  var dum=$(this);
  dum.replaceWith('<h1>'+dum.html()+'</h1>');
});

Commencez par saisir ce code et sauvegardez-le sous le nom inserer-contenu.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Insertion de contenu dans le DOM</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <h2>Partie 1</h2>
    <p>Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.</p>
    <p>Accedat huc suavitas quaedam oportet sermonum atque morum, haudquaquam mediocre condimentum amicitiae. Tristitia autem et in omni re severitas habet illa quidem gravitatem, sed amicitia remissior esse debet et liberior et dulcior et ad omnem comitatem facilitatemque proclivior.</p>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <h2>Partie 2</h2>
    <p>Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis retentabant.</p>
    <p>Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</p>

    <script>
    </script>
  </body>
</html>

 

Remarque

Le texte des paragraphes est issu du site http://www.faux-texte.com/.

 

Pour altérer le contenu d’un objet texte jQuery, vous utiliserez la méthode text(). Par exemple, pour modifier tous les titres h2 d’un document en “Ceci est un titre h2”, vous utiliserez cette instruction :

$('h2').text('Ceci est un titre h2');

 

Faites un essai dans ce document :

 

Vous pouvez également insérer du contenu avant ou après un objet jQuery en utilisant les méthodes suivantes :

  • append() insère du contenu à la fin de la sélection
  • prepend() insère du contenu au début de la sélection
  • before() insère du contenu avant la sélection
  • after() insère du contenu après la sélection

 

Exercice : Ajoutez un signe supérieur à et un espace avant chaque titre h2

Solution :

$('h2').prepend('> ');

 

Exercice : Remplacez successivement prepend par append, before et after pour mettre en évidence les différences de ces méthodes

 

Exercice : Insérez un trait horizontal après chaque paragraphe

Solution :

$('p').append('<hr>');