Dalam reka bentuk web, kesan dinamik boleh menarik perhatian pengguna dan meningkatkan pengalaman pengguna. jQuery ialah perpustakaan JavaScript yang sangat berkuasa dan mudah digunakan yang boleh digunakan untuk menukar rupa dan tingkah laku halaman web. Dalam artikel ini, kami akan menunjukkan kepada anda cara memilih elemen div dan menukar saiznya menggunakan jQuery.
1. Apakah itu pemilih jQuery
Dalam jQuery, pemilih digunakan untuk memilih elemen HTML. Anda boleh memilih satu atau berbilang elemen menggunakan sintaks pemilih CSS atau sintaks pemilih khusus jQuery. Berikut ialah beberapa jenis pemilih yang biasa digunakan:
1 Pemilih elemen: Pilih elemen HTML tertentu, seperti p, div, a, dsb.
2. Pemilih kelas: Pilih elemen dengan nama kelas yang sama, seperti .class.
Pemilih 3.ID: Pilih elemen dengan ID yang sama, seperti #id.
4. Pemilih atribut: Pilih elemen dengan atribut atau nilai atribut tertentu, seperti [name='name'].
5. Pemilih kelas Pseudo: pilih elemen dalam keadaan tertentu, seperti :hover, :first-child, dsb.
6. Pemilih hierarki: Pilih elemen induk atau elemen anak tertentu, seperti #parent>div.
7 Pemilih penapis: Pilih elemen yang memenuhi syarat, seperti: pertama, : terakhir, dsb.
2. Gunakan pemilih jQuery untuk memilih elemen div
Antaranya, pemilih digunakan untuk memilih elemen HTML. Kita boleh menggunakannya untuk mengubah rupa dan tingkah laku elemen.
Pertama, anda perlu mencipta elemen div dalam halaman HTML anda. Sila lihat contoh kod di bawah:
Kod di atas akan mencipta div dengan id dalam halaman Elemen div "myDiv". Kami akan menggunakan pemilih jQuery untuk memilihnya dan menukar saiznya.
Untuk memilih elemen div yang mengandungi id "myDiv", gunakan kod berikut:
$("#myDiv")
Kod di atas menggunakan "$" jQuery simbol Untuk memilih elemen dengan id "myDiv". Dalam kes ini, ia akan memilih elemen div yang kami takrifkan dalam HTML.
3. Gunakan jQuery untuk menukar saiz elemen div
Selepas memilih elemen div, anda boleh menggunakan kaedah jQuery untuk menukar ketinggian dan lebarnya. Berikut ialah beberapa kaedah yang biasa digunakan:
Sebagai contoh, untuk menetapkan ketinggian elemen kepada 200 piksel, gunakan kod berikut:
$("#myDiv").height(200);
Sebagai contoh, untuk menetapkan lebar elemen kepada 300 piksel, gunakan kod berikut:
$("#myDiv").width(300);
Sebagai contoh, untuk menetapkan ketinggian dan lebar elemen kepada 200 piksel dan 300 piksel, gunakan kod berikut:
$("#myDiv").css( {' height':'200px', 'width':'300px'});
Nota: Apabila menggunakan kaedah css(), anda perlu menyertakan nama atribut dalam petikan, seperti 'height' dan 'lebar' .
4. Gunakan kesan animasi untuk menukar saiz elemen div
Untuk menjadikan halaman anda lebih dinamik dan menambah beberapa kesan animasi apabila menukar saiz div, anda boleh menggunakan kaedah kesan animasi jQuery. Berikut ialah beberapa kod sampel yang menggunakan kaedah kesan animasi untuk menukar saiz elemen div:
Contohnya, untuk menukar ketinggian elemen daripada 100 kepada 200 piksel dalam masa 3 saat:
$("#myDiv").animate({'height':' 200px' }, 3000);
Sebagai contoh, setiap kali elemen div diklik, ketinggian elemen akan menogol antara 100 dan 200 piksel:
$("#myDiv").toggle(3000 , fungsi (){
$(this).height(($(this).height()==100)?200:100);
});
Sebagai contoh, setiap kali elemen div diklik, ketinggian elemen akan meningkat atau berkurangan antara 100 dan 200 piksel:
$("#myDiv").klik (fungsi (){
$(this).slideToggle(3000);
});
Di atas ialah beberapa contoh kod yang menggunakan kaedah kesan animasi untuk menukar saiz div dalam jQuery.
Ringkasan:
Dalam reka bentuk web, kesan dinamik boleh menarik perhatian pengguna dan meningkatkan pengalaman pengguna. Menukar saiz elemen div boleh dilakukan dengan mudah menggunakan pemilih dan kaedah jQuery. Anda boleh menggunakan sintaks pemilih CSS atau sintaks pemilih khusus jQuery untuk memilih elemen tunggal atau berbilang, dan menggunakan kaedah height(), width(), atau css() untuk menukar ketinggian dan lebar elemen. Jika anda ingin menjadikan halaman anda lebih dinamik dan menambah beberapa kesan animasi apabila menukar saiz div, anda boleh menggunakan kaedah kesan animasi jQuery seperti kaedah animate(), toggle() atau slideToggle().
Atas ialah kandungan terperinci jquery pilih saiz perubahan div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!