jQuery是一種強大的JavaScript庫,它為Web開發人員提供了許多便利的功能。在這篇文章中,我們將學習如何使用jQuery input增加和刪除的功能。
// HTML代碼
<input type="text" id="myInput" />
<button id="addButton">新增</button>
<button id="deleteButton">刪除</button>
// jQuery代碼
$(document).ready(function() {
// 給新增按鈕添加點擊事件
$("#addButton").click(function() {
// 獲取輸入框的值
var val = $("#myInput").val();
// 如果輸入框的值不為空
if (val !== "") {
// 動態創建一個li元素,并添加到ul列表中
$("ul").append("<li>" + val + "</li>");
// 清空輸入框的值
$("#myInput").val("");
}
});
// 給刪除按鈕添加點擊事件
$("#deleteButton").click(function() {
//移除最后一個li元素
$("ul li:last").remove();
});
});
代碼說明:
1. 首先,在HTML代碼中我們創建了一個id為“myInput”的文本框,以及兩個按鈕,“新增”和“刪除”。
2. 在jQuery代碼中,我們使用$(document).ready()來確保頁面已經完全加載后再執行代碼。
3. 我們使用$("#addButton")和$("#deleteButton")來選擇我們的兩個按鈕,并為它們分別添加了一個click事件。
4. 在“新增”按鈕的click事件中,我們首先使用$("#myInput").val()獲取輸入框中的值,并將其保存在變量val中。
5. 如果輸入框的值不為空,我們動態創建一個li元素,并將新的項添加到列表中。最后,我們使用$("#myInput").val("")清空輸入框的值。
6. 在“刪除”按鈕的click事件中,我們使用$("ul li:last").remove()來移除列表中的最后一項。
通過上述代碼,我們可以在頁面中自由增加和刪除文本框中的內容。
上一篇$notify vue
下一篇c 后臺寫html代碼