JQuery显示隐藏页面元素的方法总结

介绍

在使用网站开发中，我们经常遇到需要在页面中动态显示或隐藏元素的情况。JQuery是一个功能强大的JavaScript库，它提供了许多方法来操作HTML元素。本文总结了常用的JQuery显示隐藏页面元素的方法，以帮助您更好地掌握网站开发。

方法

1. show() 和 hide() 方法

show() 和 hide() 方法是JQuery中最基本的显示和隐藏元素的方法，它们类似于CSS中的display属性。show()方法可以显示被选元素，而hide()方法则可以隐藏被选元素。

例如，我们有一个按钮元素，id为"btn"，希望点击后显示一个div元素，id为"div1"：

<button id="btn">显示div1</button>

<div id="div1" style="display:none;">这是一个div元素</div>

我们可以使用show()和hide()方法来实现：

$("#btn").click(function(){
  $("#div1").show();
});

$("#btn").click(function(){
  $("#div1").hide();
});

2. toggle() 方法

toggle() 方法可以在“显示/隐藏”之间来回切换元素。当元素处于隐藏状态时，toggle()方法将呈现该元素，反之亦然。

例如，我们有一个按钮元素，id为"btn"，希望点击后切换一个div元素，id为"div1"的显示状态：

<button id="btn">切换div1</button>

<div id="div1" style="display:none;">这是一个div元素</div>

我们可以使用toggle()方法来实现：

$("#btn").click(function(){
  $("#div1").toggle();
});

3. fadeIn() 和 fadeOut() 方法

fadeIn()和fadeOut()方法可以通过淡入/淡出效果来显示和隐藏元素。

fadeIn()方法以淡入的方式显示元素，fadeOut()方法以淡出的方式隐藏元素。我们可以设置可选参数来改变淡入/淡出的速度。

例如，我们有一个按钮元素，id为"btn"，希望点击后以淡入/淡出的方式切换一个div元素，id为"div1"的显示状态：

<button id="btn">切换div1</button>

<div id="div1" style="display:none;">这是一个div元素</div>

我们可以使用fadeIn()和fadeOut()方法来实现：

$("#btn").click(function(){
  $("#div1").fadeIn();
});

$("#btn").click(function(){
  $("#div1").fadeOut();
});

示例

示例一

HTML代码：

<button id="btn1">显示div1</button>

<div id="div1" style="display:none;">这是一个div元素</div>

JQuery代码：

$("#btn1").click(function(){
  $("#div1").show("slow");
});

在页面上点击“显示div1”按钮后，div1元素以淡入的方式显示出来。

示例二

HTML代码：

<button id="btn2">切换div2</button>

<div id="div2">这是一个div元素</div>

CSS代码：

#div2{
    width: 100px;
    height: 100px;
    background-color: #99CCFF;
}

JQuery代码：

$("#btn2").click(function(){
  $("#div2").toggle("slow");
});

在页面上点击“切换div2”按钮后，div2元素以淡出的方式隐藏。再次点击按钮后，div2元素以淡入的方式显示出来。

总结

JQuery提供了多种方法来显示或隐藏元素，我们可以根据实际需求选择合适的方法。show()和hide()方法是最基本的方法，toggle()方法可以帮助我们切换元素的显示状态，而fadeIn()和fadeOut()方法则可以加入淡入/淡出的效果，使整个显示过程更加柔和。