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操作之前它是什么： little link 。

另一方面，隱藏是通過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()被稱為顯示屬性的值保存在jQuery的數據緩存，所以當.show()被調用時，初始顯示值將被恢復！

Answer 3

是的，兩者的性能有所不同： jQuery('#id').show()比jQuery('#id').css("display","block")慢jQuery('#id').css("display","block")就像前一種情況一樣，額外的工作是要完成從jquery緩存中檢索初始狀態，因為display不是二進制屬性，它可以是inline ， block ， none ， table等。與hide()方法類似。

請參閱： http ： //jsperf.com/show-vs-addclass

Answer 4

沒有不同

沒有參數，.hide（）方法是隱藏元素的最簡單方法：

$（ '目標'）隱藏（）。 匹配的元素將立即隱藏，沒有動畫。 這大致相當於調用.css（'display'，'none'），除了display屬性的值保存在jQuery的數據高速緩存中，以便稍后可以將顯示恢復到其初始值。 如果元素的顯示值為內聯，則隱藏並顯示，它將再次以內聯方式顯示。

同樣的節目

Answer 5

是，有一點不同。

jQuery('#id').css("display","block")將始終設置要顯示為塊的元素。

jQuery('#id').show()將是它最初的顯示類型，顯示：內聯，例如。

見Jquery Doc

Answer 6

你可以看一下源代碼 （這里是v1.7.2）。

除了我們可以設置的動畫，這也保留了內存中舊的顯示樣式（在所有情況下都不是block ，它也可以是inline ， table-cell ......）。

Answer 7

見http://api.jquery.com/show/

沒有參數，.show（）方法是顯示元素的最簡單方法：

$（ '目標'）顯示（）。

匹配的元素將立即顯示，沒有動畫。 這大致相當於調用.css（'display'，'block'），除了display屬性恢復到最初的狀態。 如果元素的顯示值為內聯，則隱藏並顯示，它將再次以內聯方式顯示。