acara perubahan pelayar jquery

jQuery ialah perpustakaan JavaScript popular yang menyediakan banyak fungsi dan kaedah berguna yang memudahkan manipulasi dokumen HTML, termasuk bertindak balas kepada acara penyemak imbas. Salah satu acara penyemak imbas ialah acara mengubah saiz tetingkap.

Apabila pengguna menukar saiz tetingkap penyemak imbas, tindakan tertentu boleh dilakukan, seperti menyusun semula elemen halaman atau menyembunyikan/menunjukkan elemen tertentu. Dalam jQuery, anda boleh menggunakan fungsi resize() untuk bertindak balas kepada peristiwa mengubah saiz tetingkap. Fungsi

resize() boleh diikat pada fungsi yang dipanggil secara automatik apabila saiz tetingkap penyemak imbas berubah. Berikut ialah sintaks asas untuk menggunakan fungsi resize():

$(window).resize(function(){
  //Code to execute when the browser window is resized
});

Dalam contoh ini, kami mengikat acara ubah saiz tetingkap kepada fungsi tanpa nama yang akan dipanggil secara automatik apabila saiz tetingkap berubah.

Dalam fungsi tanpa nama ini, kita boleh menulis kod untuk bertindak balas kepada peristiwa mengubah saiz tetingkap. Sebagai contoh, kita boleh menggunakan fungsi jQuery's width() dan height() untuk mendapatkan saiz tetingkap penyemak imbas semasa, dan kemudian melaraskan elemen halaman mengikut keperluan.

Berikut ialah contoh apabila saiz tetingkap penyemak imbas berubah, ia akan memaparkan saiz tetingkap penyemak imbas baharu:

$(window).resize(function(){
  var w = $(window).width();
  var h = $(window).height();
  $('#size-display').html('<p>Window size: '+w+'x'+h+'</p>');
});

Dalam contoh ini, kami menggunakan fungsi html() jQuery Paparkan saiz tetingkap dalam elemen dengan ID "paparan saiz". Apabila saiz tetingkap pelayar berubah, fungsi akan dipanggil semula dan saiz yang dipaparkan akan dikemas kini.

Selain menulis kod dalam fungsi resize() untuk bertindak balas kepada peristiwa mengubah saiz tetingkap, anda juga boleh menggunakan pertanyaan media CSS untuk mengawal reka letak elemen halaman. Pertanyaan media ialah teknik dalam CSS (Cascading Style Sheets) yang boleh menggunakan gaya berbeza berdasarkan jenis peranti dan saiz skrin yang berbeza.

Berikut ialah contoh menyembunyikan elemen dengan ID "resize-box" apabila saiz tetingkap penyemak imbas mencapai saiz tertentu:

@media screen and (max-width: 768px){
  #resize-box{
    display: none;
  }
}

Dalam contoh ini, kami Menggunakan peraturan CSS @media untuk mengesan sama ada lebar maksimum skrin kurang daripada atau sama dengan "768px". Jika ya, sembunyikan salah satu elemen ID dalam kotak ubah saiz.

Menggunakan ubah saiz acara dan pertanyaan media, anda boleh mengawal reka letak dan paparan elemen halaman dengan berkesan. Dalam proses itu, jQuery boleh memudahkan kod anda dan menyediakan banyak fungsi dan kaedah yang berguna untuk memanipulasi dokumen HTML dan bertindak balas kepada peristiwa penyemak imbas.

Atas ialah kandungan terperinci acara perubahan pelayar jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!