Perbedaan antara jQuery's .hide () dan pengaturan CSS untuk ditampilkan: tidak ada

Mana yang lebih baik saya lakukan? .hide()lebih cepat daripada menulis .css("display", "none"), tetapi apa bedanya dan apa yang sebenarnya mereka berdua lakukan terhadap elemen HTML?

Dari halaman jQuery tentang .hide () :

"Elemen yang cocok akan segera disembunyikan, tanpa animasi. Ini kira-kira setara dengan memanggil .css ('display', 'none'), kecuali bahwa nilai properti tampilan disimpan dalam cache data jQuery sehingga tampilan nanti dapat dikembalikan ke nilai awalnya. Jika suatu elemen memiliki nilai tampilan inline, kemudian disembunyikan dan ditampilkan, itu sekali lagi akan ditampilkan inline. "

Jadi, jika penting Anda dapat kembali ke nilai sebelumnya display, sebaiknya gunakan hide()karena keadaan sebelumnya diingat. Selain itu tidak ada perbedaan.

$(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()menyimpan properti sebelumnya display sesaat sebelum menyetelnya none, jadi jika itu bukan displayproperti standar untuk elemen yang Anda sedikit lebih aman, .show()akan menggunakan properti yang disimpan itu untuk kembali. Jadi ... itu memang bekerja ekstra, tetapi kecuali Anda melakukan banyak elemen, perbedaan kecepatan harus diabaikan.

Melihat kode jQuery, inilah yang terjadi:

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

Mereka adalah hal yang sama. .hide()memanggil fungsi jQuery dan memungkinkan Anda untuk menambahkan fungsi callback ke dalamnya. Jadi, dengan .hide()Anda dapat menambahkan animasi misalnya.

.css("display","none")mengubah atribut elemen menjadi display:none. Sama seperti jika Anda melakukan hal berikut dalam JavaScript:

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

The .hide()Fungsi jelas membutuhkan lebih banyak waktu untuk menjalankan karena pemeriksaan untuk fungsi callback, kecepatan, dll ...

Menggunakan keduanya adalah jawaban yang bagus; itu bukan pertanyaan tentang salah satu atau.

The Keuntungan dari menggunakan kedua adalah bahwa CSS akan segera menyembunyikan elemen ketika beban halaman. JQuery .hide akan mem-flash elemen selama seperempat detik kemudian menyembunyikannya.

Dalam kasus ketika kita ingin agar elemen tidak ditampilkan ketika halaman dimuat, kita dapat menggunakan CSS dan mengatur tampilan: tidak ada & menggunakan jQuery .hide (). Jika kita berencana untuk beralih elemen kita dapat menggunakan jQuery toggle.

Keduanya melakukan hal yang sama pada semua browser, AFAIK. Diperiksa pada Chrome dan Firefox, baik append display:noneke styleatribut elemen.

Lihat tidak ada perbedaan jika Anda menggunakan metode hide dasar. Tapi jquery menyediakan berbagai metode sembunyikan yang memberi efek pada elemen. Lihat tautan di bawah ini untuk penjelasan terperinci: Efek untuk Sembunyikan di Jquery