TP6 jQuery

TP6 jQuery

  1. Objectifs

    • Comprendre les bases d’usage de la bibliothèque jQuery
  2. Exercice 01

    1. Énoncé
      • Soit le document HTML suivant :
      • <style>.inner{ background:#ffff00; }
            .idDiv{border: 2px solid burlywood;
            border-radius: 2em;width:500px;}
        </style>
        </head>
          <body>
            <div class="container idDiv">
              <div class="row">
                <div class="col-md-8">
                  <h2>Ceci est le titre</h2>
                      <div class="inner">Premier Paragraphe</div>
                      <br />
                      <div class="inner">Deuxième Paragraphe</div>
                      <br />
                      <div class="inner">Troisème Paragraphe</div>
                      <br />
                    <button class="btn btn-primary btn-block">Ajouter</button>
                </div>
              </div>
            </div>
      • Créer les gestionnaires jQuery qui permettent de:
        • Créer un élément de paragraphe avec du texte "paragraphe nouvellement crée (nombre) " et ajouter-le à la fin du corps du document.
        • Chaque élément paragraphe est suivi d’un numéro incrémenté chaque fois quand clique sur le bouton
        • Une couleur est attribuée arbitrairement à chaque paragraphe (bordure différent au arrière-plan
        • L’image suivant représente le résultat attendue
        • TP6 jQuery




    2. Solution
      • Essayez de faire l’exercice de votre côté avant de regarder la Solution !
  3. Exercice 02

    1. Énoncé
      • Soit le document HTML suivant :
      • <style>
            .idDiv{border: 2px solid blue;
            border-radius: 3px;margin: 10px;}
        </style>
        </head>
          </head>
          </head>
          <body>
            <div class="container ">
              <div class="row">
                <div class="col-md-8">
                  <div class="idDiv">
                    
                    
                    <a href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/le-jquery" id="jQuery">jQuery</a>
        <h3 id="titre">Manipulation du contenu HTML avec jQuery</h3>
        <div id="unDiv"> Salut tout le monde !</div>
        <p id="P1"><b>2.</b>Etre capable de récupérer le contenu textuel d’un élément jQuery,
           de modifier son code HTML, de lui ajouter un autre élément avant ou après,
          de lui incorporer un autre élément, de l’envelopper d’un autre élément,
          ainsi que de le copier, de le supprimer ou de le vider en jQuery.</p>
        <p id="P2"><b>1.</b>Connaitre les différentes méthodes qui permettent de manipuler le contenu d’une page HTML avec jQuery</p>
        <p id="P3"><b>3.</b>Cette paragraphe sera changée.</p>
        <p id="P4"><b>4.</b>Cliquer pour ajouter des marges dégradées.</p>
        <a href="https://apcpedagogie.com">un lien pour tester</a>
        
        
        
                 </div>
                </div>
              </div>
            </div>
      • En utilisant Jquery, répondre aux questions suivantes
        1. Créer les propriétés et les valeurs suivantes,et les appliquer au démarrage du document aux paragrapheس du document:
          • "background-color":"yellow",
            "display":"box","border":"3px solid red","padding":"10px",
            "margin": "10px"
        2. Créer l’événement clic qui permet de déplacer le deuxième paragraphe vers le début
        3. Modifier le contenu de la balise <p> dont l’id est "P3 " par le texte suivant : "<b></b>Le site apcpedagogie.com , vous accompagnera vers la réussite.", après un clic sur le paragraphe.
        4. Lors d’un double clic sur le le paragraphe, ajouter au texte précédent, la phrase " C’est un site de formation de jQuery"
        5. Afficher l’ancre du lien <a> dont l-id est “jQuery” dans une boite de dialogue
        6. Remplacer le texte "Salut tout le monde !" par "Salut les amis"
        7. Lors d’un clic sur le titre de la page , remplacer le texte "Salut tout le monde !" par le titre de la page
        8. Afficher le texte suivant "<b>Ceci est un texte ajouté "after" la balise div</b>" après la balise <div id="test"> Salut tout le monde !
  • Ajouter un padding de 10px au classe idDiv
  • Lors d’un clic sur le quatrième paragraphe, ajouter une marge gauche de 20px dans les balises "P" excluant la première balise sans interagir avec html. par exemple premier p = marge gauche = 0; deuxième P = marge gauche = 40 pixels; troisième P = marge gauche = 60px ;
  • Solution
    • Essayez de faire l’exercice de votre côté avant de regarder la Solution !

    Abonnez vous à notre chaîne YouTube gratuitement