mars13code · February 6, 2018 22:54
diff --git a/jquery-events.html b/jquery-events.html
 <!DOCTYPE html>
 <html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Exos jQuery</title>
    </head>
    <body>
        <!-- 
        POUR LA FACILITE DE LECTURE DU CODE DES EXOS
        ON REGROUPE LE HTML ET CSS AVEC LE JS DE CHAQUE EXO
        -->
        
        <!-- http://code.jquery.com/ -->
        <!-- charger le code de jQuery -->
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
 			integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 			crossorigin="anonymous"></script>

        <section class="exo1">
            <h2>EXO1</h2>
            <div>(cliquer sur le titre)</div>
            <!-- ajouter son code qui utilise jQuery ($) -->
    		<script>

 $(function(){
   // attendre que le DOM soit pret
   // avant d'exécuter son code
   
   // afficher une alerte quand on clique sur la balise h2
   $('.exo1 h2').on('click', function(){
      alert('vous avez cliqué sur h2'); 
   });
   
 });

    		</script>
        </section>
        
        <section class="exo2">
            <h2>EXO2</h2>
            <button class="boutonAjouter">AJOUTER CLASSE</button>
            <button class="boutonEnlever">ENLEVER CLASSE</button>
            <button class="boutonToggle">SWITCHER CLASSE</button>
            
            <style>
 .exo2 .cible.actif {
    background-color:#00FF00;
 }                
            </style>
            <div class="cible">CONTENU</div>
            <!-- ajouter son code qui utilise jQuery ($) -->
    		<script>

 $(function(){
   // attendre que le DOM soit pret
   // avant d'exécuter son code
   
   // cliquer sur un bouton ajoute/enleve la class .actif
   
   $('.exo2 .boutonAjouter').on('click', function(){
        $(".exo2 .cible").addClass("actif");
   });

   $('.exo2 .boutonEnlever').on('click', function(){
        $(".exo2 .cible").removeClass("actif");
   });

   $('.exo2 .boutonToggle').on('click', function(){
        $(".exo2 .cible").toggleClass("actif");
   });
   
 });

    		</script>
        </section>

        <section class="exo10">
            <h2>EXO10</h2>
            <input type="text" name="login">
            <div class="cible">CONTENU</div>
            <style>
 input.erreur {
    background-color:#ffaaaa;
 }
            </style>
            <!-- ajouter son code qui utilise jQuery ($) -->
    		<script>

 $(function(){
   // attendre que le DOM soit pret
   // avant d'exécuter son code
   
   // copier le texte entre dans le champ input
   $('.exo10 input[name=login]').on('input', function(){
       var saisie = $(this).val();
        
        // si la longueur est plus petite que 3 caractères 
        // alors ajouter la classe erreur
        // sinon enlever la classe erreur
        if (saisie.length < 3)
        {
            $(".exo10 .cible").html('il manque encore ' 
 				    + (3 - saisie.length) 
 				    + ' lettres');
            $(this).addClass("erreur");
        }
        else
        {
            $(".exo10 .cible").html('bonjour ' + saisie);
            $(this).removeClass("erreur");
        }
   });

 });

    		</script>
        </section>

        
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="utf-8">
	<title>Exos jQuery</title>
	</head>
	<body>
	<!--
	POUR LA FACILITE DE LECTURE DU CODE DES EXOS
	ON REGROUPE LE HTML ET CSS AVEC LE JS DE CHAQUE EXO
	-->

	<!-- http://code.jquery.com/ -->
	<!-- charger le code de jQuery -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"></script>

	<section class="exo1">
	<h2>EXO1</h2>
	<div>(cliquer sur le titre)</div>
	<!-- ajouter son code qui utilise jQuery ($) -->
	<script>

	$(function(){
	// attendre que le DOM soit pret
	// avant d'exécuter son code

	// afficher une alerte quand on clique sur la balise h2
	$('.exo1 h2').on('click', function(){
	alert('vous avez cliqué sur h2');
	});

	});

	</script>
	</section>

	<section class="exo2">
	<h2>EXO2</h2>
	<button class="boutonAjouter">AJOUTER CLASSE</button>
	<button class="boutonEnlever">ENLEVER CLASSE</button>
	<button class="boutonToggle">SWITCHER CLASSE</button>

	<style>
	.exo2 .cible.actif {
	background-color:#00FF00;
	}
	</style>
	<div class="cible">CONTENU</div>
	<!-- ajouter son code qui utilise jQuery ($) -->
	<script>

	$(function(){
	// attendre que le DOM soit pret
	// avant d'exécuter son code

	// cliquer sur un bouton ajoute/enleve la class .actif

	$('.exo2 .boutonAjouter').on('click', function(){
	$(".exo2 .cible").addClass("actif");
	});

	$('.exo2 .boutonEnlever').on('click', function(){
	$(".exo2 .cible").removeClass("actif");
	});

	$('.exo2 .boutonToggle').on('click', function(){
	$(".exo2 .cible").toggleClass("actif");
	});

	});

	</script>
	</section>

	<section class="exo10">
	<h2>EXO10</h2>
	<input type="text" name="login">
	<div class="cible">CONTENU</div>
	<style>
	input.erreur {
	background-color:#ffaaaa;
	}
	</style>
	<!-- ajouter son code qui utilise jQuery ($) -->
	<script>

	$(function(){
	// attendre que le DOM soit pret
	// avant d'exécuter son code

	// copier le texte entre dans le champ input
	$('.exo10 input[name=login]').on('input', function(){
	var saisie = $(this).val();

	// si la longueur est plus petite que 3 caractères
	// alors ajouter la classe erreur
	// sinon enlever la classe erreur
	if (saisie.length < 3)
	{
	$(".exo10 .cible").html('il manque encore '
	+ (3 - saisie.length)
	+ ' lettres');
	$(this).addClass("erreur");
	}
	else
	{
	$(".exo10 .cible").html('bonjour ' + saisie);
	$(this).removeClass("erreur");
	}
	});

	});

	</script>
	</section>


	</body>
	</html>