Разница между jQuery .hide () и настройкой CSS для отображения: нет

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

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

"Соответствующие элементы будут скрыты немедленно, без анимации. Это примерно эквивалентно вызову .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атрибуту элемента.

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