jQuery .hide()和.css("display","none")之间的区别

Question

两者之间有什么区别吗？

jQuery('#id').show() and jQuery('#id').css("display","block")

和

jQuery('#id').hide() and jQuery('#id').css("display","none")

Answer 1

jQuery的( '#标识').CSS( "显示", "块")

该display属性可以有许多可能的值,其中有block,inline,inline-block,和更多.

该.show()方法并未将其设置为block,而是将其重置为您定义的方法(如果有的话).

在jQuery源代码中,您可以看到他们如何将display属性设置为""(一个空字符串)以检查在任何jQuery操作之前它是什么:小链接.

另一方面,隐藏是通过display: none;,所以你可以考虑.hide()和.css("display", "none")等同于某一点.

建议使用.show(),.hide()无论如何要避免任何问题(加上,它们更短).

Answer 2

show()和css之间的区别({'display':'block'})

假设你在开头有这个:

<span id="thisElement" style="display: none;">Foo</span>

你打电话的时候:

$('#thisElement').show();

你会得到:

<span id="thisElement" style="">Foo</span>

而:

$('#thisElement').css({'display':'block'});

作用:

<span id="thisElement" style="display: block;">Foo</span>

所以,是的,这是有区别的.

hide()和css之间的区别({'display':'none'})

同上,但将这些改为hide()并显示':'none'......

另一个区别 当.hide()调用display属性的值保存在jQuery的数据缓存中时,所以当.show()调用时,初始显示值会被恢复!

Answer 3

是的,有在两者的性能差异: jQuery('#id').show()慢于jQuery('#id').css("display","block")在前者的情况下额外的工作是为从jQuery缓存中检索显示初始状态做的是不是一个二进制属性也可以是inline,block,none,table,等类似是hide()方法的情况.

请参阅:http://jsperf.com/show-vs-addclass