TP2 jQuery

Objectifs

• Être capable de manipuler jQuery.

Exercice 01

• Soit le fichier HTML suivant à copier:

<div id="contenu">
  <span class="titre1"> Le <strong>jQuery</strong></span>
  Le <strong>jQuery</strong> est une <span class="rouge">bibliothèque JavaScript</span> libre et multi-plateforme créée pour faciliter l’écriture de scripts côté client dans le code HTML.
  <strong>JQuery</strong> est une <span class="orange">bibliothèque</span> de <span class="gras"> 
    fonctions en JavaScript</span>. C’est une librairie légère : « écrire moins, faire plus »
  <span class="titre2"> les fonctionnalités jQuery</span>
  Cette <a href="#">bibliothèque</a> contient les fonctionnalités suivante.
  <ul>
    <li>Sélection des éléments <span class="rouge">HTML</span></li> 
    <li>Manipulation des éléments HTML</li>
    <li>Manipulation du <span class="orange">CSS</span></li>
    <li>Fonctions d’événements HTML</li>
    <li>Effets <span class="bleu">JavaScript</span> et animations</li>
    <li>Parcours et modification du <span class="gras">DOM</span></li>
    <li>Ajax</li>
  </ul>
  <span class="titre2"> bibliothèque javascript</span>
  <p>C’est une bibliothèque javascript open-source et multibrowser. Elle permet de parcourir et de manipuler très facilement le <a href="#">DOM</a> des pages <span class="souligne">Web</span> avec la syntaxe fortement similaire à celle d’XPath.</p>
  <p>JQuery permet par exemple de changer / ajouter une classe <a href="#">CSS</a>, créer des animations, modifier des attributs, etc.</p>
  <p class="italique vert gras"><span class="rouge">jQuery</span> est une bibliothèque JavaScript rapide et concise qui simplifie la navigation dans les documents HTML, la gestion des événements, l’animation et les interactions Ajax pour un développement Web rapide.</p>
  <p class="barre">Dans ce cours, je vais essayer de partager mes connaissance, mes expériences pour jQuery afin de vous aider à comprendre comment cette bibliothèque fonctionne et vous permettre d’en tirer le meilleure parti.Si vos précédentes tentatives de développement JavaScript vous ont laissé perplexe, ils vous aideront à franchir les obstacles dressés par AJAX, les événements, les effets et les fonctionnalités avancées du langage JavaScript.</p>
  <span class="titre2">Texte nouvellement ajouté</span>
  <div id="divAremplir">
  </div>
</div>

• Questions
  1. Utiliser l'élément HTML "button" pour ajouter les boutons dont les textes sont les suivants:
     • Colorer le texte
     • Organiser sémantiquement le texte
     • Mettre des titres
     • Regrouper les titres
     • Transformer les liens en boutons
     • Supprimer les liens
     • Regrouper les liens
     • Dupliquer le texte
     • Nouveau texte en Gras
     • Enlever le texte en gras
     • Enlever le texte en italique
     • Enlever le texte décoré
     • Vider les boutons
     • Voir le code
  2. Dans fichier d’extension .js créer une fonction Jquery qui sert à répondre aux textes de chaque bouton créé précédemment.
  3. N'utilisez pas les événements onclick de chaque bouton pour l'appel des fonctions (utiliser plutôt les Event Listeners de jQuery).