jQuery留言板

介绍

jQuery是一个广泛应用于Web开发中的JavaScript库。它是一个快速、简洁并且功能丰富的库，使得JavaScript编码变得更加高效和便捷。在本文中，我们将使用jQuery来创建一个简单的留言板示例。

准备工作

在开始之前，我们需要确保以下几个条件已满足：

  1. 在HTML文件中引入jQuery库：

    <script src="

  2. 在HTML文件中创建一个包含表单和留言列表的区域：

    <div id="message-board">
  <form id="message-form">
    <input type="text" id="name-input" placeholder="姓名" required>
    <textarea id="message-input" placeholder="留言" required></textarea>
    <button type="submit">提交</button>
  </form>
  <ul id="message-list"></ul>
</div>

功能实现

添加留言

首先，我们需要实现添加留言的功能。当用户在表单中输入姓名和留言并点击提交按钮时，我们将获取表单的值，并将其添加到留言列表中。在JavaScript文件中添加以下代码：

$(document).ready(function() {
  $('#message-form').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var name = $('#name-input').val();
    var message = $('#message-input').val();

    var listItem = $('<li>').text(name + ': ' + message); // 创建一个包含姓名和留言的列表项
    $('#message-list').append(listItem); // 将列表项添加到留言列表中

    $('#name-input').val('');
    $('#message-input').val('');
  });
});

上述代码首先在DOM准备就绪时绑定了一个submit事件的处理函数。在事件处理函数中，我们阻止了表单的默认提交行为，然后获取了姓名和留言的值。接下来，我们创建一个包含姓名和留言的列表项，并将其添加到留言列表中。最后，我们清空了输入框的值，以便用户输入下一条留言。

通过以上代码，我们已经实现了添加留言的功能。

响应式设计

为了提升用户体验，我们还可以对留言板进行一些样式的调整，使其在不同设备上显示更加友好。例如，我们可以使用CSS的媒体查询来调整表单和留言列表的布局。在CSS文件中添加以下代码：

@media screen and (max-width: 600px) {
  #message-board {
    flex-direction: column;
  }

  #message-input {
    height: 100px;
  }
}

上述代码中，我们使用媒体查询来检测屏幕宽度是否小于600像素。如果满足条件，我们将留言板的方向设置为垂直布局，并增加了留言输入框的高度。这样，在小屏幕设备上，留言板将以垂直布局显示，更加适合用户操作。

完整代码

下面是完整的HTML、CSS和JavaScript代码，包括上述所述的功能和样式调整：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery留言板</title>
  <style>
    @media screen and (max-width: 600px) {
      #message-board {
        flex-direction: column;
      }

      #message-input {
        height: 100px;
      }
    }
  </style>
</head>
<body>
  <div id="message-board">
    <form id="message-form">
      <input type="text" id="name-input" placeholder="姓名" required>
      <textarea id="message-input" placeholder="留言" required></textarea>
      <button type="submit">提交</button>
    </form>
    <ul id="message-list"></ul>
  </div>

  <script src="
  <script>
    $(document).ready(function() {
      $('#message-form').submit(function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var name = $('#name-input').val();
        var message = $('#message-input').val