TP3-1 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é

   • Soit le document HTML suivant :

   

   • Télécharger le texte d'ici : TP03-1 jQuery
   • Proposez du code jQuery pour faire ces manipulations
   • enlever les liens ;
   • enlever le texte en gras ;
   • enlever le texte en italique ;
   • enlever le texte décoré ;
   • vider les boutons ;
   • voir le code ;
   • transformer les liens en boutons ;
   • dupliquer le texte ;
   • regrouper les liens ;
   • mettre des titres ;
   • regrouper les titres ;
   • colorer le texte ;
   • organiser sémantiquement le texte ;

2. Solution

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

Exercice 02

1. Énoncé

   • Utiliser JQuery, HTML et CSS pour réaliser une simple calculatrice.
   • Cette calculatrice peut être utilisée avec la souris ou avec le clavier.
   • Elle permet de faire des opérations de base (multiplication, addition, soustraction, division), d’utiliser des chiffres entiers ou à décimales et de corriger ses erreurs de 2 façons : effacer tout le calcul ou effacer le dernier caractère.
   Elle doit avoir un fpnt-size Orbitron importé avec le CDN suivant

   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">

2. Le schéma de la figure suivante représente le résultat final



3. Solution

   • Essayez de faire l'exercice de votre côté avant de regarder la Solution !
   <! -- <script> $(document).ready(function(){ $("#liste1").on("click", "", modifierHTML); $("#liste2").on("click", "", lireTEXT); $("#liste3").on("click", "", diffHtmlText); $("#titre1").on("click", "", modifierUL); $("#titre2").on("click", "", modifierTitre); }); function modifierHTML(){ var nbli=$("#liste1 li").length+1; $("#liste1").html($("<li>J'aime mon site de formation <em>apcpedagogie.com</em> : "+nbli+"</li>")); } function lireTEXT(){ alert($("#liste2").text()); } function diffHtmlText(){ alert('Résultat avec text()' + $('#liste3').text() + 'Résultat avec html()' +$('#liste3').html()); } function modifierUL(){ $('ul').each(function(){ var element=$(this); element.replaceWith('<ol>'+element.html()+'</ol>'); }); } function modifierTitre(){ $('h3').each(function(){ var element=$(this); element.replaceWith('<h6>'+element.html()+'</h6>'); }); } </script> -->