jQuery隐藏/显示

「已注销」

于 2022-06-09 08:58:55 发布

阅读量598

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/InterspaceITX/article/details/125196175

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用jQuery实现DOM元素的加载控制，通过document.ready确保代码在DOM加载完成后再执行。文中展示了hide()和show()方法用于隐藏和显示HTML元素，以及toggle()方法用于切换元素的显示状态。还提到了speed参数用于控制动画速度和callback参数以定义操作完成后的回调函数。

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

文档就绪事件

你也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

jQuery hide() 和 show()

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

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});

jQuery toggle()

通过 jQuery，你可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});