隨著互聯網的發展和普及，人們之間的聯系也變得越來越頻繁和緊密。在這個信息化的時代，通訊錄的作用也越來越重要。Jquery 提供了很多通訊錄效果，下面我們來一一介紹。

//實現打字索引功能
$(function(){
$("#searchInput").focus();
$(".J_demo1").jdir({
target: '.J_letter',
offsetTop: 10,
duration: 80,
noanchor: true,
//正則過濾
reg: [/[\u4E00-\u9FA5]/]
});
});

上面的代碼實現了一個帶打字索引的通訊錄效果。它可以讓用戶根據輸入的關鍵字快速找到對應的聯系人信息。需要注意的是，Jquery 還提供了很多其他的參數設置，用戶可以根據自己的需求進行調整。

//實現分組列表功能
$(function(){
var list = [
{name:'小明', department:'設計部'},
{name:'張三', department:'開發部'},
{name:'李四', department:'開發部'},
{name:'王五', department:'測試部'},
{name:'小紅', department:'設計部'},
{name:'小強', department:'設計部'},
{name:'小美', department:'測試部'},
{name:'小智', department:'開發部'},
{name:'小菜', department:'測試部'}
];
var render = function(list, thead, tbody){
var fragment = document.createDocumentFragment();
$.each(list, function(i, obj){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.innerHTML = obj.name;
td2.innerHTML = obj.department;
tr.appendChild(td1);
tr.appendChild(td2);
fragment.appendChild(tr);
});
thead.after(fragment);
}
var groupBy = function(list, key){
var map = {};
$.each(list, function(i, obj){
var k = obj[key];
if(!map[k]){
map[k] = [];
}
map[k].push(obj);
});
return map;
}
var map = groupBy(list, 'department');
var fragment = document.createDocumentFragment();
$.each(map, function(k, v){
var h3 = document.createElement('h3');
h3.innerHTML = k;
var thead = $('
姓名
部門
');
var tbody = $('');
render(v, thead, tbody);
thead.append(tbody);
fragment.appendChild(h3);
fragment.appendChild(thead[0]);
});
$(".J_demo2").append(fragment);
});

上面的代碼實現了一個分組列表的通訊錄效果。它根據部門將聯系人進行分組，用戶可以根據自己的需求快速查找聯系人信息。使用 Jquery 實現這種效果，代碼簡潔明了，易于維護。

總之，Jquery 提供了很多通訊錄效果，可以極大地方便用戶操作和使用。未來，隨著互聯網的不斷發展，我們相信 Jquery 的通訊錄效果也會越來越完善和強大。