jQuery 的 .hide() 和设置 CSS 显示的区别：无

Posted 2023-02-24

【中文标题】jQuery 的 .hide() 和设置 CSS 显示的区别：无

【英文标题】：Difference between jQuery’s .hide() and setting CSS to display: none

【发布时间】：2011-05-22 18:30:21

【问题描述】：

我最好做什么？ .hide() 比写出 .css("display", "none") 更快，但是它们有什么区别以及它们实际上对 html 元素做了什么？

【参考方案1】：

来自关于.hide()的jQuery页面：

"匹配的元素会立即隐藏，没有动画。这大致相当于调用 .css('display', 'none')，只是 display 属性的值保存在 jQuery 的数据缓存中，这样display 可以稍后恢复到它的初始值。如果一个元素的 display 值为 inline，然后被隐藏并显示，它将再次被显示为 inline。"

因此，如果您能够恢复到之前的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 的问题是在重新加载站点后元素隐藏仍然在 2 秒内查看

【参考方案2】：

.hide() 在将其设置为 none 之前存储 previous display 属性，所以如果它不是元素的标准 display 属性，你会更安全一些, .show() 将使用该存储的属性作为返回的内容。所以...它做了一些额外的工作，但除非你做 tons 个元素，否则速度差异应该可以忽略不计。

【参考方案3】：

查看 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;
    
,

【参考方案4】：

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

.css("display","none") 将元素的属性更改为display:none。就像在 javascript 中执行以下操作一样：

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

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

【参考方案5】：

使用 both 是一个不错的答案；这不是一个或一个的问题。

同时使用两者的优点是 CSS 会在页面加载时立即隐藏元素。 jQuery .hide 将闪烁元素四分之一秒，然后将其隐藏。

如果我们希望在页面加载时不显示元素，我们可以使用 CSS 并设置 display:none 并使用 jQuery .hide()。如果我们打算切换元素，我们可以使用 jQuery 切换。

【参考方案6】：

AFAIK 在所有浏览器上都执行相同的操作。在 Chrome 和 Firefox 上检查，都将 display:none 附加到元素的 style 属性。

【参考方案7】：

如果您使用基本的隐藏方法，请看没有区别。 但是 jquery 提供了各种隐藏方法来对元素产生影响。 详细解释请参考以下链接： Effects for Hide in Jquery