TP2 jQuery

TP2 jQuery

  1. Objectifs

    • Etre capable de manipuler jQuery.



  2. 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>
      </br> 
      
    • Questions
      1. Utiliser l’élément HTML “button” pour ajouter les boutons dont les textes sont les suivants:
        1. Colorer le texte
        2. Organiser sémantiquement le texte
        3. Mettre des titres
        4. Regrouper les titres
        5. Transformer les liens en boutons
        6. Supprimer les liens
        7. Regrouper les liens
        8. Dupliquer le texte
        9. Nouveau texte en Gras
        10. Enlever le texte en gras
        11. Enlever le texte en italique
        12. Enlever le texte décoré
        13. Vider les boutons
        14. Voir le code
      2. Dans fichier d’extension .js créer une fonction Jquery qui sert à répondre aux texte de chaque bouton crée précédemment
      3. N’utiliser pas les événements onclick de chaque bouton pour l’appel des fonctions



Abonnez vous à notre chaîne YouTube gratuitement