paparan halaman pemantauan jquery dan sembunyikan

Dalam pembangunan web, kami sering menghadapi situasi di mana kami perlu mengawal paparan dan penyembunyian elemen secara dinamik. Sebagai contoh, selepas pengguna berjaya log masuk, paparkan mesej alu-aluan atau apabila menatal halaman, apabila elemen menatal ke tengah skrin, hidupkan kesan animasi elemen. Sebagai tindak balas kepada keperluan ini, jQuery menyediakan beberapa API untuk memaparkan dan menyembunyikan halaman pemantauan.

1. Kaedah $(window).scroll()

Kaedah $(window).scroll() mewakili fungsi pemprosesan peristiwa yang dicetuskan apabila tetingkap ditatal. Dengan mendengar acara tatal tetingkap, anda boleh memaparkan atau menyembunyikan elemen secara dinamik.

Berikut ialah contoh kod apabila roda menatal ke kedudukan 500px dari bahagian atas halaman, elemen dalam halaman akan dipaparkan:

$(window).scroll(function(){
  if($(window).scrollTop() >= 500){
    $("#element").show();
  }
});

Penjelasan kod:

• $(window).scroll(): Dengar acara skrol tetingkap;
• $(window).scrollTop(): Dapatkan jarak skrol semasa tetingkap; >
if($( window).scrollTop() >= 500): Jika roda skrol mencapai atau melebihi 500px, laksanakan kod berikut; ): Tukar id kepada "elemen" dipaparkan.
• 2. Kaedah $(window).resize()

Kaedah $(window).resize() mewakili fungsi pemprosesan peristiwa yang dicetuskan apabila saiz tetingkap berubah. Dengan mendengar peristiwa perubahan saiz tetingkap, anda boleh melaraskan saiz dan kedudukan elemen pada halaman secara dinamik.

Berikut ialah contoh kod Apabila lebar tetingkap kurang daripada atau sama dengan 768px, elemen dalam halaman akan disembunyikan:

$(window).resize(function(){
  if($(window).width() <= 768){
    $("#element").hide();
  }
});

Penjelasan kod:

$ (window).resize(): Dengar peristiwa perubahan saiz tetingkap;

$(window).width(): Dapatkan lebar tingkap; 🎜>if($(window).width( ) <= 768): Jika lebar tetingkap kurang daripada atau sama dengan 768px, laksanakan kod berikut; .hide(): Sembunyikan elemen dengan id "elemen".
• 3. kaedah $(document).ready() dan kaedah $(window).load()
• $(document).ready() bermaksud apabila halaman DOM dimuatkan Fungsi pengendali acara dicetuskan selepas selesai. Kaedah $(window).load() mewakili fungsi pemprosesan acara yang dicetuskan apabila semua elemen dalam halaman (termasuk imej dan sumber lain) dimuatkan. Dalam kedua-dua kaedah ini, anda juga boleh melaksanakan paparan dinamik atau operasi menyembunyikan pada elemen halaman.
• Berikut ialah contoh kod Apabila semua elemen dalam halaman dimuatkan, elemen dalam halaman akan dipaparkan:

$(window).load(function(){
  $("#element").show();
});

Penjelasan kod:

$(window).load(): Dengar acara penyiapan pemuatan semua elemen pada halaman (termasuk imej dan sumber lain); dengan id "elemen" Tunjukkannya.

4 Kaedah lain

Selain kaedah yang diperkenalkan di atas, jQuery juga menyediakan beberapa kaedah lain untuk memaparkan atau menyembunyikan unsur secara dinamik, seperti:

• <.>$(elemen).fadeIn() / $(elemen).fadeOut(): merealisasikan kesan fade-in/fade-out bagi elemen; elemen ).slideUp(): menyedari kesan tarik-turun/tarik-atas elemen;
• $(elemen).toggle(): merealisasikan penukaran antara paparan dan penyembunyian elemen.

Ringkasan:

Di atas memperkenalkan beberapa cara untuk mengawal paparan dan penyembunyian unsur secara dinamik ia boleh mencapai kawalan dinamik elemen halaman melalui senario yang berbeza. Dalam pembangunan sebenar, kaedah yang sesuai harus dipilih berdasarkan keperluan khusus untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci paparan halaman pemantauan jquery dan sembunyikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!