jQuery show() 和添加 Class 的区别

Question

以下哪种写法更高效（即更快）：

$(elem).show();

或者

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

它们是完全相同的吗？

- bba

---

如果你要添加"display:block;"然后再将其删除，这样做会更快吗？还是直接将"none"改为"block"更快？ - rapadura

Answer 1

这得看你需要做什么, 这两个方法的作用不同：

• $(elem).show(); - 显示元素，恢复之前.hide()隐藏或恢复元素类型的默认display
• $(elem).addClass(displayClass); - 添加一个类，并且始终具有特定的display属性，不会真正恢复先前的样式 - 这种方法的灵活性较差

---

哪个更快?毫无疑问是.addClass(), 你可以在这里测试一下，与.show()相比，它所执行的工作要少得多。但是，出于上述原因，它的功能不如.show()灵活。

- Nick Craver

---

这是show和addClass之间的函数执行比较。那么CSSDOM重新计算时间呢？ - Ozil

Answer 2

不，它们绝对不相同。

直接修改元素样式和通过更改元素类进行“间接”修改之间存在很大的区别，这应该是非常明显的。通过编写JavaScript和CSS之间的协作代码，类更改为您提供了更多的灵活性。JavaScript 管理元素的状态，而 CSS 驱动该状态的实际效果。 show() 和 hide() 方法很方便易用，但（在我看来）通过类名管理状态/外观确实是一种更强大、可维护的方法。实际上，您可以始终编写自己的小型 jQuery 插件，以添加/删除对您的应用程序有意义的类，以避免类名本身在代码中传播。

- Pointy

Answer 3

它们不是完全相同的，它们的工作方式完全不同。在你的情况下，它们可能产生相同的效果，但不要指望。

例如，addClass 在所有情况下可能并不能使元素可见。如果元素具有其他样式优先于类（例如 ID 级别的 CSS 或内联样式等），则添加类将没有任何效果。

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

最后，.addClass() 明显比 .show() 对浏览器的处理更多，因此使用它并不能让您的网站变得更简单。

简而言之，如果这就是您想要实现的所有内容，请使用 .show() - 这是正确的 jQuery 方法。

- Spudley

---

addClass绝对不会像@Pointy在他的jsperf测试中展示的那样涉及更多的处理。事实上，我认为人们实现一个自定义的show/hide，使用addClass和removeClass作为基础会是一个更好的主意。 - Akkuma