简易留言板jquery
时间: 2024-10-17 17:01:05 浏览: 10
简易的jQuery留言板通常包含以下几个步骤:
1. **HTML结构**:首先创建一个基本的HTML布局,包括输入框、提交按钮和显示留言区域。例如:
```html
<div id="messageForm">
<input type="text" name="message" placeholder="请输入留言...">
<button id="submitBtn">提交</button>
</div>
<div id="messages"></div>
```
2. **jQuery绑定**:使用jQuery选择器选中元素,并添加事件处理函数。比如,当用户点击提交按钮时,会获取输入框的内容并显示在`#messages`区域内。
```javascript
$(document).ready(function(){
$('#submitBtn').click(function(e){
e.preventDefault(); // 阻止默认提交行为
var message = $('#messageForm input[name=message]').val();
if (message) { // 检查是否有内容
addMessage(message);
clearInput(); // 清空输入框
}
});
});
```
3. **添加留言功能**:创建`addMessage`函数来动态插入新的留言到页面上,可以使用`.append()`方法。
```javascript
function addMessage(message) {
$('#messages').append('<p>' + message + '</p>');
}
function clearInput() {
$('#messageForm input[name=message]').val('');
}
```
4. **样式美化**:通过CSS调整样式,使留言看起来更专业。
阅读全文