有两种方法可以显示/隐藏元素。首先是$('element').show()
,其中show()
是Jquery中的一个函数,$('element').css('visibility', 'visible')
css()
也来自Jquery。哪个更快,使用什么?我认为第一个更快。
.show()
大致相当于调用.css("display","block"(,只是显示属性恢复到最初的样子。如果元素的显示值为内联,则被隐藏并显示,它将再次以内联方式显示。
http://api.jquery.com/show/
设置.css('visibility', 'visible')
将仅显示以前使用visibility: hidden
隐藏的元素。show()
改为更改display
属性。 这两种方法之间的主要区别在于它们的布局行为(visibility:hidden
元素仍然占用布局中的空间,display:none
元素不占用空间(。
至于速度/性能:如有疑问,请运行基准测试。 与你的猜测相反,jQuery可见性比显示/隐藏快得多。 在原版JS中,这种差异消失了,至少对于简单的文档布局是这样;这两种方法的速度大致相同(并且都比任何一种jQuery方法快得多(。 我在链接基准上的结果:
- jQuery 显示/隐藏 x 20,913 操作/秒 ±2.49%(采样 75 次运行(
- jQuery 可见性 x 121,719 次操作/秒 ±1.46%(抽样运行 81 次(
- 原版显示/隐藏 x 453,574 次操作/秒 ±2.51%(采样 85 次运行(
- 原版可见性 x 450,610 次操作/秒 ±1.98%(89 次采样(
很难想象这种性能差异会显着的任何合理情况; 布局差异通常是这里真正的决定因素......但是,如果您的应用程序需要每秒显示和隐藏数万个元素,您应该针对您的实际代码运行基准测试,并找出有关您的实现的特定细节,使其中一个更可取。
正如注释中所指出的,.css()
和.show()
都是 jQuery 的一部分,两者之间的主要区别在于,第一个为 cssvisibility
属性分配一个特定的值,另一个恢复元素的初始display
值(例如块或内联块(
在可见性和隐藏/显示中,样式将添加为内联
可见性
.css('visibility', 'visible');
,只有可见性将被隐藏。但显示不会是没有的。
隐藏/显示
非常简单,相当于.css("display", "block")
;
哪一个更快?
我认为,通常它不用于那种功能,但它用于交互、事件中的功能等......