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?

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.


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.


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

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


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.


1

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


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.