jquery更改input輸入值

jQuery是一個非常強大的JavaScript函式庫，它提供了許多可以大幅簡化Web開發的函數和特性。其中一個常見的操作是更改input元素的輸入值。在本文中，我們將研究使用jQuery來變更input元素的輸入值。

jQuery選擇器

在使用jQuery更改input元素的輸入值之前，我們首先需要了解選擇器的概念。選擇器是用來選擇HTML元素的表達式。我們可以透過元素名稱、類別、ID、屬性等來選擇HTML元素。

以下是一些常見的jQuery選擇器：

1. 元素選擇器：透過元素名稱來選擇元素，例如：$("input")
2. 類選擇器：透過類別名稱來選擇元素，例如：$(".class")
3. ID選擇器：透過ID來選擇元素，例如：$("#id")
4. 屬性選擇器：透過元素屬性來選擇元素，例如：$("[name='username']")

#更改input元素的輸入值

#一般來說，我們可以透過val()函數來更改input元素的值。 val()函數是jQuery提供的一個用來取得和設定元素值的函數。以下是一個更改輸入框值的範例：

HTML程式碼：

<input id="username" type="text" value="Hello World!">

jQuery程式碼：

$("#username").val("New Value");

在上面的程式碼中，我們透過ID選擇器選擇了id為username的input元素，並且透過.val()函數將其值變更為「New Value」。

動態變更input元素的輸入值

有時，我們需要透過另一個元素的值動態來變更input元素的輸入值。例如，我們可以在點擊一個按鈕後，將一個文字方塊的值賦給另一個文字方塊。以下是一個範例：

HTML程式碼：

<input id="username1" type="text" value="Old Value">
<input id="username2" type="text" value="">

<button id="btn">Click me</button>

jQuery程式碼：

$("#btn").click(function() {
  var oldVal = $("#username1").val();
  $("#username2").val(oldVal);
});

在上面的程式碼中，我們透過click()函數為按鈕新增了一個點擊事件處理程序。當單擊按鈕時，它將獲取id為username1的元素的值，然後將其賦給id為username2的元素。

更多操作

除了.val()函數之外，jQuery還提供了許多其他函數，可以用來更改input元素的輸入值。以下是一些常用的函數：

1. text()函數：用於設定input元素的純文字內容，例如：$("#username").text("New text");
2. html()函數：用於將HTML程式碼設定為input元素的值，例如：$("#username").html("New HTML");
3. append()函數：用於將內容新增至input元素的結尾，例如：$("#username").append(" Appended Text");
4. prepend( )函數：用於將內容新增至input元素的開頭，例如：$("#username").prepend(" Prepended Text");

##總結

本文介紹如何使用jQuery來變更input元素的輸入值，以及一些常用的函數和選擇器。掌握這些技能可以讓開發人員更容易完成Web開發任務，提高工作效率。

以上是jquery更改input輸入值的詳細內容。更多資訊請關注PHP中文網其他相關文章！