.скрыть () или отобразить: нет? в jQuery

что мне лучше делать? .hide() быстрее, чем писать .css("display","none"), но в чем разница и что они оба на самом деле делают с HTML-элементом?

135
css javascript jquery show-hide

7 ответов

со страницы jQuery о .hide ():

"соответствующие элементы будут скрыты немедленно, без анимации. Это примерно равносильно вызову .css ('display',' none'), за исключением того, что значение свойства display сохраняется в кэше данных jQuery, чтобы позже дисплей можно было восстановить до его начального значения. Если элемент имеет отображаемое значение 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>
180

.hide() хранит display свойство непосредственно перед установкой его в none, Так что если бы это был не стандарт display свойство для элемента вы немного безопаснее, .show() будет использовать это сохраненное свойство как то, к чему вернуться. Так что...это делает дополнительную работу, но если вы не делаете Т элементов, разница в скорости должна быть незначительной.

31

глядя на код 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;
    }
},
13

это одно и то же. .hide() вызывает функцию jQuery и позволяет добавить к ней функцию обратного вызова. Итак, с .hide() вы можете добавить анимацию к примеру.

.css("display","none") изменение атрибутов элемента display:none. Это то же самое, как если бы вы сделали следующее В JavaScript:

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

на .hide() функция, очевидно, занимает больше времени для запуска, поскольку она проверяет функции обратного вызова, скорость и т. д...

8

использовать и хороший ответ; это не вопрос ни того, ни другого.

на преимущество использования обоих является то, что CSS немедленно скроет элемент при загрузке страницы. В jQuery .скрыть будет мигать элемент в течение четверти секунды, а затем скрыть его.

в случае, когда мы хотим, чтобы элемент не отображался при загрузке страницы, мы можем использовать CSS и установить display:none & use the jQuery .скрывать.)( Если мы планируем переключиться элемент, который мы можем использовать jQuery toggle.

4

оба делают то же самое во всех браузерах, AFAIK. Проверено на Chrome и Firefox, оба приложения display:none до style атрибут элемента.

1

см. нет никакой разницы, если вы используете основной метод скрытия. Но jquery предоставляет различные методы hide, которые дают эффекты элементу. См. ниже ссылку для подробного объяснения: эффекты для скрытия в Jquery

-4