jquery仿qq邮箱联系人

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。QQ 邮箱联系人是一个典型的联系人管理应用，通常包含联系人列表的展示、搜索、添加、删除等功能。

类型

联系人列表展示：使用 jQuery 来动态生成和展示联系人列表。
搜索功能：使用 jQuery 来实现联系人搜索功能，通过输入框的输入事件来过滤显示的联系人。
添加联系人：使用 jQuery 来处理添加联系人的表单提交。
删除联系人：使用 jQuery 来处理删除联系人的操作。

应用场景

企业通讯录：企业内部的通讯录管理，方便员工之间的沟通。
个人邮箱：个人邮箱中的联系人管理，方便用户快速找到联系人。
社交应用：社交应用中的好友管理，方便用户管理自己的好友列表。

示例代码

以下是一个简单的 jQuery 仿 QQ 邮箱联系人的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 仿 QQ 邮箱联系人</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .contact {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>联系人列表</h1>
    <input type="text" id="search" placeholder="搜索联系人">
    <button id="add">添加联系人</button>
    <ul id="contact-list"></ul>

    <script>
        $(document).ready(function() {
            // 模拟联系人数据
            var contacts = [
                { name: '张三', phone: '123456789' },
                { name: '李四', phone: '987654321' },
                { name: '王五', phone: '111222333' }
            ];

            // 展示联系人列表
            function showContacts(contacts) {
                var list = $('#contact-list');
                list.empty();
                $.each(contacts, function(index, contact) {
                    list.append('<li class="contact">' + contact.name + ' - ' + contact.phone + ' <button class="delete">删除</button></li>');
                });
            }

            // 初始化联系人列表
            showContacts(contacts);

            // 搜索联系人
            $('#search').on('input', function() {
                var keyword = $(this).val().toLowerCase();
                var filteredContacts = contacts.filter(function(contact) {
                    return contact.name.toLowerCase().includes(keyword) || contact.phone.includes(keyword);
                });
                showContacts(filteredContacts);
            });

            // 添加联系人
            $('#add').on('click', function() {
                var name = prompt('请输入联系人姓名：');
                var phone = prompt('请输入联系人电话：');
                if (name && phone) {
                    contacts.push({ name: name, phone: phone });
                    showContacts(contacts);
                }
            });

            // 删除联系人
            $('#contact-list').on('click', '.delete', function() {
                var contactItem = $(this).closest('.contact');
                var index = contactItem.index();
                contacts.splice(index, 1);
                showContacts(contacts);
            });
        });
    </script>
</body>
</html>