jquery 如何创建工程

原创

mob64ca12d2dee8 2024-11-12 06:01:54 ©著作权

文章标签 任务管理 html jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d2dee8的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery项目方案：创建一个简单的任务管理应用

1. 项目背景

在当今快节奏的工作环境中，合理的任务管理显得尤为重要。利用jQuery构建一个简单的任务管理应用，可以帮助用户轻松添加、删除和查看任务。本文将介绍如何创建这个项目，并展示一些基本代码示例。

2. 技术栈

本项目将使用以下技术：

HTML：用于构建用户界面
CSS：用于样式设计
jQuery：用于简化DOM操作和事件处理

3. 项目结构

我们将按照以下结构组织项目文件：

task-manager/
│
├── index.html
├── styles.css
├── script.js
└── README.md

3.1 `index.html`

这个文件是应用的核心界面，包含任务输入区域和任务列表。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        任务管理
        <input type="text" id="task-input" placeholder="添加新任务...">
        <button id="add-task">添加任务</button>
        
        <ul id="task-list"></ul>
    </div>
    
    <script src="
    <script src="script.js"></script>
</body>
</html>

3.2 `styles.css`

用于美化界面，简单的CSS样式示例如下：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.container {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
}

#task-input {
    width: calc(100% - 24px);
    padding: 10px;
    margin-bottom: 10px;
}

3.3 `script.js`

jQuery用于处理用户输入和任务管理的核心逻辑。

$(document).ready(function(){
    $('#add-task').click(function(){
        const taskText = $('#task-input').val();
        if(taskText) {
            $('#task-list').append(`<li>${taskText} <button class="delete-task">删除</button></li>`);
            $('#task-input').val(''); // 清空输入框
        } else {
            alert('请输入任务内容！');
        }
    });

    // 删除任务
    $(document).on('click', '.delete-task', function(){
        $(this).parent().remove();
    });
});

4. 用户流程

以下是用户与应用交互的简单序列图：

sequenceDiagram
    participant 用户
    participant 应用

    用户->>应用: 输入任务
    用户->>应用: 点击添加任务按钮
    应用-->>用户: 显示新任务在列表中
    用户->>应用: 点击删除按钮
    应用-->>用户: 删除任务