Correction TP6 jQuery

Correction TP6 jQuery

  1. Objectifs

    • Comprendre les bases d’usage de la bibliothèque jQuery
  2. Application M01

    1. Énoncé
    2. Solution
      • <!doctype html>
        <html lang="fr">
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>Filtre de base First</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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
         <script type="text/javascript">
            $(document).ready(function(){
              $('.idDiv').append("<div class='idDivNew'>Nouvelle boite crée avec <b>append</b></div>");
              $("<div class='idDivNew1'>Nouvelle boite crée avec <b>appendTo</b></div>").appendTo('.idDiv');
        
        });
        </script>
        <style>
            .idDiv{border: 2px solid blue;
            border-radius: 1px;width:500px;margin: 10px;}
            .idDivNew{border: 2px solid rgb(185, 241, 248);
            border-radius: 3px;width:400px;}
            .idDivNew1{border: 2px solid rgb(250, 16, 180);
            border-radius: 3px;width:400px;}
        </style>
        </head>
          </head>
          </head>
          <body>
            <div class="container ">
              <div class="row">
                <div class="col-md-8">
                  <div class="idDiv">
                    Je suis une grosse boite
                    <div class='idDivNew'>Je suis une nouvelle grosse boite crée avec <code>append</code></div>
                 </div>
                 
                 <div class="idDiv">
                    Je suis une autre grosse boite
                    <div class='idDivNew'>Je suis une nouvelle grosse boite crée avec <code>appendTo</code></div>
                 </div>
                </div>
              </div>
            </div>
              <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. Application M02

    1. Énoncé
    2. Solution
      • Vous pouvez utiliser la page HTML crée pour l’application M01 ci-dessus et changez le script par le suivant:
      • <script type="text/javascript">
            $(document).ready(function(){
              $('.idDiv').prepend("<div class='idDivNew'>Nouvelle boite crée avec <b>append</b></div>");
              $("<div class='idDivNew1'>Nouvelle boite crée avec <b>appendTo</b></div>").prependTo('.idDiv');
        });
        </script>
  4. Application M03

    1. Énoncé
    2. Solution
      • Vous pouvez utiliser la page HTML crée pour l’application M01 ci-dessus et changez le script par le suivant:
      • <script type="text/javascript">
            $(document).ready(function(){
              $('.idDiv').before("<div class='idDivNew'>Nouvelle boite crée avec <b>Before</b></div>");
              $("<div class='idDivNew'>Nouvelle boite crée avec <b>InsertBefore</b></div>").insertBefore('.idDiv');
        });
        </script>



  5. Application M04

    1. Énoncé
    2. Solution
      • Vous pouvez utiliser la page HTML crée pour l’application M01 ci-dessus et changez le script par le suivant:
      • <script type="text/javascript">
            $(document).ready(function(){
              $('.idDiv').after("<div class='idDivNew'>Nouvelle boite crée avec <b>Before</b></div>");
              $("<div class='idDivNew'>Nouvelle boite crée avec <b>InsertBefore</b></div>").insertAfter('.idDiv');
        });
        </script>
  6. Application M06

    1. Énoncé
    2. Solution
      • <script type="text/javascript">
            $(document).ready(function(){
                    $(".idDiv1").click(function () {
                       $(this).wrapInner("<b></b>").css("background-color", "green"); 
                    });
                 });
        </script>
        <style>
            .idDiv{border: 2px solid blue;
            border-radius: 3px;width:520px;margin: 10px;}
            .idDiv1{border: 2px solid blue;
            border-radius: 3px;width:520px;margin: 10px;}
        </style>
        </head>
          </head>
          </head>
          <body>
            <div class="container ">
              <div class="row">
                <div class="col-md-8">
                  <div class="idDiv">
                    <p><strong>Cliquez sur chaque carré ci-dessous pour voir le résultat:</strong></p>
              <div class = "idDiv1" id = "destination">C'EST UN TEST</div>
              <div class = "idDiv1" style = "background-color:greenyellow;">UN</div>
              <div class = "idDiv1" style = "background-color:bisque;">DEUX</div>
              <div class = "idDiv1" style = "background-color:burlywood;">TROIS</div>
        
        
        
                 </div>
                </div>
              </div>
            </div>
  7. Exercice 01

    1. Énoncé
    2. Solution
      •  <script type="text/javascript">
            $(document).ready(function(){
              var compteurClic=0;
              var couleur=0;
            $("div").css({width:"420px"});
            $("button").click(function(){
                compteurClic++;
                $('<p>paragraphe nouvellement crée'+compteurClic+'</p>').appendTo('.inner');
                $("p").each(function() {
                $("p").css({ border:"2px "+getRandomColor()+" solid",background:getRandomColor()});
            });
            $(".inner").each(function() {
              //On change la couleur de fond au hasard
              $(this).css("background-color", getRandomColor());
          });
          });
          function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
              color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
          }
          
        });
        </script>
  8. Exercice 02

    1. Énoncé
    2. Solution
      • <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
         <script type="text/javascript">
            $(document).ready(function(){
              //Q1
              $("p").css({"background-color":"yellow",
              "display":"box","border":"3px solid red","padding":"10px",
              "margin": "10px"});
              //Q2
              $('#P2').click(function(){
                $('#P2').after($('#P1'));
              });
              //Q3
              $("p#P3").click(function(){
                $("p#P3").html("<b>3.</b>Le site apcpedagogie.com , vous accompagnera vers la réussite.");
              });
              //Q4
              $("p#P3").dblclick(function(){
                $("p#P3").append(" C'est un site de formation");
              });
             //Q5
              $("a#jQuery").hover(function(){
                alert($(this).html());
              });
               //Q6
              $('#unDiv').html('Salut les amis');
               //Q7
               $("#unDiv").click(function(){
                $('#unDiv').html($('title').html());
               });
               //Q8
              $('#unDiv').after('<b>Ceci est un texte ajouté "after" la balise div</b>');
               //Q9
              $(".idDiv").css("padding","10px");
              //Q10
             // $(".idDiv p").not(":first").css("margin-left","30px");
             $("#P4").click(function(){
              var marginLeft = 20;
              $(".idDiv p").not(":first").each(function() {
                $(this).css("margin-left",marginLeft+"px");
                marginLeft +=20;
              });
            });
        });
        </script>

Abonnez vous à notre chaîne YouTube gratuitement