如何用jQuery隐藏按钮上的HTML代码块

如何用jQuery隐藏按钮上的HTML代码块

在这篇文章中,我们将学习如何通过点击按钮来隐藏一个HTML代码块。我们可以通过使用jQuery内置的hide()方法来做到这一点。让我们简单地了解一下这个方法的功能。

hide():在CSS中,我们有一个属性display:none ,它基本上是隐藏了元素。在jQuery中,这个hide()方法也会隐藏所选元素。

语法:

$(selector).hide()

例子1:在下面的例子中,文本将在2秒后被隐藏。被选中的元素将立即被隐藏。这与调用.css(“display”, “none”)相同。在隐藏之前,hide()方法将”display “属性的值保存在jQuery的数据缓存中,以便以后可以将” display ” 恢复为初始值。

<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
  
<body>
    <p>Below text will remove in 2 sec</p>
  
    <p id="test">
        Hello Geeks
    </p>
  
    <script>
        setTimeout(function(){
            $("#test").hide()
        },2000)
    </script>
</body>
  
</html>

输出:

如何用jQuery隐藏按钮上的HTML代码块?

hide method

例子2:在下面的例子中,我们将学习如何使用jQuery在点击按钮时隐藏一个HTML代码块。

<!DOCTYPE html>
  
<head>
    <!-- jQuery library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
  
<body>
    <p>Click on the button to hide below text.</p>
  
    <p id="test">
        Hello Geeks
    </p>
  
    <button>Click Me</button>
    <script>
        ('button').click(function(){
            ("#test").hide()
        })
    </script>
</body>
</html>

输出:

如何用jQuery隐藏按钮上的HTML代码块?

点击后隐藏

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法