JavaScript中的val()是一個非常常用的函數，它主要用于獲取或者設置HTML元素的值。常見的應用場景有表單驗證、搜索框輸入等等。下面我們來詳細了解一下val()函數的使用。

首先我們來看一個例子。假設我們有一個form表單，里面有一個文本輸入框和一個按鈕。當用戶點擊按鈕時，我們需要獲取輸入框中的值并進行處理。那么這個時候我們就可以使用val()函數來獲取輸入框的值。

<form id="myForm">
<input type="text" id="myInput">
<button onclick="handleClick()">Click me</button>
</form>
<script>
function handleClick() {
var inputValue = document.getElementById("myInput").value;
// 使用inputValue進行數據處理
}
</script>

在這個例子中，我們通過document.getElementById()方法獲取了id為"myInput"的輸入框元素，然后通過調用它的value屬性來獲得輸入框中的值。這個過程可以簡寫為$("#myInput").val()，同樣可以獲取輸入框中的值。

除了獲取值以外，val()函數還可以用于設置元素的值。比如說，我們有一個下拉列表，當用戶進行選擇時，我們需要動態的改變一個文本框中的值。這個時候，我們就可以使用val()函數來設置這個文本框的值。

<select id="mySelect" onchange="handleChange()">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="watermelon">Watermelon</option>
</select>
<input type="text" id="myInput">
<script>
function handleChange() {
var selectValue = document.getElementById("mySelect").value;
document.getElementById("myInput").value = selectValue;
// 或者簡寫為$("#myInput").val(selectValue);
}
</script>

在這個例子中，我們通過onchange事件監聽下拉列表的變化，當選項變化時，我們就調用handleChange()函數來改變文本框的值。在函數中，我們通過調用document.getElementById("myInput").value來設置文本框的值，但是這個過程同樣可以使用val()函數來實現。

除了上面兩種用法，val()函數還可以用于判斷一個復選框或單選框是否被選中，以及設置復選框或單選框的狀態。下面是具體的例子。

<input type="checkbox" id="myCheckbox">
<script>
console.log($("#myCheckbox").val()); // 輸出""
console.log($("#myCheckbox").is(":checked")); // 輸出false
$("#myCheckbox").val("on");
console.log($("#myCheckbox").val()); // 輸出"on"
console.log($("#myCheckbox").is(":checked")); // 輸出false
$("#myCheckbox").prop("checked", true);
console.log($("#myCheckbox").is(":checked")); // 輸出true
</script>

在這個例子中，我們首先初始化了一個復選框元素，id為"myCheckbox"。然后我們通過調用val()函數來獲取它的值，發現返回的是""。這是因為復選框默認是不設置value屬性的。接著，我們通過調用is(":checked")來判斷復選框是否被選中，發現返回的是false。

如果我們需要獲取選中的值或者設置復選框的值，那么就需要手動給它設置value值。我們可以通過調用val("on")來設置復選框的value值為"on"。設置完之后，我們再次調用val()函數來獲取它的值，這個時候返回的就是"on"了。

最后，我們通過調用prop("checked", true)函數來設置復選框的狀態為選中狀態。這個時候，再次調用is(":checked")函數，就會返回true了。

綜上所述，val()函數是一個非常重要的JavaScript函數，可以用于獲取或者設置HTML元素的值。在實際項目中，我們經常會用到它來進行表單驗證、頁面交互等等操作。希望本文的介紹能夠幫助大家更加深入的了解它的使用。