JQuery 的. hide()和将 CSS 设置为 display: none 之间的区别

小开

两者在所有浏览器上都是一样的，AFAIK。在 Chrome 和 Firefox 上检查，两者都将 display:none附加到元素的 style属性。

小开

.hide() 存储 上一页 display属性，然后将其设置为 none，所以如果它不是元素的标准 display属性，那么 .show()将使用该存储属性返回。所以... 它做一些额外的工作，但除非你做很多的元素，速度的差异应该是可以忽略不计的。

小开

看看 jQuery 代码，会发生这样的情况:

hide: function( speed, easing, callback ) {
if ( speed || speed === 0 ) {
return this.animate( genFx("hide", 3), speed, easing, callback);


} else {
for ( var i = 0, j = this.length; i < j; i++ ) {
var display = jQuery.css( this[i], "display" );


if ( display !== "none" ) {
jQuery.data( this[i], "olddisplay", display );
}
}


// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( i = 0; i < j; i++ ) {
this[i].style.display = "none";
}


return this;
}
},

小开

最佳答案

来自关于。隐藏()的 jQuery 页面:

”匹配的元素将立即隐藏，没有任何动画。这大致相当于调用。Css (‘ display’，‘ none’) ，但是 display 属性的值保存在 jQuery 的数据缓存中，这样以后可以将 display 恢复到其初始值。如果一个元素有一个内联的显示值，然后隐藏并显示，它将再次内联显示。”

因此，如果能够恢复到之前的 display值很重要，那么最好使用 hide()，因为这样可以记住之前的状态。除此之外，没有什么区别。

$(function() {
$('.hide').click(function(){
$('.toggle').hide();
setDisplayValue();
});
$('.show').click(function(){
$('.toggle').show();
setDisplayValue();
});
});


function setDisplayValue() {
var display = $('.toggle')[0].style.display;
$('.displayvalue').text(display);
}

div {
display: table-cell;
border: 1px solid;
padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button class="hide">Hide</button>
<button class="show">Show</button>
</p>


<div class="toggle">Lorem Ipsum</div>


<p>
The display value of the div is:
<span class="displayvalue"></span>
</p>

小开

它们是一回事。.hide()调用 jQuery 函数并允许您向其添加回调函数。因此，使用 .hide()，您可以添加一个动画，例如。

.css("display","none")将元素的属性更改为 display:none。这与在 JavaScript 中执行以下操作是一样的:

document.getElementById('elementId').style.display = 'none';

.hide()函数显然需要更多的时间来运行，因为它检查回调函数、速度等等。

小开

看到没有什么区别，如果你使用基本的隐藏方法。但是 jquery 提供了各种隐藏方法来给元素赋予效果。详情请参阅以下连结: Jquery 中隐藏的效果

小开

使用都有是一个很好的答案; 这不是一个二选一的问题。

使用两者的优势是指页面加载时的 CSS 将立即隐藏元素。JQuery.Hide 将闪烁该元素四分之一秒，然后将其隐藏。

在这种情况下，如果我们希望在页面加载时不显示元素，我们可以使用 CSS 并设置 display: none & use the jQuery。快躲起来。如果我们计划切换元素，我们可以使用 jQuery 切换。