正文

轻松打造个人通讯录：用jQuery实现高效管理联系人

/0 浏览量
0505

在数字化时代，个人通讯录的管理变得尤为重要。一个高效、易用的通讯录可以帮助我们更好地组织和查找联系人信息。本文将介绍如何使用jQuery来打造一个简单而实用的个人通讯录。

设计需求

在开始编写代码之前，我们需要明确一些设计需求：

  1. 基本功能：添加、删除、修改和搜索联系人。
  2. 界面友好：简洁、直观，便于操作。
  3. 数据存储：本地存储，确保数据安全。

技术栈

  • HTML：构建页面结构。
  • CSS：美化页面，提升用户体验。
  • jQuery：简化DOM操作，提高开发效率。

实现步骤

1. 创建页面结构

首先，我们需要创建一个基础的HTML页面结构，包括添加联系人的表单、显示联系人列表的区域以及搜索框。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人通讯录</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>个人通讯录</h1>
        <form id="addContactForm">
            <label for="name">姓名：</label>
            <input type="text" id="name" required>
            <label for="phone">电话：</label>
            <input type="tel" id="phone" required>
            <button type="submit">添加</button>
        </form>
        <input type="text" id="searchBox" placeholder="搜索联系人...">
        <ul id="contactList"></ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. 添加CSS样式

接下来，我们需要为页面添加一些基本的CSS样式，使其看起来更美观。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

#app {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
}

form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"], input[type="tel"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #f2f2f2;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li:last-child {
    border-bottom: none;
}

3. 实现jQuery功能

最后，我们需要使用jQuery来编写功能代码，包括添加、删除、修改和搜索联系人。

// script.js
$(document).ready(function() {
    var contacts = [];

    $('#addContactForm').submit(function(event) {
        event.preventDefault();
        var name = $('#name').val();
        var phone = $('#phone').val();
        contacts.push({ name, phone });
        updateContactList();
        $('#name').val('');
        $('#phone').val('');
    });

    $('#searchBox').on('input', function() {
        var searchText = $(this).val().toLowerCase();
        var filteredContacts = contacts.filter(function(contact) {
            return contact.name.toLowerCase().includes(searchText) || contact.phone.includes(searchText);
        });
        updateContactList(filteredContacts);
    });

    function updateContactList(filteredContacts = contacts) {
        var $contactList = $('#contactList');
        $contactList.empty();
        filteredContacts.forEach(function(contact) {
            var $li = $('<li></li>').text(contact.name + ' - ' + contact.phone);
            var $removeBtn = $('<button></button>').text('删除').click(function() {
                contacts = contacts.filter(function(c) {
                    return c.name !== contact.name || c.phone !== contact.phone;
                });
                updateContactList();
            });
            $li.append($removeBtn);
            $contactList.append($li);
        });
    }
});

总结

通过以上步骤，我们使用jQuery实现了一个简单而实用的个人通讯录。这个通讯录可以帮助用户方便地管理联系人信息，并且通过本地存储确保数据安全。当然，这只是一个基础版本，您可以根据自己的需求进行扩展，例如添加修改联系人的功能、导入导出联系人等。

-- 展开阅读全文 --