如何使用jQuery实现隐藏和显示的效果

最新推荐文章于 2022-09-17 15:00:09 发布

G018_star sky♬

最新推荐文章于 2022-09-17 15:00:09 发布

阅读量341

点赞数 2

分类专栏：脚本语言前端 jQuery 文章标签：前端 IT JavaScript jQuery

本文链接：https://blog.csdn.net/qq_42526440/article/details/102090209

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

脚本语言

14 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

jQuery hide()和show()
通过jQuery，您可以使用hide()和show()方法来隐藏和显示HTML元素：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show()
});
});
</script>
</head>
<body>
<p id="p1">点击隐藏按钮，我就会消失。
</p>
<button id="hide" type="button">隐藏</button>
<button id=show type="button">显示</button>
</body>
</html>

语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值:“show”,"fast"或毫秒。
可选的callback参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有spee参数hide()方法。

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
  $("button").click(function(){
  $("p").show(1000);
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

上面的方法等同于下面的方法

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

toggle()语法：
$(selector).toggle(speed,callback);
可选的speed参数规定隐藏/显示的速度，可以取以下的值：“slow”,"fast"或毫秒。
可选的callback参数是toggle()方法完成后所执行的函数名称。
另外附加一个优秀博主的jQuery菜单实例链接地址:
http://www.cnblogs.com/flyingcr/p/10428327.html

G018_star sky♬

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用jQuery实现隐藏和显示的效果

jQuery hide()和show()通过jQuery，您可以使用hide()和show()方法来隐藏和显示HTML元素：<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(docum...
复制链接

扫一扫

专栏目录