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

Ответ 1

На странице jQuery . hide():

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

Ответ 2

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

Ответ 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;
    }
},

Ответ 4

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

.css("display","none") изменяет атрибут элемента на display:none. Это то же самое, что и в JavaScript:

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

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

Ответ 5

Для использования оба - хороший ответ; это не вопрос ни о, ни о.

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

Ответ 6

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

Ответ 7

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