jQuery实现HTML元素隐藏和显示

当你想在网页中实现隐藏和显示HTML元素时，jQuery提供了方便的方法。

1. 使用$().hide()实现隐藏元素

在jQuery中，你可以使用$().hide()方法来隐藏一个HTML元素。例如，当按钮被点击时，你可以隐藏一个悬浮框。下面是一个示例：

<!-- HTML -->
<button id="hideButton">Hide</button>
<div id="popup">Welcome to my website!</div>

// JavaScript
$(document).ready(function(){
  // 点击按钮隐藏悬浮框
  $("#hideButton").click(function(){
    $("#popup").hide();
  });
});

在这个示例中，当用户点击按钮时，使用$().hide()方法隐藏了<div>元素。

2. 使用$().show()实现显示元素

使用$().show()方法来显示HTML元素。例如，当用户点击一个按钮时显示一个悬浮框。下面是一个示例：

<!-- HTML -->
<button id="showButton">Show</button>
<div id="popup" style="display:none;">Welcome to my website!</div>

// JavaScript
$(document).ready(function(){
  // 点击按钮显示悬浮框
  $("#showButton").click(function(){
    $("#popup").show();
  });
});

在这个示例中，当用户点击按钮时，使用$().show()方法显示了<div>元素。需要注意的是，在<div>元素上设置了style="display:none;"来初始化该元素被隐藏。

总结

在jQuery中，$().hide()和$().show()是用来隐藏和显示HTML元素的两个基本方法。当它们被调用时，jQuery会改变CSS样式以显示或隐藏相关元素。你可以根据需要在事件中使用这些方法。如果需要在其他时机中隐藏和显示元素，你可以使用$().toggle()方法来切换两个状态。