JQuery通訊錄案例是一款基于JQuery框架開發的簡單聯系人管理系統。使用該系統可以方便快捷地添加、編輯、刪除聯系人信息。

該通訊錄案例使用了JQuery的DOM操作，可以動態地向HTML頁面添加節點、刪除節點、修改節點。同時，JQuery也提供了AJAX技術，系統可以通過AJAX異步請求服務器，實現無刷新提交數據的操作。下面呈現該系統的主要代碼。

$(document).ready(function(){
//添加聯系人
$("#add").click(function(){
var name = $("#name").val();
var phone = $("#phone").val();
var email = $("#email").val();
var address = $("#address").val();
if(name == "" || phone == ""){
alert("姓名和電話不能為空！");
return;
}
$.ajax({
type: "POST",
url: "add.php",
data: "name=" + name + "&phone=" + phone + "&email=" + email + "&address=" + address,
success: function(msg){
if(msg == "success"){
$("#list").append("<tr><td>"+name+"</td><td>"+phone+"</td><td>"+email+"</td><td>"+address+"</td><td><a href='#' class='edit'>編輯</a>  <a href='#' class='del'>刪除</a></td></tr>");
$("#name").val("");
$("#phone").val("");
$("#email").val("");
$("#address").val("");
alert("添加成功！");
}else{
alert("添加失敗！");
}
}
});
});
//編輯聯系人
$("#list").on("click", ".edit", function(event){
var td = $(this).parent().prevAll();
var name = td.eq(3).text();
var phone = td.eq(2).text();
var email = td.eq(1).text();
var address = td.eq(0).text();
$("#name").val(name);
$("#phone").val(phone);
$("#email").val(email);
$("#address").val(address);
$(this).parent().parent().remove();
});
//刪除聯系人
$("#list").on("click", ".del", function(event){
var td = $(this).parent().prevAll();
var name = td.eq(3).text();
var phone = td.eq(2).text();
var email = td.eq(1).text();
var address = td.eq(0).text();
var tr = $(this).parent().parent();
$.ajax({
type: "POST",
url: "delete.php",
data: "name=" + name + "&phone=" + phone + "&email=" + email + "&address=" + address,
success: function(msg){
if(msg == "success"){
tr.remove();
alert("刪除成功！");
}else{
alert("刪除失敗！");
}
}
});
});
});