jQuery的show()和hide()与使用display:block/none的类有什么区别？

Question

仅出于好奇，这两种技术哪个更“有效”？

我与我的主管讨论过此事，他告诉我应该创建两个使用display:block/none的类并使用jQuery将它们分配给元素，而不是使用jQuery自己的show/hide函数。

我原本认为show/hide是广泛使用的功能，并且它们可以在不强制分配类的情况下轻松地使我们的生活变得更轻松。

- Peter

---

它们运行得非常好。可能是你工作的编码标准的问题。 - tymeJV

完全相同......当然，如果您使用jQuery，则更喜欢使用show和hide而不是制作类......关于show和hide唯一的问题是会产生内联样式。 - DaniP

在这里查看差异：https://dev59.com/z2Yr5IYBdhLWcg3wl7HF - dsgriffin

最终，jQuery的show/hide方法会添加一个内联样式，用于控制display:block/none。 - Carlos487

这就是我的观点。它们两者都是一样的，但是我的主管认为使用类比在元素中添加内联样式更“有效”。 - Peter

Answer 1

你可以使用这样的CSS类来在页面上最初隐藏元素，然后使用jQuery.show()显示它。无论如何，jQuery.show()直接设置样式属性，因此浏览器不需要每次分配时查找类的CSS声明。因此，我相信它的工作速度更快，对开发人员也更方便。顺便说一句，带有show/hide代码的可读性也更高。

只需比较一下

$username.hide();

到

$username.addClass('hidden');

似乎代码更易读，因此更易于维护，这样对于客户来说支持成本更低…等等。

- Eugene Naydenov

Answer 2

它们是相同的-show()和hide()只是在display: block(或inline、inline-block等)和display: none或类似之间切换。使用这些或使用简单的类来在这些样式之间切换都是完全“有效”的。

主要区别在于show()和hide()支持jQuery动画。此外，类不会添加内联CSS，而show()和hide()会（内联html以覆盖初始display值）。根据您的用例，这可能方便或不方便。 show()和hide()还缓存了初始display值，因此如果您隐藏一个元素然后显示它，它将记住原始display值(这意味着它更灵活，因为您不需要具有不同类型display值的元素的唯一可见类)。

- Ennui

Answer 3

使用这两种技术都没有什么“无效”的问题。我认为这取决于你的个人喜好。jQuery的show/hide方法完全可以胜任。以下是一些需要考虑的要点：

• 如果您使用show/hide，那么这是一个纯javascript/jquery解决方案。
• 如果您使用CSS类通过jquery分配它们，这种方法涉及CSS + jquery。

话虽如此，建议尽可能使用CSS解决方案。如果您创建了具有display block/none的类，就可以在整个应用程序中使用它们。所以最终还是取决于您的个人选择。

- reggaemahn

Answer 4

我认为这些方法的不同之处在于，通过使用类，您可以选择如何在未来的重新设计中隐藏。您可能希望有一天换上一个新的 CSS，其中“hidden”实际上被划掉并变灰。通过使用类，您保持了演示文稿和数据之间的分离。

- Andy Novocin