Maison >interface Web >Questions et réponses frontales >jquery cache et affiche les divs dynamiques

jquery cache et affiche les divs dynamiques

WBOYoriginal: 2023-05-18 20:50:061023parcourir

jQuery est une bibliothèque Javascript rapide, concise et puissante qui fournit des outils et des fonctions riches pour le développement Web. Dans le développement Web, jQuery peut être utilisé pour obtenir divers effets afin de rendre le site Web plus beau et plus facile à utiliser. Parmi eux, masquer et afficher les éléments div dynamiques est une exigence courante. Cet article explique comment utiliser jQuery pour obtenir cet effet.

Masquer et afficher les éléments div dynamiques, ce qui modifie en fait les propriétés CSS de l'élément. Plus précisément, lors du masquage d'un élément div, nous devons définir son attribut d'affichage sur none, afin que l'élément ne soit pas affiché. Lors de l'affichage d'un élément div, nous devons définir son attribut d'affichage sur block ou d'autres valeurs, de sorte que l'élément ; s'affichera à nouveau.

En utilisant jQuery, nous pouvons utiliser les deux manières suivantes pour masquer et afficher des éléments div dynamiques :

Utilisez les méthodes hide() et show()

L'utilisation des méthodes hide() et show() de jQuery est la plus simple, la manière la plus directe. Ces deux méthodes peuvent masquer et afficher des éléments directement sans définir de propriétés CSS de l'élément.

Ce qui suit est un exemple de code utilisant les méthodes hide() et show() :

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide and Show Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <button id="hide-btn">Hide</button>
    <button id="show-btn">Show</button>
    <div class="dynamic-div">This is a dynamic div element.</div>
    <script>
        $(document).ready(function() {
            $("#hide-btn").click(function() {
                $(".dynamic-div").hide();
            });
            $("#show-btn").click(function() {
                $(".dynamic-div").show();
            });
        });
    </script>
</body>
</html>

Dans le code ci-dessus, nous définissons un élément div avec la classe Dynamic-div et définissons son attribut d'affichage sur none, qui est la valeur par défaut dans dans ce cas, l'élément est masqué. Ensuite, deux boutons sont ajoutés à la page, en utilisant les méthodes hide() et show() pour masquer et afficher l'élément. Lorsque vous cliquez sur le bouton Masquer, l'élément sera masqué, et lorsque vous cliquerez sur le bouton Afficher, l'élément sera réaffiché.

Utilisez la méthode css()

En plus d'utiliser les méthodes hide() et show(), nous pouvons également utiliser la méthode css() pour modifier les propriétés CSS des éléments div dynamiques. Plus précisément, nous pouvons utiliser la méthode css() pour modifier l'attribut display afin d'obtenir l'effet de masquer et d'afficher des éléments.

Ce qui suit est un exemple de code utilisant la méthode css() :

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide and Show Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <button id="hide-btn">Hide</button>
    <button id="show-btn">Show</button>
    <div class="dynamic-div">This is a dynamic div element.</div>
    <script>
        $(document).ready(function() {
            $("#hide-btn").click(function() {
                $(".dynamic-div").css("display", "none");
            });
            $("#show-btn").click(function() {
                $(".dynamic-div").css("display", "block");
            });
        });
    </script>
</body>
</html>

Dans le code ci-dessus, nous utilisons la méthode css() pour modifier l'attribut d'affichage de l'élément .dynamic-div, obtenant ainsi l'effet de masquer et montrant l'élément. Lorsque vous cliquez sur le bouton Masquer, l'élément sera masqué, et lorsque vous cliquerez sur le bouton Afficher, l'élément sera réaffiché.

Résumé

Il est très simple d'utiliser jQuery pour masquer et afficher des éléments div dynamiques. Nous pouvons utiliser les méthodes hide() et show() pour masquer et afficher des éléments directement, ou nous pouvons utiliser la méthode css() pour modifier l'attribut d'affichage de l'élément afin d'obtenir l'effet de masquage et d'affichage. Il convient de noter que lorsqu'il y a plusieurs éléments div dynamiques dans la page, nous devons utiliser une classe ou un ID pour spécifier les éléments qui doivent être masqués ou affichés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Est-ce que jquery est une entrée ou une sélection ?Article suivant：Est-ce que jquery est une entrée ou une sélection ?

Articles Liés

Voir plus