Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyembunyikan halaman jquery semasa memuatkan

Bagaimana untuk menyembunyikan halaman jquery semasa memuatkan

PHPz
PHPzasal
2023-04-17 15:00:39797semak imbas

jQuery ialah perpustakaan JavaScript yang biasa digunakan yang sering digunakan dalam pembangunan web. Dalam halaman web, kadangkala perlu menyembunyikan beberapa elemen apabila halaman dimuatkan dan tidak memaparkannya sehingga pengguna melakukan operasi tertentu. Jadi bagaimana untuk menggunakan jQuery untuk mencapai kesan ini? Artikel ini akan memperkenalkan anda kepada kaedah pelaksanaan khusus.

Mula-mula, muatkan fail perpustakaan jQuery sebelum menggunakan jQuery. Dalam fail html, ia boleh dirujuk dengan kod berikut:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Selepas memetik, kita boleh menggunakan kaedah dalam jQuery untuk menetapkan elemen untuk disembunyikan apabila halaman dimuatkan. Jadi apakah kaedah pelaksanaan khusus?

$(document).ready(function(){
    $("#element").hide();
});

Dalam kod di atas, kami menggunakan kaedah $(document).ready() untuk menunjukkan bahawa apabila dokumen dimuatkan, kod berikut dilaksanakan: dapatkan elemen dengan id "elemen" dan sembunyikannya.

Apa yang perlu diperhatikan di sini ialah operasi penyembunyian yang ditetapkan melalui jQuery adalah untuk menetapkan atribut paparan elemen kepada tiada. Elemen tersembunyi masih wujud dalam aliran dokumen, tetapi tidak kelihatan pada halaman. Ini sama seperti mengawal penyembunyian elemen melalui atribut paparan dalam CSS.

Kadangkala, pengguna perlu melakukan beberapa operasi khusus untuk elemen yang akan dipaparkan. Jadi apa yang kita lakukan? Kita boleh menggunakan beberapa fungsi acara dalam jQuery, seperti fungsi klik, fungsi mouseenter, dll. Di sini kita mengambil fungsi klik sebagai contoh:

$(document).ready(function(){
    $("#button").click(function(){
        $("#element").show();
    });
});

Dalam kod di atas, kami mendaftarkan fungsi klik pada elemen dengan id "butang". Apabila pengguna mengklik pada elemen, elemen dengan id "elemen" dipaparkan melalui kaedah $("#element").show().

Begitu juga, kita juga boleh menggunakan fungsi acara lain untuk mencapai kesan ini.

Selain menunjukkan dan menyembunyikan elemen, jQuery juga menyediakan banyak fungsi kesan lain untuk mencantikkan halaman. Sebagai contoh, elemen dipaparkan secara beransur-ansur melalui fungsi fadeIn() elemen dianimasikan melalui fungsi animate() gaya CSS elemen ditukar melalui fungsi toggleClass(), dll. Ini semua boleh dicapai dengan mudah melalui; jQuery.

Ringkasnya, melalui jQuery, kami boleh memaparkan dan menyembunyikan elemen halaman dengan mudah, memberikan pengguna pengalaman yang lebih baik. Pada masa yang sama, ia juga boleh mencapai kesan pengindahan halaman dengan lebih baik. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan halaman jquery semasa memuatkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn