TP6 jQuery
TP6 jQuery
-
Objectifs
- Comprendre les bases d’usage de la bibliothèque jQuery
-
Exercice 01
-
Énoncé
- Soit le document HTML suivant :
- 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
-
Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
-
Exercice 02
-
Énoncé
- Soit le document HTML suivant :
- En utilisant Jquery, répondre aux questions suivantes
- Créer les propriétés et les valeurs suivantes,et les appliquer au démarrage du document aux paragrapheس du document:
- Créer l’événement clic qui permet de déplacer le deuxième paragraphe vers le début
- 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.
- 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"
- Afficher l’ancre du lien <a> dont l-id est « jQuery » dans une boite de dialogue
- Remplacer le texte "Salut tout le monde !" par "Salut les amis"
- Lors d’un clic sur le titre de la page , remplacer le texte "Salut tout le monde !" par le titre de la page
- 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 !
<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>
<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>"background-color":"yellow",
"display":"box","border":"3px solid red","padding":"10px",
"margin": "10px"Solution
- Essayez de faire l’exercice de votre côté avant de regarder la Solution !
