Manipulations de base avec jQuery jquery03

Cet exercice consiste à essayer certaines fonctionnalités de jQuery permettant de manipuler des éléments du DOM.

Consignes de l’exercice

Mise en place de l’exercice

Créez, à l’emplacement de votre choix, un dossier racine vous permettant de stocker la totalité des fichiers de l’exercice.

Créez le fichier base_jquery_01.html avec le contenu suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Exemples avec jQuery</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Fondus</h1>
        
        <h2>Masquer</h2>
        <p>Paragraphe 1 : Lorem ipsum dolor sit amet, consectetur  
            quam at dictum mattis, dui felis faucibus dui, ut finibus quam sem non 
            eros. Ut tempor lacus lectus, ut egestas mi convallis eget. Morbi 
            porttitor ex at posuere maximus. Suspendisse potenti. Phasellus 
            consequat, nulla quis posuere sagittis, tellus velit commodo elit, 
            sit amet accumsan felis augue sit amet sapien. Suspendisse fringilla 
            auctor elit, id vehicula lorem tincidunt sit amet. Nulla sem turpis, 
            blandit eu arcu ac, facilisis faucibus sapien. Maecenas auctor eget 
            metus vel gravida. Praesent elementum viverra dolor. </p>
        
		
        <h2>Afficher</h2>
        <p>Paragraphe 2 : Lorem ipsum dolor sit amet, consectetur 
            quam at dictum mattis, dui felis faucibus dui, ut finibus quam sem non 
            eros. Ut tempor lacus lectus, ut egestas mi convallis eget. Morbi 
            porttitor ex at posuere maximus. Suspendisse potenti. Phasellus 
            consequat, nulla quis posuere sagittis, tellus velit commodo elit, 
            sit amet accumsan felis augue sit amet sapien. Suspendisse fringilla 
            auctor elit, id vehicula lorem tincidunt sit amet. Nulla sem turpis, 
            blandit eu arcu ac, facilisis faucibus sapien. Maecenas auctor eget 
            metus vel gravida. Praesent elementum viverra dolor. </p>
        
		
        <h2>Alterner</h2>
        <p>Paragraphe 3 : Lorem ipsum dolor sit amet, consectetur 
            quam at dictum mattis, dui felis faucibus dui, ut finibus quam sem non 
            eros. Ut tempor lacus lectus, ut egestas mi convallis eget. Morbi 
            porttitor ex at posuere maximus. Suspendisse potenti. Phasellus 
            consequat, nulla quis posuere sagittis, tellus velit commodo elit, 
            sit amet accumsan felis augue sit amet sapien. Suspendisse fringilla 
            auctor elit, id vehicula lorem tincidunt sit amet. Nulla sem turpis, 
            blandit eu arcu ac, facilisis faucibus sapien. Maecenas auctor eget 
            metus vel gravida. Praesent elementum viverra dolor. </p>
    </body>
</html>

Intégrez la bibliothèque jQuery à votre fichier base_jquery_01.html. Vous pouvez la télécharger ou l’intégrer via un CDN.

Créez un fichier javascript vierge intitulé base_jquery_scripts.js dans votre dossier racine et liez ce fichier à votre page base_jquery_01.html.

Ce fichier doit être chargé après la bibliothèque jQuery.

Effet de fondu

HTML : Directement en dessous du premier titre <h2>, ajoutez un bouton html sur lequel vous ajoutez l’id fondu-masquer-btn.

<p><button id="fondu-masquer-btn">Masquer</button></p>

HTML : Ajoutez l’id fondu-masquer-content sur le paragraphe juste en dessous.

JS : Préparez le fichier base_jquery_scripts.js avec le code jQuery adapté pour attendre que le DOM soit disponible.

JS : Préparez un écouteur pour surveiller les cliques sur le bouton fondu-masquer-btn.

JS : Ajoutez une action permettant de masquer le paragraphe fondu-masquer-content avec un effet de fondu dès qu’un clique est détecté sur le bouton fondu-masquer-btn.

HTML : Directement en dessous du second titre <h2>, ajoutez un deuxième bouton html sur lequel vous ajoutez l’id fondu-afficher-btn.

HTML : Ajoutez l’id fondu-afficher-content sur le paragraphe juste en dessous. Puis masquez le paragraphe avec la propriété CSS adaptée (via une feuille de style externe/interne ou un style inline).

JS : Faites en sorte de pouvoir afficher le paragraphe fondu-afficher-content suite à un clique sur le bouton fondu-afficher-btn.

HTML : En dessous du troisième titre de niveau 2, ajoutez un dernier bouton permettant de masquer et d’afficher en alternance le paragraphe suivant.

Effet de glissement

HTML : Dupliquez le fichier base_jquery_01.html et enregistrez la copie sous le nom base_jquery_02.html.

JS : Créez des écouteurs pour les trois boutons afin d’afficher/masquer les mêmes éléments que précédemment mais cette fois-ci en utilisant un effet de glissement. Pensez bien à adapter tous les id que vous avez appliqués précédemment.

Manipulation de propriétés CSS

Créez le fichier base_jquery_03.html avec le contenu suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Exemples avec jQuery</title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="base_jquery_scripts.js" type="text/javascript"></script>
        <link rel="stylesheet" href="base_jquery_style.css" type="text/css">
    </head>
    <body>
        <h1>jQuery</h1>
        
        <h2>Changer la largeur</h2>
        <p>
            <button id="css-width-btn1">Largeur 50%</button>
            <button id="css-width-btn2">Largeur 100%</button>
        </p>
        <p id="css-width" class="couleur">Lorem ipsum dolor sit amet, consectetur  
            quam at dictum mattis, dui felis faucibus dui, ut finibus quam sem non 
            eros. Ut tempor lacus lectus, ut egestas mi convallis eget. Morbi 
            porttitor ex at posuere maximus. Suspendisse potenti. Phasellus 
            consequat, nulla quis posuere sagittis, tellus velit commodo elit, 
            sit amet accumsan felis augue sit amet sapien. Suspendisse fringilla 
            auctor elit, id vehicula lorem tincidunt sit amet. Nulla sem turpis, 
            blandit eu arcu ac, facilisis faucibus sapien. Maecenas auctor eget 
            metus vel gravida. Praesent elementum viverra dolor.</p>
        
        <h2>Changer la couleur</h2>
        <p>
            <button id="css-couleur-btn1">Couleur 2</button>
            <button id="css-couleur-btn2">Couleur originale</button>
            <button id="css-couleur-btn3">Afficher le code couleur</button>
            <button id="css-couleur-btn4">Alterner la couleur</button>
        </p>
        <p id="css-couleur" class="couleur">Lorem ipsum dolor sit amet, consectetur  
            quam at dictum mattis, dui felis faucibus dui, ut finibus quam sem non 
            eros. Ut tempor lacus lectus, ut egestas mi convallis eget. Morbi 
            porttitor ex at posuere maximus. Suspendisse potenti. Phasellus 
            consequat, nulla quis posuere sagittis, tellus velit commodo elit, 
            sit amet accumsan felis augue sit amet sapien. Suspendisse fringilla 
            auctor elit, id vehicula lorem tincidunt sit amet. Nulla sem turpis, 
            blandit eu arcu ac, facilisis faucibus sapien. Maecenas auctor eget 
            metus vel gravida. Praesent elementum viverra dolor.</p>
        
        <h2>Modifier une classe</h2>
        <p>
            <button id="css-classe-btn1">Supprimer classe</button>
            <button id="css-classe-btn2">Remettre classe</button>
            <button id="css-classe-btn3">Changer classe</button>
        </p>
        <p id="css-classe" class="couleur-2">Lorem ipsum dolor sit amet, consectetur  
            quam at dictum mattis, dui felis faucibus dui, ut finibus quam sem non 
            eros. Ut tempor lacus lectus, ut egestas mi convallis eget. Morbi 
            porttitor ex at posuere maximus. Suspendisse potenti. Phasellus 
            consequat, nulla quis posuere sagittis, tellus velit commodo elit, 
            sit amet accumsan felis augue sit amet sapien. Suspendisse fringilla 
            auctor elit, id vehicula lorem tincidunt sit amet. Nulla sem turpis, 
            blandit eu arcu ac, facilisis faucibus sapien. Maecenas auctor eget 
            metus vel gravida. Praesent elementum viverra dolor.</p>
        
    </body>
</html>

Créez le fichier base_jquery_03.css avec le contenu suivant :

.couleur {
    background-color: #7fe0c9 ;
}

.couleur-2 {
    background-color: #c897fe ;
    border: 3px solid #6200fe ;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}

.couleur-3 {
    background-color: #f7cc8c ;
    border: 0px solid #93754b ;
    border-left-width: 10px;
    padding: 15px;  
    width: 90%;
    margin:auto;
    text-transform: uppercase;
}

JS : Ajoutez un écouteur pour surveiller les cliques sur le bouton avec l’id css-width-btn1.

JS : Sur l’écouteur créé à la question précédente, ajoutez une action permettant de changer la largeur du paragraphe css-width pour la passer à 50%.

JS : Faites en sorte que le paragraphe retrouve sa taille normale suite à un clique sur le bouton avec l’id css-width-btn2.

JS : Créez le code permettant de changer la couleur du paragraphe css-couleur lorsque l’on clique sur le bouton css-couleur-btn1.

JS : Créez le code permettant remettre la couleur initiale du paragraphe css-couleur lorsque l’on clique sur le bouton css-couleur-btn2.

JS : Créez le code permettant de récupérer la couleur du paragraphe css-couleur et de l’afficher dans un message alert() lorsque l’on clique sur le bouton css-couleur-btn3.

JS : Créez le code permettant d’alterner entre les deux couleurs lorsque l’on clique sur le bouton css-couleur-btn4.

JS : Créez le code permettant de supprimer la classe css du paragraphe css-classe lorsque l’on clique sur le bouton css-classe-btn1.

JS : Créez le code permettant de remettre la classe couleur-2 sur le paragraphe css-classe lorsque l’on clique sur le bouton css-classe-btn2.

JS : Créez le code permettant d’enlever la classe du paragraphe css-classe pour la remplacer par la classe couleur-3 lorsque l’on clique sur le bouton css-classe-btn3.

Manipulation de contenu

Créez le fichier base_jquery_04.html avec le contenu suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Exemples avec jQuery</title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="base_jquery_scripts.js" type="text/javascript"></script>
    </head>
    <body>
        <h1>jQuery</h1>
        
        <h2>Manipuler du contenu</h2>
        <p>
            <button id="contenu-btn1">Hola</button>
            <button id="contenu-btn2">Hello</button>
            <button id="contenu-btn3">Alert()</button>
            <button id="contenu-btn4">+ Bonjour</button>
        </p>
        <p id="contenu">Hello world</p>
        
    </body>
</html>

JS : Créez le code permettant de remplacer le contenu du paragraphe contenu par le texte « Hola mundo » lorsque l’on clique sur le bouton contenu-btn1.

JS : Créez le code permettant de remettre le contenu initial du paragraphe contenu lorsque l’on clique sur le bouton contenu-btn2.

JS : Créez le code permettant de récupérer le contenu du paragraphe contenu pour l’afficher dans un message d’alerte lorsque l’on clique sur le bouton contenu-btn3.

JS : Créez le code permettant d’ajouter le texte « (Bonjour le monde) » à la suite du texte contenu dans le paragraphe contenu lorsque l’on clique sur le bouton contenu-btn4.

JS : Créez le code permettant d’effacer le texte contenu dans le paragraphe contenu lorsque l’on clique sur le bouton contenu-btn5.

Correction de l’exercice

Vous trouverez en cliquant sur le lien ci-dessous la correction de cet exercice :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.