jQuery的.hide（）与将CSS设置为显示之间的区别：无

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

在有关.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切换。

两者在所有浏览器AFAIK上的功能都相同。已在Chrome和Firefox上选中，均附加display:none到style元素的属性。

如果使用基本的hide方法，则看不到任何区别。但是jquery提供了各种隐藏方法，这些隐藏方法使元素发挥作用。请参阅下面的链接以获取详细说明： Jquery中的隐藏效果