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

Correction TP3 jQuery

Un cours complet pour maîtriser Correction TP3 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

    • Après la réalisation du TP3 jQuery vous serez capable de manipuler les événements souris et clavier en jQuery.
    • Avant de commencer les exercices visitez la page et la page

  2. Exercice 01

    1. Énoncé
    2. Solution
      <!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery</title>
  <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>
<!--On ecrit notre code JavaScript / jQuery-->
<script>
$(document).ready(function(){
  var small={width: "100px",height: "116px"}; 
  var large={width: "200px",height: "232px"}; 
  var count=1; 
  $("#agr").click(function() { 
    $(imgtab).animate({ 
      width:"+=20px",height:"+=20px" });
      $("#hauteur").text($('#imgtab').width());
      $("#largeur").text($('#imgtab').height()); 
    });
    $("#dim").click(function() { 
      $(imgtab).animate({
      width:'-=20px',height:'-=20px' });
      $("#hauteur").text($('#imgtab').width());
      $("#largeur").text($('#imgtab').height()); 
  }); 
});
</script>

</head>
<body>

<h1>Gestion d'évènements en jQuery</h1> 
<table>
<tr>
<td colspan="2"><img id="imgtab" src="image.jpg"></td></tr>
<tr>
<td><button id="agr">Agrandir l'image</button>&nbsp;Hauteur:<span id="hauteur"></span>
</td>
<td><button id="dim">Réduire l'image</button>&nbsp;Largeur:<span id="largeur"></span>
</td>
</tr>
</table>
      <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>

  3. Exercice 05

    1. Énoncé
    2. Solution
      <!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery</title>
  <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">
    $(document).ready(function(){
    $("#tous").click(function(){
    var checked_status = this.checked;
    $("input[name=case]").each(function(){
    this.checked = checked_status;
  });
});
});
</script>
  </head>
  <body>
    <div class="container">
    <div class="form-check">
    La librairie jQuery est :<br />
<input class="form-check-input" type="checkbox" name="case" />Concise<br />
<input class="form-check-input" type="checkbox" name="case" />Souple<br />
<input class="form-check-input" type="checkbox" name="case" />Compacte<br />
<input class="form-check-input" type="checkbox" name="case" />Rapide<br />
<input class="form-check-input" type="checkbox" name="case" />Compatible<br />
<br />
<input class="form-check-input" type="checkbox" id="tous" /><b>Sélectionner tout</b>
</div>
</div>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <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>

  4. Exercice 06

    1. Énoncé
    2. Solution
      <!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery</title>
  <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>
  <style type="text/css">
   /* div { width: 150px;
    height: 16px;
    border: 1px dotted black;}*/
    </style>
  
  <script type="text/javascript">
      $(document).ready(function(){
$("button").click(function(){
var choix = $('input:radio:checked').val();
$("div#resultat").html("Votre choix est : <strong>"+choix+"</strong>");
});
});
</script>
  </head>
  <body>
<div class="container">
  <div class="row">
    <div class="card border-info mb-3" style="min-width: 22rem;">
      <div class="card-header">Affichez votre choix</div>
      <div class="card-body text-info">
        <form action="">
          <input type="radio" name="1" value="Internet Explorer" />Internet
          Explorer<br />
          <input type="radio" name="1" value="Firefox" />Firefox<br />
          <input type="radio" name="1" value="Safari" />Safari<br />
          <input type="radio" name="1" value="Opera" />Opera<br />
          <input type="radio" name="1" value="Google" />Google<br />
          <input type="radio" name="1" value="Autre" />Autre<br />
          </form>
          <button class="btn btn-info">Trouver</button>
          <div ></div>
      </div>
      <div class="card-footer bg-transparent border-info" id="resultat">Votre choix est :</div>
    </div>
</div>
</div>
  

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <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>