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

153

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

benhowdle89
источник

Ответы:

208

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

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

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

Стефан Мюллер
источник
Проблема с использованием .hide заключается в том, что после перезагрузки сайта скрывается элемент, который по-прежнему выглядит через 2 секунды
ТМ
34

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

Ник Крейвер
источник
13

Глядя на код 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;
    }
},
Колючий Норман
источник
12

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

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

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

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

seedg
источник
4

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

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

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

Катто
источник
1

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

Клемен Славич
источник
-5

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

Nilesh Panchal
источник