TP6 jQuery

Objectifs

Comprendre les bases d’usage de la bibliothèque jQuery

Exercice 01

É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">Troisième Paragraphe</div>
        <br />
        <button class="btn btn-primary w-100">Ajouter</button>
      </div>
    </div>
  </div>
</body>

Créer les gestionnaires jQuery qui permettent de :
- Créer un élément de paragraphe avec du texte "paragraphe nouvellement crée (nombre)" et l'ajouter à la fin du corps du document.
- Chaque élément paragraphe est suivi d'un numéro incrémenté chaque fois qu'on clique sur le bouton.
- Une couleur est attribuée arbitrairement à chaque paragraphe (bordure différente ou arrière-plan).
- L'image suivante représente le résultat attendu :

TP6 jQuery

Solution
- Essayez de faire l'exercice de votre côté avant de regarder la Solution !

Exercice 02

Énoncé
- Soit le document HTML suivant :
```
<style>
    .idDiv { border: 2px solid blue; border-radius: 3px; margin: 10px; }
</style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <div class="idDiv">
          <a href="/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> Ce paragraphe sera changé.</p>
          <p id="P4"><b>4.</b> Cliquer pour ajouter des marges dégradées.</p>
          <a href="http://apcpedagogie.com">un lien pour tester</a>
        </div>
      </div>
    </div>
  </div>
</body>
                
```
- En utilisant jQuery, répondez aux questions suivantes :
  1. Créer les propriétés et les valeurs suivantes, et les appliquer au démarrage du document aux paragraphes 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 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="unDiv">.
  9. Ajouter un padding de 10px à la classe idDiv.
  10. 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 = 40px; troisième p = marge gauche = 60px;
Solution
- Essayez de faire l'exercice de votre côté avant de regarder la Solution !

Sommaire du cours

Autres catégories

Objectifs

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution