jquery是一種廣泛使用的JavaScript庫，它使得編寫JavaScript變得更加容易。這個庫被廣泛應用于構建動態網頁。在本文中，我們將使用jquery設計一個簡單的留言板功能，以幫助我們理解jquery的基本概念和用法。
<html>
<!-- 留言板區域 -->
<div id="message-board">
<h2>留言板</h2>
<form>
<input type="text" id="name" placeholder="請輸入你的姓名">
<textarea id="message" placeholder="請輸入留言內容"></textarea>
<div>
<button id="submit-btn">提交</button>
</div>
</form>
<ul id="message-list"></ul>
</div>
<!-- jquery 腳本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('#submit-btn').click(function(event) {
event.preventDefault(); // 阻止表單提交刷新頁面的默認行為
var name = $('#name').val(),
message = $('#message').val();
if (name && message) { // 如果姓名和留言都不為空，則添加留言
var li = '<li><strong>' + name + '</strong>：' + message + '</li>';
$('#message-list').append(li);
$('#name').val(''); // 清空姓名輸入框
$('#message').val(''); // 清空留言輸入框
} else {
alert('請輸入姓名和留言內容！');
}
});
});
</script>
</html>在上面的代碼中，我們使用jquery給提交按鈕添加了一個點擊事件監聽器。當按鈕被點擊時，它將獲取名字和留言的值，并通過HTML的兩個input元素來接收這些信息。隨后，如果兩者都存在，jquery會創建一個新的li元素，其中包含名字和留言并將其添加到留言板的ul元素中。最后，jquery清除輸入框中的內容，這樣用戶可以輸入下一條留言。