Rumah >hujung hadapan web >tutorial js >Fahami peranan kaedah val dalam jQuery
Fahami peranan kaedah val dalam jQuery
- 王林asal
- 2024-02-28 22:00:04849semak imbas
Kaedah val() dalam jQuery ialah kaedah yang digunakan untuk mendapatkan atau menetapkan nilai elemen bentuk. Sama ada kotak teks, kotak pilihan, butang radio atau kotak semak, kaedah val() boleh membantu kami mendapatkan nilai dalam kotak input, dan juga boleh digunakan untuk menetapkan nilai kotak input. Apabila menulis kod, adalah sangat penting untuk memahami kaedah val() dan cara menggunakannya.
Mula-mula, mari kita lihat contoh mudah untuk menunjukkan peranan kaedah val(). Katakan kita mempunyai borang HTML ringkas yang mengandungi kotak teks dan butang. Kami mahu memaparkan nilai dalam kotak teks dan memaparkannya pada halaman selepas mengklik butang. Pada masa ini, anda boleh menggunakan kaedah .val() untuk mendapatkan nilai dalam kotak teks. Berikut ialah kod sampel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery val()方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="textInput">
<button id="showValue">显示数值</button>
<div id="display"></div>
<script>
$(document).ready(function(){
$('#showValue').click(function(){
var textValue = $('#textInput').val();
$('#display').text(textValue);
});
});
</script>
</body>
</html>Dalam contoh di atas, kami telah menggunakan kaedah .val() untuk mendapatkan nilai kotak teks dan memaparkannya pada halaman. Apabila butang diklik, pengendali acara klik dicetuskan, yang menggunakan kaedah .val() untuk mendapatkan nilai dalam kotak teks dan memaparkannya pada halaman melalui kaedah .text().
Selain mendapatkan nilai kotak teks, kaedah val() juga boleh digunakan untuk menetapkan nilai kotak teks. Contohnya, jika kita mahu kotak teks diisi secara automatik apabila halaman dimuatkan, kita boleh menggunakan kaedah .val() untuk menetapkan nilai awal. Berikut ialah kod sampel lain:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery val()方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="textInput">
<button id="setValue">设置为Hello World</button>
<script>
$(document).ready(function(){
$('#setValue').click(function(){
$('#textInput').val("Hello World");
});
});
</script>
</body>
</html>Dalam contoh ini, kami menggunakan kaedah .val() untuk menetapkan nilai kotak teks kepada "Hello World". Apabila butang diklik, pengendali acara klik dicetuskan, di mana kaedah .val() digunakan untuk menetapkan nilai kotak teks kepada "Hello World".
Ringkasnya, kaedah val() dalam jQuery ialah kaedah yang sangat mudah yang boleh membantu kita mendapatkan dan menetapkan nilai elemen bentuk. Dengan contoh kod yang sesuai, kita boleh lebih memahami penggunaan dan peranan kaedah val().
Atas ialah kandungan terperinci Fahami peranan kaedah val dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!