Javascript jQuery 的 .hide() 和设置 CSS 以显示的区别：无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4396983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between jQuery’s .hide() and setting CSS to display: none
提问by benhowdle89
Which am I better off doing? .hide()is quicker than writing out .css("display", "none"), but what's the difference and what are both of them actually doing to the HTML element?
我最好做什么？.hide()比写出更快.css("display", "none")，但是有什么区别，它们实际上对 HTML 元素做了什么？
回答by Stephan Muller
From the jQuery page about .hide():
从关于.hide()的 jQuery 页面：
"The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline."
"匹配的元素会立即隐藏，没有动画。这大致相当于调用 .css('display', 'none')，只不过 display 属性的值保存在 jQuery 的数据缓存中，以便稍后显示恢复到它的初始值。如果一个元素的显示值为 inline，然后隐藏和显示，它将再次被显示为 inline。”
So if it's important that you're able to revert to the previous value of display, you'd better use hide()because that way the previous state is remembered. Apart from that there's no difference.
因此，如果能够恢复到 的先前值很重要，则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>回答by Nick Craver
.hide()stores the previousdisplayproperty just before setting it to none, so if it wasn't the standard displayproperty for the element you're a bit safer, .show()will use that stored property as what to go back to. So...it does some extra work, but unless you're doing tonsof elements, the speed difference should be negligible.
.hide()在将其设置为 之前存储先前的display属性none，因此如果它不是display元素的标准属性，您会更安全一些，.show()将使用该存储的属性作为返回的内容。所以......它做了一些额外的工作，但除非你做大量的元素，否则速度差异应该可以忽略不计。
回答by Spiny Norman
Looking at the jQuery code, this is what happens:
查看 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;
}
},
回答by seedg
They are the same thing. .hide()calls a jQuery function and allows you to add a callback function to it. So, with .hide()you can add an animation for instance.
他们是一样的东西。.hide()调用 jQuery 函数并允许您向其添加回调函数。因此，例如，.hide()您可以添加动画。
.css("display","none")changes the attribute of the element to display:none. It is the same as if you do the following in JavaScript:
.css("display","none")将元素的属性更改为display:none. 这与您在 JavaScript 中执行以下操作相同：
document.getElementById('elementId').style.display = 'none';
The .hide()function obviously takes more time to run as it checks for callback functions, speed, etc...
该.hide()函数显然需要更多时间来运行，因为它会检查回调函数、速度等......
回答by Catto
To use bothis a nice answer; it's not a question of either or.
使用两者是一个很好的答案；这不是非此即彼的问题。
The advantageof using both is that the CSS will hide the element immediatelywhen the page loads. The jQuery .hide will flash the element for a quarter of a second then hide it.
两者同时使用的好处是CSS 会在页面加载时立即隐藏元素。jQuery .hide 将闪烁元素四分之一秒然后隐藏它。
In the case when we want to have the element not shown when the page loads we can use CSS and set display:none & use the jQuery .hide(). If we plan to toggle the element we can use jQuery toggle.
如果我们希望在页面加载时不显示元素，我们可以使用 CSS 并设置 display:none 并使用 jQuery .hide()。如果我们打算切换元素，我们可以使用 jQuery 切换。
回答by Klemen Slavi?
Both do the same on all browsers, AFAIK. Checked on Chrome and Firefox, both append display:noneto the styleattribute of the element.
两者都在所有浏览器上执行相同的操作，AFAIK。在 Chrome 和 Firefox 上检查，都附加display:none到style元素的属性。
回答by nilesh panchal
See there is no difference if you use basic hide method. But jquery provides various hide method which give effects to the element. Refer below link for detailed explanation: Effects for Hide in Jquery
如果您使用基本的隐藏方法，请看没有区别。但是 jquery 提供了各种隐藏方法来对元素产生影响。请参阅以下链接以获取详细说明： Jquery 中隐藏的效果
