利用jQuery设计和实现一个简单的留言板网页

以下是一个简单的留言板实现的代码示例：

HTML 部分（保存为 index.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Guestbook</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="guestbook">
    <h2>Simple Guestbook</h2>
    <form id="messageForm">
        <label for="nameField">Name:</label>
        <input type="text" id="nameField" name="name" required>
        <label for="messageField">Message:</label>
        <textarea id="messageField" name="message" required></textarea>
        <button type="submit">Post</button>
    </form>
    <h3>Messages:</h3>
    <ul id="messagesList">
        <!-- Messages will be displayed here -->
    </ul>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS 部分（保存为 styles.css）:




#guestbook {
    width: 500px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
}
 
#guestbook form {
    display: flex;
    flex-direction: column;
}
 
#guestbook form label {
    margin-bottom: 5px;
}
 
#guestbook form input, #guestbook form textarea {
    margin-bottom: 15px;
    padding: 8px;
}
 
#messagesList li {
    margin-top: 10px;
}

JavaScript 部分（保存为 script.js）:




$(document).ready(function() {
    $('#messageForm').submit(function(e) {
        e.preventDefault();
        var name = $('#nameField').val();
        var message = $('#messageField').val();
        $('#messagesList').append(`<li><strong>${name}:</strong> ${message}</li>`);
        $('#nameField').val('');
        $('#messageField').val('');
    });
});

这个例子中，留言板的HTML和CSS定义了页面的基本结构和样式。JavaScript代码使用jQuery监听表单的提交事件，并将用户输入的留言追加到消息列表中。当提交表单时，页面不会刷新，留言会实时显示在页面上。这个例子简单易懂，适合作为学习jQuery和简单Web开发的入门示例。

利用jQuery设计和实现一个简单的留言板网页

评论已关闭

推荐阅读