使用JQuery实现隐藏和显示效果

在本文中，我们将介绍如何使用JQuery来实现隐藏和显示效果。

创建项目

首先，打开HBuilderX软件，并点击菜单栏的文件 -gt; 新建 -gt; 项目。输入项目名并选择创建基本HTML项目，然后点击创建按钮。

编写代码

在HTML文件中，键入以下完整的代码：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
    lt;headgt;
        lt;meta charset"utf-8"gt;
        lt;titlegt;JQuery如何实现隐藏和显示效果？lt;/titlegt;
        lt;script src"js/jquery-3.3.1.js"gt;lt;/scriptgt;
        lt;scriptgt;
            $(document).ready(function(){
                $(".hide").click(function(){
                    $("p").hide();
                });
                $(".show").click(function(){
                    $("p").show();
                });
            });
        lt;/scriptgt;
    lt;/headgt;
    lt;bodygt;
        lt;input type"text" id"text"gt;lt;brgt;
        lt;pgt;如果你点击“隐藏”按钮，我将会消失。lt;/pgt;
        lt;button class"hide"gt;隐藏lt;/buttongt;
        lt;button class"show"gt;显示lt;/buttongt;
    lt;/bodygt;
lt;/htmlgt;

运行和查看效果

点击运行并在浏览器中打开项目，你将可以看到一个文本框和两个按钮。当你点击“隐藏”按钮时，文本“如果你点击“隐藏”按钮，我将会消失。”将会被隐藏。再次点击“显示”按钮，则文本将会重新显示。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。