Back

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
        3. <!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
        3. <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
        3.  <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
        3. <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>

Manipulation du contenu HTML avec jQ 3-3
Sommaire du cours jQuery
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Correction application animate() V2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

La méthode animate() de jQuery v2
4 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …

Correction application animate()
3 juillet, 2020

Animation avec jQuery La méthode animate() de jQuery (Correction des applications) La méthode animate() de jQuery v2 (Correction des applications) Animation d’images en Jquery Animation de formulaire avec Jquery TP1 Animation JQuery (Correction) La méthode animate() de jQuery Objectifs Connaitre …