JavaScript ialah bahasa serba boleh terkenal yang kebanyakannya digunakan untuk menambah fungsi interaktif pada tapak web. Ia datang dengan perpustakaan bernama jQuery yang melaksanakan tugas-tugas ini dengan cekap. Kaedah jQuery pada asasnya adalah tindakan yang melaksanakan tugas tertentu tanpa banyak penglibatan kod. Salah satu kaedah tersebut ialah “ ubah() ' kaedah yang menyalakan peristiwa 'perubahan' untuk segera menyedari bahawa nilai medan input diubah. Ia kebanyakannya digunakan dalam medan borang HTML serta kotak semak, butang radio, dan kotak pilihan.
Tulisan ini menghuraikan tentang pelaksanaan kerja dan praktikal kaedah 'perubahan()' jQuery.
Bagaimanakah Kaedah 'change()' jQuery Berfungsi?
jQuery ' ubah() kaedah 'menyalakan' ubah ' Pengurus acara. Peristiwa 'perubahan' ialah jenis acara JavaScript khas yang berlaku apabila nilai elemen HTML yang ditentukan(' ', '
Sintaks
$ ( pemilih ) .ubah ( fungsi )
Dalam sintaks di atas:
-
- pemilih: Ia membenarkan manipulasi elemen HTML.
- fungsi: Ia adalah parameter pilihan yang menentukan fungsi untuk dilaksanakan dengan kaedah 'change()'.
Contoh 1: Menggunakan Kaedah “change()” untuk Mendapatkan Nilai Berubah Medan Input
Dalam contoh ini, ' ubah() Kaedah ” digunakan untuk mengembalikan nilai elemen “ ” HTML tertentu.
Kod HTML
Pertama, gambaran keseluruhan kod HTML berikut:
< h2 > perubahan jQuery ( ) Kaedah h2 >< hlm > Tukar nilai medan input: hlm >
Medan Input: < input menaip = 'teks' nilai = 'Linux' onchange = 'alert(this.value)' >
< hlm > Klik pada butang yang diberikan untuk menyalakan 'bertukar' acara: hlm >
< butang > Tekan di sini butang >
Dalam blok kod ini:
-
- Tentukan subtajuk tahap 2 menggunakan “ ” tag.
- Seterusnya, nyatakan perenggan dengan bantuan ' ” tag.
- Selepas itu, tambah medan input melalui ' 'tag bernama' Medan Input ”, mempunyai jenis sebagai “ teks ”, dan nilai sebagai “ Linux ”, masing-masing.
- Ia juga mengaitkan ' onchange() ” peristiwa yang muncul kotak amaran apabila nilai input yang ditentukan berubah.
- ' teg ” mencipta perenggan lain dengan pernyataan yang dinyatakan.
- Akhir sekali, tambahkan butang menggunakan '
” tag.
Kod jQuery
Sekarang, pertimbangkan kod jQuery berikut:
< kepala >< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skrip >
< skrip >
$ ( dokumen ) .sedia ( fungsi ( ) {
$ ( 'butang' ) .klik ( fungsi ( ) {
$ ( 'input' ) .ubah ( ) ;
} ) ;
} ) ;
skrip >
kepala >
Dalam baris kod di atas:
-
- Nyatakan “
teg ” dalam bahagian “head” yang merangkumi laluan CDN jQuery daripada tapak web rasmi “ ”. - Seterusnya, kod jQuery pertama kali sepadan dengan ' dokumen ” pemilih untuk memilih elemen DOM yang disasarkan dan mengaitkan “ sedia() ” kaedah yang memanggil function() yang dinyatakan sebaik sahaja dokumen dimuatkan.
- Selepas itu, ' butang ' pemilih ditambah dan dipautkan dengan ' klik() ” kaedah yang akan membenarkan pelaksanaan fungsi apabila butang klik.
- Dalam definisi fungsi, gunakan ' ubah() ' kaedah pada ' input ” elemen yang menyalakan peristiwa “onchange” apabila nilainya berubah.
- Nyatakan “
Pengeluaran
Output memaparkan kotak amaran dengan nilai berubah bagi medan input apabila peristiwa 'perubahan' yang dicetuskan.
Contoh 2: Menggunakan Kaedah “change()” untuk Menukar Warna Latar Belakang Medan Input
Contoh khusus ini menerangkan cara kerja ' ubah() ” kaedah untuk menukar warna latar belakang medan input apabila menukar nilai.
Kod HTML
Ikuti kod HTML yang diberikan:
< h2 > perubahan jQuery ( ) Kaedah h2 >< hlm > Tukar nilai medan input: hlm >
Medan Input: < input menaip = 'teks' nilai = 'Linux' > hlm >
Di sini, elemen ' ' hanya menentukan jenis dan nilainya.
Kod jQuery
Sekarang, teruskan ke kod jQuery:
< kepala >< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skrip >
< skrip >
$ ( dokumen ) .sedia ( fungsi ( ) {
$ ( 'input' ) .ubah ( fungsi ( ) {
$ ( ini ) .css ( 'warna latar belakang' , 'kuning' ) ;
} ) ;
} ) ;
skrip >
kepala >
Dalam baris kod di atas, ' ubah () kaedah ' melampirkan ' fungsi() ” yang menggunakan sifat penggayaan “CSS” “ warna latar belakang ” pada elemen HTML yang dipilih iaitu, “input” pada nilai input yang diubah.
Pengeluaran
Output mengesahkan bahawa warna latar belakang medan input yang diberikan berubah apabila nilainya ditukar.
Kesimpulan
jQuery menawarkan ' ubah() ” kaedah yang menyalakan peristiwa “perubahan” apabila pengguna menukar nilai medan input. Ia juga boleh dikaitkan dengan acara tambahan untuk menyokong fungsinya Ia hanya berfungsi pada elemen HTML “ ”, “