Question

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

Answer 1

关于.hide()的jQuery页面：

“匹配的元素将立即隐藏，没有动画。这大致相当于调用.css（'display'，'none'），除了显示属性的值保存在jQuery的数据缓存中，以便显示可以稍后恢复到其初始值。如果元素的显示值为内联，则隐藏并显示，它将再次以内联方式显示。“

因此，如果您能够恢复到之前的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>

Answer 2

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

Answer 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;
    }
},

Answer 4

他们是一回事。 .hide()调用jQuery函数并允许您向其添加回调函数。因此，使用.hide()，您可以添加动画。

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

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

.hide()函数显然需要更多时间来检查回调函数，速度等...

Answer 5

使用两者是个不错的答案;这不是一个或两个问题。

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

如果我们想在页面加载时没有显示元素，我们可以使用CSS并设置display：none＆amp;使用jQuery .hide（）。如果我们计划切换元素，我们可以使用jQuery切换。

Answer 6

两者都在所有浏览器AFAIK上都这样做。在Chrome和Firefox上查看，都会将display:none附加到元素的style属性。

Answer 7

如果使用基本的隐藏方法，则没有区别。但jquery提供了各种隐藏方法，可以为元素提供效果。有关详细说明，请参阅以下链接 Effects for Hide in Jquery

.hide（）或display：none？ jQuery的

7 个答案: