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 01

1. Énoncé

   1. Merci d’utiliser les termes techniques appropriés pour répondre à cette question : que permet de faire l’instruction jQuery ci-dessous ?

   $("div.temp").one("click", function(){
        $(this).prepend("<b>À supprimer </b>");
        $(this).css({border:"1px solid","background-color":"#CCEECC", opacity:0.5})
        .animate({margin:"10px",padding:"10px"},1000)
   });

   2. Créer un script qui permet de faire une alerte quand on click sur un image et une autre alerte quand on passe simplement dessus.
   3. Insérer deux paragraphes dans une page html. Affecter aux deux paragraphes le gestionnaire clickP associé au clic. Cette fonction change la couleur de l'élément cliqué en bleu.
   4. Dans le même document créer un script dont le rôle est lorsqu'on appuie sur la touche entrée, il y a une alerte

2. Solution

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

Exercice 02

1. Énoncé

   1. Écrivez le code HTML et le code CSS permettant d’avoir 6 blocs <div> de classe CSS "barre", avec une couleur de fond rgba(237,255,40,1) situés les uns en dessous des autres.
   2. Créez six champs texte d'identifiants "txt01", "txt02", "txt03","txt04","txt05" et "txt06".
   3. Écrivez une classe CSS "div" qui permet de disposer chacun des champsde texte à gauche de la barre d’histogramme qui lui correspond, comme montré dans le schéma suivant.

   

   4. Donnez une largeur de 400 pixels par défaut à tous les éléments de la classe "div".
   5. Écrivez un code jQuery qui donne à la largeur de la couleur de chaque barre (le bloc div) la valeur indiquée dans le champ de texte correspond.
   6. Ajoutez le code jQuery qui ajoute le caractère pourcentage à chaque champs de texte, dès que l'utilisateur le quitte, comme le montre le schéma suivant

   

   7. Écrivez le code jQuery qui permet d'afficher le chiffre, saisie dans le champs de texte , au milieu de l'histogramme, comme le montre le schéma suivant

   

   8. Solution

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