用jQuery写一个简易留言板
时间: 2023-10-09 12:08:14 浏览: 278
好的,以下是一个简易留言板的jQuery代码示例:
HTML部分:
```html
<div>
<h2>留言板</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言内容:</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="button" id="submit">提交留言</button>
</form>
<div id="messages">
<h3>历史留言</h3>
<ul>
</ul>
</div>
</div>
```
jQuery部分:
```javascript
$(document).ready(function() {
// 点击提交按钮时
$("#submit").click(function() {
// 获取表单中的姓名和留言内容
var name = $("#name").val();
var message = $("#message").val();
// 如果姓名和留言内容都不为空
if (name && message) {
// 将留言添加到历史留言列表中
$("#messages ul").append("<li><strong>" + name + ":</strong> " + message + "</li>");
// 清空表单
$("#name").val("");
$("#message").val("");
} else {
alert("请填写姓名和留言内容!");
}
});
});
```
以上代码实现了一个简单的留言板,当用户填写姓名和留言内容并点击提交按钮时,会将留言添加到历史留言列表中。如果姓名和留言内容有一项为空,则会弹出提示框提示用户。