Різниця між .hide () і налаштуваннями CSS для відображення:

Що мені краще робити? .hide()швидше, ніж виписувати .css("display", "none"), але яка різниця і що вони насправді роблять з елементом HTML?

На сторінці jQuery про .hide () :

"Зібрані елементи будуть приховані негайно, без анімації. Це приблизно еквівалентно виклику .css ('display', 'none'), за винятком того, що значення властивості відображення зберігається в кеші даних jQuery, щоб згодом відображення відображалося буде відновлено до початкового значення. Якщо елемент має значення відображення вбудованого рядка, то він прихований і показаний, він знову відобразиться в рядку. "

Тож якщо важливо, що ви зможете повернутися до попереднього значення 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 та встановити відображення: none & jQuery .hide (). Якщо ми плануємо переключити елемент, ми можемо використовувати jQuery.

Обидва роблять те саме в усіх браузерах, AFAIK. Якщо встановлено прапорці на Chrome і Firefox, вони додають display:noneдо styleатрибуту елемента.

Дивіться, що немає різниці, якщо ви використовуєте базовий метод приховування. Але jquery пропонує різні способи приховування, які дають ефект елементу. Нижче наведено посилання для детального пояснення: Ефекти для приховування в Jquery