jQuery中的val()方法是用于獲取或設置表單元素的值的方法。無論是文本框、選擇框、單選框還是復選框，val()方法可以幫助我們獲取輸入框中的值，并且也可以用于設置輸入框的值。在編寫代碼時，理解val()方法的功能及其使用方法是非常重要的。
首先，讓我們來看一個簡單的示例來演示val()方法的作用。假設我們有一個簡單的HTML表單，其中包含一個文本框和一個按鈕。我們想要實現點擊按鈕后，將文本框中的值彈出顯示在頁面上。這時候，可以使用.val()方法獲取文本框中的值。以下是示例代碼：
<!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>
登錄后復制
在上面的示例中，我們使用了.val()方法來獲取文本框的值，并將其顯示在頁面上。當點擊按鈕時，會觸發click事件處理函數，其中使用.val()方法獲取文本框中的值，并通過.text()方法將其顯示在頁面上。
除了獲取文本框的值，val()方法還可以用來設置文本框的值。例如，如果我們希望在頁面加載時自動填充文本框，可以使用.val()方法來設置初始值。以下是另一個示例代碼：
<!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>
登錄后復制
在這個示例中，我們使用.val()方法將文本框的值設置為”Hello World”。當點擊按鈕時，會觸發click事件處理函數，其中使用.val()方法設置文本框的值為”Hello World”。
總結來說，jQuery中的val()方法是一個非常方便的方法，可以幫助我們獲取和設置表單元素的值。通過適當的代碼示例，我們可以更好地理解val()方法的用法和作用。
