Correction TP3-2 jQuery
Correction TP3-2 jQuery
-
Objectifs
- Après la réalisation du TP3 jQuery vous serez capable de manipuler les événements souris et clavier en jQuery.
- Avant de commencer les exercices visitez la page et la page
-
Exercice 02
-
Énoncé
-
Solution
-
Exercice 03
-
Énoncé
-
Vous pouvez visualiser l’énoncé de l’exercice
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Méthode keydown</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!--On ecrit notre code JavaScript / jQuery-->
<script>
$(document).ready(function() {
var taille = 15;
var augmentation = 1;
var tailleMax = 30;
var tailleMin= 10;
$('#agrandir').click(function() {
taille +=1;
if(taille >= tailleMax)
{
taille = tailleMax;
}
$('#text').stop().animate({fontSize: taille+"px"},300);
$('#sizeAgr').text(taille+"px");
$('#sizeDim').text(taille+"px");
});
$('#diminuer').click(function() {
taille -=1;
if(taille <= tailleMin)
{
taille = tailleMin;
}
$('#text').stop().animate({fontSize: taille+"px"},300);
$('#sizeDim').text(taille+"px");
$('#sizeAgr').text(taille+"px");
});
});
</script>
</head>
<body>
<h1>Gestion d'évènements en jQuery</h1>
<div id="text">
<ul>
<li>Comme son nom l’indique, c’est quelque-chose, une action plus précisément, qui survient à la suite d’un déclencheur spécifique.</li>
<li>Il s’agit d’une action utilisateur, lorsque vous cliquez sur un bouton pour ouvrir ou fermer une fenêtre, vous déclencher un événement, qui en fonction de conditions requises, va exécuter le code chargé de réaliser l’action que vous avez demandée.</li></ul>
</div>
<div><button id="agrandir">Agrandir</button> Police dutexte
<span id="sizeAgr"></span>
</br></br><button id="diminuer">Diminuer</button> Police dutexte
<span id="sizeDim"></span>
</div>
</body>
</html>
-
Vous pouvez visualiser l’énoncé de l’exercice
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>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$(document).ready(function(){
//Lorsque la souris entre dans le div...
$("div#div").mouseenter(function(){
//...On ajoute une couleur de fond au div
$(this).css({"background-color":"lightBlue",
"border":"2px solid rgb(234,184,34)"});
});
//Lorsque la souris ressort du div...
$("div#div").mouseleave(function(){
//...On remet un fond blanchedalmond et bordure 1px
$(this).css({"background-color":"blanchedalmond",
"border":"1px solid rgb(234,184,34)"});
});
$("div#div").click(function(){
//...On remet un fond blanchedalmond
$(this).css({"background-color":"rgb(205, 245, 255)",
"border":"1px solid rgb(255, 255, 255)"});
});
$("div#div").dblclick(function(){
//...On remet un fond blanchedalmond
$(this).css({"background-color":"rgb(205, 255, 213)",
"border":"1px solid rgb(255, 255, 255)"});
});
});
</script>
<style>
#div{background-color: blanchedalmond;
border: 1px solid rgb(234,184,34);
border-radius: 10px;
width: 500px;
}
h2, p{
margin: 0px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container pt-4 mt-4">
<div class="row" id="div">
<h1>Cours jQuery</h1>
<div id="div">
<h3>Les événéments liés à la souris</h3>
<p class="afficher">Dans cette leçon, nous allons découvrir les méthodes
jQuery nous permettant de gérer les événements les plus communs liés à la
souris (clic, passage de la souris sur un élément, etc.). </p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<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>Exercice 04
-
Énoncé
-
Solution
-
HTML
-
CSS
-
JQUERY
-
Vous pouvez visualiser l’énoncé de l’exercice
<!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>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<section>
<div id="div1">
<h1>Joyeux anniversaire</h1>
<span>click me</span>
</div>
<div id="div2">
<p>Tu es un super ami</p>
</div>
<div id="div3">
<p>Aujourd'hui c'est ton anniversaire</p>
</div>
<div id="div4">
<p>Je te souhaite le meilleur !</p>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<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>@font-face {
font-family: 'Indie Flower';
src: url('IndieFlower.ttf');
}
body {
background-color: #BBE7D6;
text-align: center;
font-family: 'Indie Flower', cursive;
}
div {
width: 400px;
padding: 20px;
height: auto;
background-color: #fff;
margin: 50px auto;
border: 2px solid #000;
border-radius: 10px;
cursor: pointer;
}
h1 {
display: inline-block;
}
span {
background-color: #BBE7D6;
color: #fff;
padding: 5px;
border-radius: 10px;
}
p {
font-size: 20px;
font-weight: bold;
}
#div2 {
background-color: #FCEDB6;
}
#div3 {
background-color: #B2ECF7;
}
#div4 {
background-color: #FCC197;
} $(function() {
/* Ajout de l'élément audio */
var sound = document.createElement("audio");;
sound.src = "party_horn-Mike_Koenig.mp3";
sound.autoPlay = false;
sound.preLoad = true;
/* Les 3 paragraphes sont cachés */
$("#div2").hide();
$("#div3").hide();
$("#div4").hide();
/* Affichage successif des paragraphes */
$("#div1").on('click', function() {
$("#div2").show();
});
$("#div2").on('click', function() {
$("#div3").show();
});
$("#div3").on('click', function() {
$("#div4").show();
});
/* Déclenchement du son et modification du background */
$("#div4").on('click', function() {
sound.play();
$("body").css("background-image", "url(birthday-wallpapers.jpg)")
});
});