从关于.hide()的 jQuery 页面：

"匹配的元素会立即隐藏，没有动画。这大致相当于调用.css('display', 'none')，只不过display属性的值保存在jQuery的数据缓存中，以便稍后显示恢复到它的初始值。如果一个元素的显示值为 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()在将其设置为 之前存储先前的 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;
    }
},

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

.css("display","none")将元素的属性更改为display:none. 这与您在 JavaScript 中执行以下操作相同：

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

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

使用两者是一个很好的答案；这不是非此即彼的问题。

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

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