Різниця між jQuery .hide () та .css (“display”, “none”)

Чи є якась різниця між

jQuery('#id').show() and jQuery('#id').css("display","block")

і

jQuery('#id').hide() and jQuery('#id').css("display","none")

jQuery ('# id'). css ("дисплей", "блок")

displayВластивість може мати безліч можливих значень, серед яких block, inline, inline-blockі багато іншого .

.show()Метод не встановлює його обов'язково block, а скидає його на те , що ви визначили його (якщо взагалі).

У вихідному коді jQuery ви можете побачити, як вони встановлюють displayвластивість "" (порожній рядок), щоб перевірити, що це було до будь-якої маніпуляції з jQuery: маленьке посилання .

З іншого боку, приховування здійснюється через display: none;, тому ви можете розглянути .hide()і .css("display", "none")еквівалентно певному моменту.

Рекомендується використовувати .show()і в .hide()будь-якому випадку уникати будь-яких помилок (плюс, вони коротші).

Різниця між show () та css ({'display': 'block'})

Якщо припустити, що це у вас на початку:

<span id="thisElement" style="display: none;">Foo</span>

коли ви телефонуєте:

$('#thisElement').show();

ти отримаєш:

<span id="thisElement" style="">Foo</span>

в той час як:

$('#thisElement').css({'display':'block'});

робить:

<span id="thisElement" style="display: block;">Foo</span>

так, так, є різниця.

Різниця між hide () та css ({'display': 'none'})

те саме, що і вище, але перетворіть їх на hide () та відображення ':' none '......

Ще одна відмінність Коли .hide()називається значення властивості display, зберігається в кеші даних jQuery, тому при .show()виклику початкове значення відображення відновлюється!

Так , є різниця в продуктивності як: jQuery('#id').show()повільніше , ніж , jQuery('#id').css("display","block")як і в першому випадку додаткової роботи повинно бути зроблено для отримання початкового стану з кешу Jquery як дисплей НЕ двійковий атрибут може бути inline, block, none, tableі т.д. схожі це випадок із hide()методом.

Див .: http://jsperf.com/show-vs-addclass

без різниці

Без параметрів метод .hide () є найпростішим способом приховати елемент:

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

Те саме про шоу

Так, є різниця.

jQuery('#id').css("display","block") завжди буде встановлювати елемент, який ви хочете показати як блок.

jQuery('#id').show() will et - це те, яким типом відображення він був спочатку, наприклад display: inline.

Див. Jquery Doc

Ви можете поглянути на вихідний код (тут це v1.7.2).

Для анімації , що ми можемо встановити Крім цього , це також зберегти в пам'яті старий стиль відображення (який не у всіх випадках block, вона також може бути inline, table-cell...).

див. http://api.jquery.com/show/

Без параметрів метод .show () є найпростішим способом відображення елемента:

$ ('. target'). show ();

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