jQuery设计留言板页面

这篇文章距离上次修改已过186天，其中的内容可能已经有所变动。

以下是一个使用jQuery创建简单留言板页面的示例代码：

HTML部分（index.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Guestbook with jQuery</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 Message</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 {
    margin-top: 20px;
}
 
#messagesList li {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    $('#messageForm').on('submit', function(e) {
        e.preventDefault();
        var name = $('#nameField').val();
        var message = $('#messageField').val();
 
        // Create a new list item with the message
        var newItem = $('<li>').text(name + ': ' + message);
 
        // Add the list item to the messages list
        $('#messagesList').append(newItem);
 
        // Clear the form fields
        $('#nameField').val('');
        $('#messageField').val('');
    });
});

这个例子中，我们创建了一个简单的留言板页面，用户可以输入名字和留言，留言会以列表项的形式添加到页面上。当提交表单时，使用jQuery阻止页面刷新，并使用DOM操作将用户的留言添加到页面上。同时，清空输入字段以便用户可以继续输入新的留言。

jQuery设计留言板页面

评论已关闭

推荐阅读