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

Correction TP6 jQuery

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

    • 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="http://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="http://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