jQuery cacher et afficher

jQuery hide() et show()

Avec jQuery, vous pouvez masquer et afficher des éléments HTML à l'aide des méthodes hide() et show() :

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide();
            });
            $("#show").click(function(){
                $("p").show();
            });
        });
    </script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

Exécutez le programme et essayez-le

Syntaxe :

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

Paramètre de vitesse facultatif Spécifie la vitesse de masquage/affichage, qui peut prendre les valeurs suivantes : "lent (lent)", "rapide (rapide)" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois le masquage ou l'affichage terminé.

L'exemple suivant montre la méthode hide() avec le paramètre speed :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide(1000);
            });
        });
    </script>
</head>
<body>
<button>隐藏</button>
<p>生活就是做出选择，一旦你做出了你的选择，你就必须活在你的决定中。</p>
</body>
</html>

Exécutez le programme pour l'essayer

jQuery toggle()

Avec jQuery, vous pouvez utiliser la méthode toggle() pour changer les méthodes hide() et show().

Afficher les éléments cachés et masquer les éléments affichés :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").toggle();
            });
        });
    </script>
</head>
<body>
<button>隐藏/显示</button>
<p>真正的失败不是你没有做成事，而是你甘心于失败。</p>
<p>一切都会好起来的，即使不是在今天，总有一天会的。</p>
</body>
</html>

Exécutez le programme et essayez-le

Syntaxe :

$(selector).toggle(speed,callback);

Le paramètre optionnel speed spécifie la vitesse de masquage/affichage, et peut prendre les valeurs suivantes : " lent", "rapide" ou millisecondes.

Le paramètre de rappel facultatif est le nom de la fonction à exécuter une fois la méthode toggle() terminée.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button>隐藏/显示</button> <p>真正的失败不是你没有做成事，而是你甘心于失败。</p> <p>一切都会好起来的，即使不是在今天，总有一天会的。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

jQuery cacher et afficher

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]