jQuery通訊錄源程序是一個非常實用的工具，它可以幫助用戶管理聯系人和通訊信息。下面是一個簡單的例子，展示了如何使用jQuery實現一個通訊錄應用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery通訊錄應用</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>通訊錄應用</h1>
<form id="addContact">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="phone">電話:</label>
<input type="text" id="phone" name="phone" required><br>
<label for="email">郵箱:</label>
<input type="email" id="email" name="email"><br>
<button type="submit">添加聯系人</button>
</form>
<ul id="contactList"></ul>
<script>
// 用來存儲聯系人信息
var contacts = [];
// 添加聯系人
$('#addContact').submit(function(e) {
// 阻止默認表單提交行為
e.preventDefault();
// 獲取用戶輸入的值
var name = $('#name').val();
var phone = $('#phone').val();
var email = $('#email').val();
// 將聯系人信息存入對象
var contact = {
name: name,
phone: phone,
email: email
};
// 將聯系人對象添加到數組中
contacts.push(contact);
// 清空表單
$('#addContact')[0].reset();
// 更新聯系人列表
updateContactList();
});
// 更新聯系人列表
function updateContactList() {
// 清空列表
$('#contactList').empty();
// 遍歷聯系人數組，將每個聯系人添加到列表中
for (var i = 0; i < contacts.length; i++) {
var contact = contacts[i];
var $li = $('<li>').addClass('contact');
var $name = $('<div>').addClass('name').text(contact.name);
var $phone = $('<div>').addClass('phone').text(contact.phone);
var $email = $('<div>').addClass('email').text(contact.email);
$li.append($name).append($phone).append($email);
$('#contactList').append($li);
}
}
</script>
</body>
</html>以上代碼實現了一個簡單的通訊錄應用，包括添加聯系人和更新聯系人列表功能。其中，使用了jQuery庫來方便地操作DOM元素和處理用戶輸入事件。