jQuery中hide()方法用法实例
简介
hide() 是jQuery中隐藏元素的方法。它使用CSS属性display将被选元素的可见状态设置为none, 以此来隐藏该元素。
语法
hide()方法不接收任何参数。
使用方法
hide()方法可以应用于任何jQuery选择器选择的元素。例如，您可以将其应用于页面中的某些元素，例如 div，span或p。以下是一个简单的示例：
$("p").hide(); // 隐藏所有段落元素
您还可以使用hide()方法来隐藏同级元素或子元素。例如，您可以指定相同的class属性名称来同时隐藏多个元素，如下所示：
$(".my-class").hide(); // 隐藏所有class为my-class的元素
隐藏全部元素的示例代码如下：
$("*").hide(); // 隐藏网页中所有元素
以上示例代码将隐藏页面中所有的段落、class为my-class的元素和所有元素。
示例
示例1 - 单击按钮隐藏元素
在此示例中，当您单击按钮时，将以动画效果隐藏指定的文本区域。
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例：hide()方法</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$(".text").hide("slow"); // 以慢动作效果隐藏文本
});
});
</script>
<style>
.text {
background-color: lightgray;
padding: 20px;
}
</style>
</head>
<body>
<h2>隐藏text区域：</h2>
<p>单击下面的按钮来隐藏text区域：</p>
<button>隐藏</button>
<div class="text">显示的文本区域</div>
</body>
</html>
示例2 - 点击图片隐藏页眉
在此示例中，当您单击图像时，将以动画效果隐藏页眉。
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例：hide()方法</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("img").click(function() {
$("header").hide("fast"); // 以快动作效果隐藏页眉
});
});
</script>
<style>
header {
background-color: lightblue;
padding: 20px;
text-align: center;
}
img {
cursor: pointer; /* 显示手型光标 */
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的网站</h1>
<p>这是我的个人网站</p>
</header>
<h2>隐藏网站标题：</h2>
<p>单击下面的图像来隐藏网站标题：</p>
<img src="https://via.placeholder.com/150" alt="点击隐藏网站标题">
</body>
</html>
以上两个示例演示了如何使用hide()方法来隐藏元素。前一个示例隐藏文本区域，后一个示例隐藏页眉。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中hide()方法用法实例 - Python技术站
微信扫一扫 
支付宝扫一扫 