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.

<!DOCTYPE html>
<html>
    <head>
        <title>Exemples avec jQuery</title>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    </head>

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.

<!DOCTYPE html>
<html>
    <head>
        <title>Exemples avec jQuery</title>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
        <script src="base_jquery_scripts.js" type="text/javascript"></script>
    </head>

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.

Ressource : https://api.jquery.com/ready/

$(document).ready(function() {
	
    // Le reste du code javascript sera ici !
	
});

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

Ressource : https://api.jquery.com/click/

$(document).ready(function() {
    $("#fondu-masquer-btn").click(function (){
		
    });
});

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.

Ressource : https://api.jquery.com/fadeOut/

$(document).ready(function() {
    $("#fondu-masquer-btn").click(function (){
        $("#fondu-masquer-content").fadeOut();
    });
});

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).

<p id="fondu-masquer-content" style="display:none;">Lorem ipsum dolor sit amet, consectetur adipiscing 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>

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

$("#fondu-afficher-btn").click(function (){
    $("#fondu-masquer-content").fadeIn();
});

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.

https://api.jquery.com/fadeToggle

$("#fondu-alterner-btn").click(function (){
    $("#fondu-masquer-content").fadeToggle();
});

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.

Ressource : https://api.jquery.com/slideDown/

$('#glissement-masquer-btn').click(function () {
    $('#glissement-masquer-contenu').slideUp();
});
$('#glissement-afficher-btn').click(function () {
    $('#glissement-afficher-contenu').slideDown();
});
$('#glissement-alterner-btn').click(function () {
    $('#glissement-alterner-contenu').slideToggle();
});

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 clics sur le bouton avec l’id css-width-btn1.

$('#css-width-btn1').click(function(){
    // à faire en cas de click
});

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%.

Ressource : https://api.jquery.com/css/

$('#css-width-btn1').click(function () {
    $('#css-width').css('width','50%');
});

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

$('#css-width-btn2').click(function () {
    $('#css-width').css('width','100%');
});

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

$('#css-couleur-btn1').click(function () {
    $('#css-couleur').css('background-color','#ffeea7');
});

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

$('#css-couleur-btn2').click(function () {
    $('#css-couleur').css('background-color','#7fe0c9');
});

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.

$('#css-couleur-btn3').click(function () {
    var color = $('#css-couleur').css('background-color');
    alert('Le code couleur est : '+color);
});

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

Notez les codes rgb() des deux couleurs.
Créez une variable qui contient le nom de la couleur du paragraphe css-couleur.
Via une conditionnelle, comparez cette variable avec la couleur d’origine et créez un seconde variable avec l’autre couleur.
Appliquez la seconde couleur à l’élément html.

$('#css-couleur-btn4').click(function () {
    var color = $('#css-couleur').css('background-color');
    if(color == "rgb(127, 224, 201)"){ 
        var newcolor = "rgb(255, 238, 167)" ;
    } else {
        var newcolor = "rgb(127, 224, 201)" ;
    }
    $('#css-couleur').css('background-color',newcolor);
});

Une autre approche consisterai à gérer la couleur avec des classes et à alterner les classes.

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.

Ressource : https://api.jquery.com/removeclass/

$('#css-classe-btn1').click(function () {
    $('#css-classe').removeClass();
});

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.

$('#css-classe-btn2').click(function () {
    $('#css-classe').addClass('couleur-2');
});

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.

$('#css-classe-btn3').click(function () {
    $('#css-classe').removeClass().addClass('couleur-3');
});

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.

Ressource : https://api.jquery.com/html/

$('#contenu-btn1').click(function () {
    $('#contenu').html('Hola mundo');
});

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

$('#contenu-btn2').click(function () {
    $('#contenu').html('Hello world');
});

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.

$('#contenu-btn3').click(function () {
    var content = $('#contenu').html();
    alert(content);
});

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.

Ressource : https://api.jquery.com/append/

$('#contenu-btn4').click(function () {
    $('#contenu').append(' (Bonjour le monde)');
});

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

$('#contenu-btn5').click(function () {
    $('#contenu').html("");
});

Sauf mention contraire*, l'article Manipulations de base avec jQuery [jquery03] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.