jquery menukar latar belakang butang

Dengan perkembangan teknologi JavaScript, semakin banyak laman web mula menggunakan JavaScript dan jQuery untuk melaksanakan pelbagai fungsi. Hari ini, saya akan menunjukkan kepada anda cara menggunakan jQuery untuk menukar latar belakang butang.

Pertama, mari kita lihat kod HTML:

<button id="btn1">按钮 1</button>
<button id="btn2">按钮 2</button>

Apa yang perlu kita ubah ialah warna latar belakang butang. Oleh itu, dalam fail CSS, kita perlu menentukan warna latar belakang butang:

button {
    background-color: #ccc;
}

Sekarang, mari gunakan jQuery untuk menukar warna latar belakang butang. Pertama, kita perlu menambah acara klik pada butang:

$("#btn1").click(function() {
    // TODO: 在这里添加代码
});

$("#btn2").click(function() {
    // TODO: 在这里添加代码
});

Kini, apabila butang 1 diklik, kita perlu menukar warna latar belakangnya kepada oren dan apabila butang 2 diklik, kita perlu menukarnya warna latar belakang Warna latar belakang bertukar kepada hijau. Mari tambah kod untuk melaksanakan fungsi ini.

$("#btn1").click(function() {
    $(this).css("background-color", "orange");
});

$("#btn2").click(function() {
    $(this).css("background-color", "green");
});

Apakah fungsi kod ini?

Pertama, kami menggunakan fungsi click() jQuery untuk menangkap peristiwa klik butang. Kemudian, kami menggunakan $(this) untuk merujuk butang yang telah diklik. Akhir sekali, kami menggunakan fungsi css() untuk mengubah suai warna latar belakang butang.

Sekarang, jalankan halaman web dan klik butang, anda akan mendapati bahawa warna latar belakang butang telah berjaya diubah suai.

Di atas ialah cara menggunakan jQuery untuk menukar warna latar belakang butang. Sudah tentu, anda boleh menggunakan fungsi jQuery lain untuk mencapai kesan butang yang lebih kompleks. Jika anda ingin mengetahui lebih lanjut mengenainya, anda boleh menyemak dokumentasi rasmi jQuery.

Atas ialah kandungan terperinci jquery menukar latar belakang butang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!