Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
jQuery

Correction TP4-3 jQuery

Un cours complet pour maîtriser Correction TP4-3 jQuery.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Présentation de jQuery
Historique du jquery
Installation de jQuery
Le vocabulaire à utiliser dans jQuery
La Syntaxe de base de jQuery
TP1 jQuery
Les sélecteurs en jQuery
Les sélecteurs de base en jQuery
Les bases de jQuery
Les sélecteurs hiérarchiques
Les filtres de base en jQuery (1/3)
Les filtres de base en jQuery (2/3)
Les filtres de base en jQuery (3/3)
Les filtres enfants en jQuery
Les filtres de contenu en jQuery
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Connaitre les méthodes addClass(), removeClass() et toggleClass()
    • Etre capable d'animer des modifications apportées aux propriétés CSS

  2. Exercice 01

      1. Énoncé
      2. Solution
        1. Code HTML
          <!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Les évenements formulaire jQuery</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script rel="javascript" type="text/javascript" src="Tp4-Ex01.js"></script>
<link rel="stylesheet" type="text/css" href="Tp4-Ex01.css">
</head>
  <body>
    <center>
      <table id="matable">
        <thead>
        <tr>
          <th>Numéro</th>
          <th>Prénom</th>
          <th>Nom</th>
          <th>Date de naissance</th>
          <th>Adresse</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>01</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>02</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>03</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>04</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>05</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>06</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>07</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>08</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>09</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
        <tr>
          <td>10</td>
          <td>Prénom</td>
          <td>Nom</td>
          <td>Date de naissance</td>
          <td>Adresse</td>
        </tr>
      </tbody>
      </table>
      <div>
      <button id="btnAddClass01" class="btn btn-primary w-100">Colorer la première ligne du tableau</button>
      <button id="btnAddClass02" class="btn btn-info w-100">Colorer la dernière ligne du tableau</button>
      <button id="btnAddClass03" class="btn btn-secondary w-100">Colorer les lignes paires du tableau (Ne colorer pas la première ligne)</button>
      <button id="btnAddClass04" class="btn btn-warning w-100">Colorer les lignes impaires du tableau  (Ne colorer pas la dernière ligne)</button>
      <button id="btnAddClass05" class="btn btn-success w-100">Mettre le texte des deux dernières lignes du tableau en gras</button>
      <button id="btnAddClass06" class="btn btn-primary w-100">Colorer et mettre en gras toute les cellules de la colonne nom</button>
      <button id="btnAddClass07" class="btn btn-danger w-100">Supprimer toutes les classes utilisées précédemment</button>

    </div>
    </center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
  </html>
 <!-- https://tabard.fr/cours/2017/xmlweb/javascript.html-->
        2. Code CSS
          div{
    width:50%;
    padding-top: 20px;
        }
    table {
    border: medium solid #6495ed;
    border-collapse: collapse;
    width: 50%;
    }
    body,td {
      font-size: 14px;
    }
    table {
        background-color: black;
        border: 1px black solid;
        border-collapse: collapse;
    }    
    th {
        border: 1px outset silver;
        background-color: blue;
        color: white;
    }    
    tr {
        border: 1px outset silver;
        background-color: white;
        margin: 1px;
    }
    
    tr.evenstriped {
        border: 1px outset rgb(236, 231, 159);
        background-color: rgb(241, 241, 178);
    }
    tr.oddstriped {
        border: 1px outset rgb(98, 72, 250);
        background-color: rgb(188, 226, 241);
    }
    .premierstriped {
        border: 1px outset rgb(98, 72, 250);
        background-color: rgb(240, 229, 72);
    }
    .dernierstriped {
        border: 1px outset rgb(98, 72, 250);
        background-color: rgba(47, 233, 233, 0.911);
    }
    .dernierstripedgras {
        font-weight: bold;
    }
    .colonnecoloredgras {
        font-weight: bold;
        background-color: rgba(151, 197, 191, 0.911);
    }
    td {
        padding: 1px 10px;
    }
        3. Code JS

            CORRECTION TP4-3 JQUERY

    1. Exercice 02

        1. Énoncé
        2. Solution
          1. Code HTML
            <!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Les évenements formulaire jQuery</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script rel="javascript" type="text/javascript" src="Tp4-Ex02.js"></script>
<link rel="stylesheet" type="text/css" href="Tp4-Ex02.css">
</head>
  <body>
    <center>
      <div> 
        <p>Salut!</p> 
        <p>Bienvenue dans notre cours jQuery.!</p> 
        <button class="btn btn-primary">Cliquez ici!</button> 
    </div> 
    </center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
  </html>
          2. Code CSS
            .classdiv { 
    font-size: 25px; 
    background-color: rgba(0, 255, 221, 0.911); 
    min-height:120px; 
    color: black;
} 
div { 
    width: 300px; 
    min-height: 120px; 
    background-color: rgba(144, 238, 144, 0.795); 
    padding: 20px; 
    font-weight: bold; 
    font-size: 20px; 
    color: darkseagreen;
}
          3. Code JS
            $(function() { 
  $("button").click(function() { 
      $("div").toggleClass("classdiv"); 
  }); 
});

      1. Exercice 03

        1. Énoncé
        2. Solution
          1. Code HTML
            <!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Les évenements formulaire jQuery</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="Tp4-Ex03.css">
<script rel="javascript" type="text/javascript" src="Tp4-Ex03.js"></script>

</head>
  <body>
    <center>
      <div id="container">
        <textarea id="write" rows="6" cols="60"></textarea>
        <ul id="keyboard">
        <li class="symbol"><span class="off">`</span><span
        class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span
        class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span
        class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span
        class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span
        class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span
        class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span
        class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span
        class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span
        class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span
        class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span
        class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span
        class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span
        class="on">+</span></li>
        <li class="delete lastitem">delete</li>
        <li class="tab">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <li class="symbol"><span class="off">[</span><span
        class="on">{</span></li>
        <li class="symbol"><span class="off">]</span><span
        class="on">}</span></li>
        <li class="symbol lastitem"><span class="off">\</span><span
        class="on">|</span></li>
        <li class="capslock">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li class="symbol"><span class="off">;</span><span
        class="on">:</span></li>
        <li class="symbol"><span class="off">'</span><span
        class="on">&quot;</span></li>
        <li class="return lastitem">return</li>
        <li class="left-shift">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <li class="symbol"><span class="off">,</span><span
        class="on">&lt;</span></li>
        <li class="symbol"><span class="off">.</span><span
        class="on">&gt;</span></li>
        <li class="symbol"><span class="off">/</span><span
        class="on">?</span></li>
        <li class="right-shift lastitem">shift</li>
        <li class="space lastitem">&nbsp;</li>
        </ul>
        </div>
    </center>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
          2. Code CSS

              CORRECTION TP4-3 JQUERY

          3. Code JS

              CORRECTION TP4-3 JQUERY

        Le positionnement d'un élément en jQuery
        Sommaire du cours jQuery