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

Question

有什么区别吗？

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

和

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

- Sashi Kant

Answer 1

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

display属性有许多可能的值，其中包括block、inline、inline-block等还有很多。

.show()方法不一定将其设置为block，而是重置为您定义的内容（如果有）。

在jQuery源代码中，您可以看到它们如何将display属性设置为空字符串("")，以检查任何jQuery操作之前的属性：小链接。

另一方面，隐藏是通过display: none;来完成的，因此您可以认为.hide()和.css("display", "none")在某种程度上是等价的。

建议使用.show()和.hide()来避免任何陷阱（而且它们更短）。

- Chris

---

由于显示/隐藏执行的全面检查，这些方法会显著变慢。如果您需要多次调用该方法，则建议使用css方法。 - Gqqnbig

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()和display':'none'......

另一个区别 当调用.hide()时，显示属性的值将保存在jQuery的数据缓存中，因此当调用.show()时，初始显示值将被还原！

- Talha

Answer 3

是的，两者的性能表现有所不同：jQuery('#id').show()比jQuery('#id').css("display","block")慢，因为在前一种情况下，需要从jquery缓存中检索初始状态，因为显示不是二进制属性，它可以是inline，block，none，table等。hide()方法也是如此。

参见：http://jsperf.com/show-vs-addclass

- aquasan

---

当页面中使用了过多的显示和隐藏时，性能变得至关重要。 - aquasan

Answer 4

没有任何区别

如果不传递参数，.hide()方法是隐藏元素的最简单方式:

$('.target').hide(); 匹配的元素将立即被隐藏，没有动画效果。这基本上相当于调用.css('display', 'none')，但是display属性的值保存在jQuery的数据缓存中，以便稍后可以将display还原为其初始值。如果一个元素的display值是行内的，那么它被隐藏和显示后，它将再次以行内形式显示。

同样适用于show

- Arsen Mkrtchyan

---

除了.show()会设置正确的display属性外，您还需要手动选择正确的属性，使用.css()。 - Cerbrus

Answer 5

有区别。

jQuery('#id').css("display","block")会始终将要显示的元素设置为块级元素。

jQuery('#id').show()将其设置为初始显示类型，例如：display: inline。

请参阅 Jquery 文档

- Jonas Ibsen

---

请注意，这只适用于较新版本的jQuery。例如，1.3版本并不适用于此。 - Troy Alford

Answer 6

你可以查看源代码（版本为v1.7.2）。

除了我们可以设置的动画之外，它还会记住旧的显示样式（这不是所有情况下都是block，它也可以是inline，table-cell等）。

- Samuel Caillerie

Answer 7

查看http://api.jquery.com/show/

如果没有参数，.show()方法是显示元素的最简单方式：

$('.target').show();

匹配的元素将立即显示，没有动画效果。这大致相当于调用.css('display', 'block')，只是显示属性会恢复到初始值。如果一个元素的显示值为内联，则隐藏和显示后，它将再次以内联方式显示。

- Corinne Kubler

---

很好的解释..谢谢 :) - Sashi Kant