jquery和js显示和隐藏div的几种方法对比整理

问题分析：

在网页设计中，经常需要用到显示和隐藏某些元素，以便提升用户体验。对于显示和隐藏元素，jQuery和原生JavaScript提供了各种方法，本文将就这些不同的方法对比整理，并给出示例说明。

解决方案：

要实现显示或隐藏元素，我们需要控制元素的CSS样式。元素的 display 属性控制元素是否显示，有两个常用的属性，分别是“none”和“block”。将元素 display属性设置为“none”时，元素会被隐藏；将元素的 display属性设置为“block”时，元素会被显示。

下面将介绍如何使用jQuery和原生JavaScript显示和隐藏元素。

1. 使用jQuery显示和隐藏元素

使用 jQuery，操作DOM元素十分方便，下面是示例代码：

// 显示元素
$("div").show();
// 隐藏元素
$("div").hide();

上述代码展示了 jQuery show() 和 hide() 方法。show() 方法设置元素的 display 属性为“block”，使元素显示出来；hide()方法设置元素的 display 属性为“none”，使元素隐藏。

1. 使用原生 JavaScript 显示和隐藏元素

使用原生 JavaScript 显示和隐藏元素需要使用 CSS 属性 display 和 JavaScript 方法：getElementById()；让我们直接看看它的使用代码：

// 显示元素
var x = document.getElementById("myDIV");
x.style.display = "block";
// 隐藏元素
var x = document.getElementById("myDIV");
x.style.display = "none";

首先，我们用 getElementById() 方法获取元素。接着，我们使用 style.display 属性将元素的 display 设置为“block”或“none”，实现元素的显示和隐藏。

1. 使用CSS 实现显示和隐藏元素

在一些特定情况下，我们甚至可以使用css的设置来实现显示和隐藏元素，比如：使用“opacity”属性，将元素的透明度设置为0，这会使元素完全透明，看起来就像被隐藏了。

下面是一个使用 opacity 属性隐藏元素的示例：

#myDIV {
  opacity: 0;
  transition: opacity 1s;
}

上述代码使用了 css 的 opacity 属性。当 opacity 属性设置为0时，元素完全透明，看起来就像被隐藏了。当 opacity 属性设置为1时，元素完全不透明，看起来就像被显示了。

总结：

从上面介绍的示例可以看出，使用 jQuery 操作 DOM 元素更简单方便，但对于一些简单的功能，使用原生 JavaScript 或 CSS 也可以实现。下面是这三种方法的比较：

• 使用 jQuery 显示/隐藏元素需要引入 jQuery 库，但代码简单，容易理解。
• 使用原生 JavaScript 显示/隐藏元素不需要引入任何库，但代码较为冗长，比 jQuery 代码复杂。
• 使用 CSS 显示/隐藏元素不需要引入任何库，但适用范围有限。

最终，我们需要在实际应用场景中合理选择哪种方式。