JQuery's .hide () ile görüntülenecek CSS ayarı arasındaki fark: yok

153

Hangisini yapmam daha iyi? .hide()yazmaktan daha hızlıdır .css("display", "none"), ancak fark nedir ve her ikisi de aslında HTML öğesine ne yapıyor?

— benhowdle89
kaynak

208

JQuery sayfasından .hide () hakkında :

"Eşleşen öğeler animasyon olmadan hemen gizlenecek. Bu, display özelliğinin değerinin jQuery'nin veri önbelleğine kaydedilmesi dışında .css ('display', 'none') çağrılmasına kabaca eşdeğerdir. Bir öğenin satır içi görüntüleme değeri varsa, gizlenir ve gösterilirse, yine satır içi olarak görüntülenir. "

Dolayısıyla, önceki değerine dönebilmeniz önemliyse, displaydaha iyi kullanmalısınız hide()çünkü bu şekilde önceki durum hatırlanır. Bunun dışında hiçbir fark yok.

Kod snippet'ini göster

$(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>

Snippet'i genişlet

— Stephan Muller
kaynak

.Hide kullanmayla ilgili sorun, siteyi yeniden yükledikten sonra hala 2 saniyede görünen öğe gizlemesidir

— TM

34

.hide()önceki display özelliği none, ayarlanmadan hemen önce depolar; bu nedenle, displaybiraz daha güvenli olduğunuz öğenin standart özelliği olmasa, .show()depolanan özelliği geri dönmek için kullanır. Yani ... biraz ekstra iş yapar, ancak tonlarca öğe yapmazsanız , hız farkı ihmal edilebilir olmalıdır.

— Nick Craver
kaynak

13

JQuery koduna baktığımızda, olan budur:

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;
    }
},

— Dikenli Norman
kaynak

12

Aynı şey. .hide()jQuery işlevini çağırır ve ona bir geri arama işlevi eklemenizi sağlar. Böylece, .hide()örneğin bir animasyon ekleyebilirsiniz.

.css("display","none")öğenin niteliğini olarak değiştirir display:none. JavaScript'te aşağıdakileri yaptığınızla aynıdır:

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

.hide()Fonksiyon besbelli vb geri arama işlevleri için bu çekler, hız, olarak çalıştırmak için daha fazla zaman alır ...

— seedg
kaynak

4

Her ikisini de kullanmak güzel bir cevaptır; bu ya ya bir soru değildir.

Her ikisini de kullanmanın avantajı , sayfa yüklendiğinde CSS'nin öğeyi hemen gizlemesidir . JQuery .hide, öğeyi saniyenin çeyreğinde yanıp söner ve sonra gizler.

Sayfa yüklendiğinde öğenin gösterilmesini istemediğimizde CSS kullanabilir ve display: none & jQuery .hide () öğesini kullanabiliriz. Öğeyi değiştirmeyi planlıyorsak, jQuery geçişini kullanabiliriz.

— Catto
kaynak

1

Her ikisi de AFAIK gibi tüm tarayıcılarda aynısını yapar. Chrome ve Firefox, hem append kontrol display:noneetmek styleelemanın öznitelik.

— Klemen Slavič
kaynak

-5

Temel hide yöntemini kullandığınızda fark olmadığını görün. Ancak jquery, öğeye efektler veren çeşitli gizleme yöntemi sağlar. Ayrıntılı açıklama için aşağıdaki bağlantıya bakın: Jquery'de Gizleme Efektleri

— nilesh panchal
kaynak