JQuery hide方法

本文介绍了如何使用jQuery实现点击按钮后使其消失的功能,通过简单的JavaScript代码,展示了一个交互式的前端效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>

<body>
<button type="button">Click me</button>
</body>
</html>

### jQuery `hide` 方法使用教程 #### HTML 结构 为了展示如何使用 `hide()` 方法,下面是一个简单的HTML结构: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hide 示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <p id="paragraph">这是一个段落。</p> <button id="hideBtn">隐藏段落</button> <script> $(document).ready(function(){ $("#hideBtn").click(function(){ $("#paragraph").hide(); // 隐藏具有指定ID的元素 }); }); </script> </body> </html> ``` 此代码创建了一个按钮和一段文字。当点击按钮时,会触发绑定到该按钮上的事件处理程序,进而调用 `hide()` 函数来使 `<p>` 元素不可见[^1]。 #### JavaScript/jQuery 实现细节 在上述例子中,通过引入外部库文件的方式加载了 jQuery 库之后,在文档就绪函数内定义了对 ID 为 "hideBtn" 的按钮单击事件监听器。一旦检测到用户点击动作,则执行匿名回调函数中的逻辑——即针对拥有特定 CSS 类名或 ID 的 DOM 节点应用 `.hide()` 操作以实现视觉上消失的效果。 #### 参数说明 `.hide([duration][,complete])`: 可选参数允许设置动画持续时间和完成后的回调函数。如果不提供任何参数,默认情况下将立即生效而不会带有过渡效果;如果指定了毫秒数作为第一个参数,则会在给定时间内逐渐改变目标对象的高度直到完全看不见为止,并且可以在整个过程结束后执行另一个自定义操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值