jQuery通訊錄效果是一種通過jQuery框架實現的頁面效果。它可以讓用戶通過一個簡潔的界面來管理自己的聯系人，包括添加、刪除、篩選、搜索等操作。下面是一段通訊錄功能的jQuery代碼：

$(document).ready(function() {
var contacts = [
{"name": "張三", "phone": "123456789", "email": "zhangsan@gmail.com"},
{"name": "李四", "phone": "987654321", "email": "lisi@hotmail.com"},
{"name": "王五", "phone": "111111111", "email": "wangwu@163.com"}
];
// 初始化頁面
displayContacts(contacts);
// 添加聯系人
$("#addContactBtn").click(function() {
var name = $("#nameInput").val();
var phone = $("#phoneInput").val();
var email = $("#emailInput").val();
contacts.push({"name": name, "phone": phone, "email": email});
displayContacts(contacts);
clearInputs();
});
// 刪除聯系人
$("body").on("click", ".deleteContactBtn", function() {
var index = $(this).data("index");
contacts.splice(index, 1);
displayContacts(contacts);
});
// 搜索聯系人
$("#searchInput").on("keyup", function() {
var searchText = $(this).val().toLowerCase();
var filteredContacts = contacts.filter(function(contact) {
var name = contact.name.toLowerCase();
var phone = contact.phone.toLowerCase();
var email = contact.email.toLowerCase();
return name.indexOf(searchText) > -1 || phone.indexOf(searchText) > -1 || email.indexOf(searchText) > -1;
});
displayContacts(filteredContacts);
});
// 清空輸入框
function clearInputs() {
$("#nameInput").val("");
$("#phoneInput").val("");
$("#emailInput").val("");
}
// 顯示聯系人
function displayContacts(contactList) {
var html = "";
for (var i = 0; i < contactList.length; i++) {
html += '<tr><td>' + contactList[i].name + '</td><td>' + contactList[i].phone + '</td><td>' + contactList[i].email + '</td><td><button class="deleteContactBtn" data-index="' + i + '">刪除</button></td></tr>';
}
$("#contactTable tbody").html(html);
}
});

該通訊錄效果主要是通過jQuery框架的事件綁定、DOM操作、數組過濾等功能實現的。代碼中包括了添加、刪除、搜索等功能，可以為用戶提供一個方便、高效的聯系人管理方式。