jQuery show（）vs添加Class

Question

其中哪一种更有效（即更快）：

$(elem).show();

或

$(elem).addClass(displayClass); // Where display class is "display: block;"

或者它们是否相同？

Answer 1

这取决于你所追求的，他们做不同的事情：

• $(elem).show(); - 显示元素，从.hide()之前恢复display或恢复元素类型的默认display
• $(elem).addClass(displayClass); - 添加一个类，始终使用某个display，而不是真正恢复 那里的内容 - 这不太灵活

---

哪个更快？ .addClass()向下移动you can test it yourself here，仅does a lot less work而不是.show() does。但是，它没有那么多功能，所以由于上述原因它不太灵活。

Answer 2

不，他们绝对不相同。

对元素样式的直接修改与通过更改元素类的“间接”修改之间存在大差异，这确实非常明显。通过在Javascript和CSS之间编写协作代码，类更改为您提供了更大的灵活性。 Javascript管理元素的状态，而CSS驱动该状态的实际效果。

show()和hide()方法非常方便，但（在我看来）按类名管理状态/外观实际上是一种更强大，更易于维护的方法。实际上，您总是可以编写自己的小jQuery插件来添加/删除对您的应用程序有意义的类，以避免类名本身传播到您的代码中。

Answer 3

他们并不完全相同;他们的工作完全不同。在你的情况下，它们可能具有相同的效果，但不要指望它。

例如，addClass实际上可能无法在所有情况下使元素可见。如果元素具有取代类的其他样式（例如ID级CSS或内联样式等），则添加类将完全没有任何效果。

此外，设置display:block仅适用于您希望显示为块的元素。如果您有内联元素（或更糟糕的是表格），并且您尝试将它们显示为块，则结果可能不是您所期望的。

最后，.addClass()肯定会涉及比.show()更多的浏览器处理，因此您不会通过使用它来使您的网站更容易。

简而言之，如果您正在尝试实现这一切，请使用.show() - 这是正确的jQuery方式。