.hide () или отображение: нет? JQuery

Question

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

Answer 1

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

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

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 и использовать jQuery .hide ().Если мы планируем переключать элемент, мы можем использовать переключение jQuery.

Answer 6

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

Answer 7

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