<!DOCTYPE html>
<html>
<head>
<title>jQuery hide()方法示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box" id="box1">这是一个将被隐藏的盒子</div>
<button id="hideBtn">隐藏盒子</button>
<button id="showBtn">显示盒子</button>
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#box1").hide(); // 立即隐藏元素
});
$("#showBtn").click(function() {
$("#box1").show(); // 显示元素
});
});
</script>
</body>
</html>