jquery mengalih keluar gaya input

Dalam reka bentuk web, selalunya diperlukan untuk mendapatkan data input pengguna melalui borang HTML. Apabila pengguna memasukkan data, gaya kotak input secara langsung akan mempengaruhi pengalaman input pengguna. Walau bagaimanapun, kotak input teks yang disertakan dengan penyemak imbas mungkin tidak memenuhi keperluan pereka bentuk. Oleh itu, pereka bentuk perlu menggunakan beberapa teknik untuk menjadikan bentuk lebih cantik dan boleh dikendalikan. Artikel ini akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mengalih keluar gaya input.

1. Apakah itu jQuery

jQuery ialah perpustakaan JavaScript yang popular yang boleh memudahkan tugas seperti memproses dokumen HTML, mengendalikan acara, mengendalikan animasi dan Ajax. jQuery ialah alat yang memfokuskan pada pembangunan pesat, dan asas kodnya yang ringan menjadikannya lebih sesuai untuk pembangunan aplikasi Internet moden.

2. Keluarkan gaya input

1. Mula-mula, kita perlu menentukan kelas untuk mewakili penampilan selepas kita mengalih keluar gaya input. Kelas ini boleh mengandungi sebarang gaya yang anda rasa perlu, seperti fon, warna latar belakang, jidar, dsb. Di sini, kami mengambil .demo-class sebagai contoh untuk menunjukkan cara melaksanakan kod berikut:

.demo-class {
background-color: #f7f7f7;
border: 1px solid #ccc ;
warna: #333;
saiz fon: 16px;
padding: 5px 10px;
}

2. Untuk tugasan ini, kita boleh menggunakan kod berikut:

$(document).ready(function(){
$('input').addClass('demo-class');
} );

3. Kod di atas akan menambah kelas .demo-class pada setiap elemen input dalam dokumen. Ini ialah cara yang mudah tetapi berkesan untuk mengalih keluar gaya daripada elemen input. Sudah tentu, ini hanyalah fungsi kecil dalam jQuery Terdapat kaedah lain dalam jQuery untuk mengalih keluar gaya input.

4. Dalam sesetengah kes, kotak input tertentu dalam bentuk mempunyai keperluan gaya khas. Contohnya, kotak teks tertentu perlu menggunakan warna teks yang berbeza Takrif semula gaya. Contohnya, contoh berikut:

.kelas demo {
/ gaya biasa untuk semua elemen input /
}
.kelas khas {
warna: merah;
}

5. Dalam contoh ini, kami menggunakan id untuk mentakrifkan kotak input teks khas dan menggunakan kelas untuk mengatasi gaya kotak teks. jQuery menggunakan kod berikut untuk melaksanakan:

$(document).ready(function(){
$('input:not(#special-input)').addClass('demo -class ');
});

6 Sekarang, kecuali untuk kotak input tertentu, semua kotak input lain menggunakan gaya .demo-class. Untuk .single-class, gaya yang kami tentukan hanya akan berkuat kuasa pada kotak input dengan input khas ID.

Ringkasan

Dengan menggunakan jQuery untuk mengalih keluar gaya input, kami boleh mengawal estetika dan kebolehkendalian borang dengan lebih baik. Kadangkala, kita perlu menggunakan beberapa kaedah penyambungan untuk menukar gaya elemen, dan kadangkala kita perlu menggunakan kelas atau ID untuk mengatasi gaya lalai elemen. Dalam kedua-dua kes, jQuery boleh membantu kami mencapai hasil yang terbaik.

Atas ialah kandungan terperinci jquery mengalih keluar gaya input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!