.скрыть () или отобразить: нет? jQuery

Question

.скрыть () или отобразить: нет? jQuery

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

496 7

jQuery javascript css show-hide

7 ответов:

Comments

Ничего не найдено.

Stephan Muller · Accepted Answer · 2014-09-27 03:03:58

со страницы jQuery о .скрыть():

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

Nick Craver · Accepted Answer · 2010-12-09 12:08:57

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

Spiny Norman · Accepted Answer · 2010-12-09 12:09:19

глядя на код 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;
    }
},

seedg · Accepted Answer · 2016-01-21 17:58:15

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

.css("display","none") изменение атрибутов элемента display:none. Это то же самое, как если бы вы сделали следующее В JavaScript:
document.getElementById('elementId').style.display = 'none';
The .hide() функция, очевидно, занимает больше времени для запуска, поскольку она проверяет функции обратного вызова, скорость и т. д...

Catto · Accepted Answer · 2016-05-19 00:06:08

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

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

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

Klemen Slavič · Accepted Answer · 2010-12-09 12:08:52

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

nilesh panchal · Accepted Answer · 2013-11-10 20:43:52

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