如何用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代码块？