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

Z时代
2024-01-10
分类：问答

我最好做什么？.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>