jQuery hide()和show()的用法（附带实例）

jQuery 中提供了控制元素隐藏和显示的方法，隐藏匹配元素可以借助 hide() 方法实现；显示匹配元素可以借助 show() 方法实现。

jQuery隐藏匹配元素

使用 hide() 方法可以隐藏匹配元素。hide() 方法相当于将元素 CSS 样式属性 display 的值设置为 none，它会记住原来 display 的值。

hide() 方法有以下两种语法格式：
1) 不带参数的语法格式，用于实现不带任何动画效果地隐藏匹配元素，其语法格式如下：

hide()

例如，要隐藏页面中的全部图片，可以使用下面的代码：

$("img").hide();

2) 带参数的语法格式。用于以优雅的动画效果隐藏所有匹配元素，并在隐藏完成后可选择地触发一个回调函数，语法如下：

hide(speed, [callback])

speed：用于指定动画的时长。该参数可以是数字，也就是指元素在多少毫秒（1000ms=1s）后完全隐藏；也可以是默认参数 slow（600ms）、normal（400ms）和 fast（200ms）。
callback：可选参数，用于指定隐藏完成后要触发的回调函数。

例如，要在 300ms 内隐藏页面中 id 属性值为 ad 的元素，可以使用下面的代码：

$("#ad").hide(300);

jQuery 中任何动画效果都可使用默认参数 slow、normal、fast，使用时需加引号，如 show("fast")；自定义时长无需引号，如 show(300)。

jQuery显示匹配元素

使用 show() 方法可以显示匹配元素。show() 方法相当于将元素 CSS 样式属性 display 的值设置为 block、inline 或其他除了 none 以外的值，它会恢复为应用 display:none 之前的可见属性。

show()方法有以下两种语法格式：
1) 不带参数的语法格式，用于实现不带任何动画效果地显示匹配元素，其语法格式如下：

show()

例如，要显示页面中的全部图片，可以使用下面的代码：

$("img").show();

2) 带参数的语法格式。以动画效果显示匹配元素，显示完成后可触发回调函数，语法如下：

show(speed, [callback])

speed：用于指定动画的时长。该参数可以是数字，也就是指元素在多少毫秒后完全显示；也可以是默认参数 slow、normal 和 fast；
callback：可选参数，用于指定显示完成后要触发的回调函数。

例如，要在 300ms 内显示页面中 id 属性值为 ad 的元素，可以使用下面的代码：

$("#ad").show(300);

【实例】使用 hide() 和 show() 实现自动隐藏式菜单。
1) 创建 index.html，引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，首先添加一张图片，id 属性值为 flag，用于控制菜单显示；然后添加一个 id 属性值为 menu 的 <div> 标记，用于显示菜单；最后在 <div> 标记中添加用于显示菜单项的 <ul> 和 <li> 标记。关键代码如下：

<div id="menu">
  <ul>
    <li><a href="c.biancheng.net">编程教材</a></li>
    <li><a href="c.biancheng.net">最近更新</a></li>
    <!-- 省略其他菜单项 -->
    <li><a href="c.biancheng.net">联系我们</a></li>
  </ul>
</div>
<img src="images/title.gif" width="30" height="80" id="flag" />

3) 编写 CSS 样式，用于控制菜单的显示样式。

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，当鼠标指针移动到“隐藏菜单”图片上时，如果菜单为隐藏状态，则将菜单显示；当鼠标指针移出“隐藏菜单”图片时，则将菜单隐藏。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
  $("#flag").on("mouseover", function() {
    if ($("#menu").is(":hidden")) { // 判断菜单是否为隐藏状态
      $("#menu").show(300);         // 显示菜单
    }
  });

  $("#menu").hover(null, function() {
    $("#menu").hide(300);           // 鼠标移出菜单时隐藏
  });
});
</script>

上面的代码中，在绑定鼠标指针的移出事件时，使用了 hover() 方法，而没有使用 mouseout() 方法。这是因为使用 mouseout() 方法时，当鼠标指针在菜单上移动时，菜单将在显示与隐藏状态间反复切换。这是 jQuery 的事件捕获与事件冒泡造成的，但是 hover() 方法有效地解决了这个问题。

运行本实例，将显示下图所示的效果：

图 1 鼠标指针移出“隐藏菜单”图片时的效果

将鼠标指针移动到“隐藏菜单”图片上时，将显示下图所示的效果：

图 2 鼠标指针移动到“隐藏菜单”图片上时的效果

将鼠标指针从该菜单上移出时，又将显示图 1 所示的效果。

jQuery hide()和show()的用法（附带实例）

jQuery隐藏匹配元素

jQuery显示匹配元素

相关文章