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

153

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?

benhowdle89
sumber

Jawaban:

208

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.

Stephan Muller
sumber
Masalahnya menggunakan .hide adalah setelah memuat ulang situs elemen hide masih mencari dalam 2 detik
TM
34

.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.

Nick Craver
sumber
13

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;
    }
},
Spiny Norman
sumber
12

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 ...

seedg
sumber
4

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.

Catto
sumber
1

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

Klemen Slavič
sumber
-5

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

panchal nilesh
sumber