HTML、CSS、JavaScript和jQuery简易待办事项清单示例

2024-10-16

简介

JavaScript是前端开发中不可或缺的工具，它使动态和交互式的网页应用程序得以实现。了解其语法、变量、函数以及DOM操作对于构建用户友好的界面至关重要。

让我们来举一个简单示例：创建一个简单的待办事项列表应用。这将引导您定义动态添加到DOM中的元素、更改它们的属性，并通过用户的交互触发事件监听器。

情景：简易待办事项清单

想象一下，你有一个网页上包含任务列表的应用程序，用户可以添加、编辑、删除或标记为完成的任务。你需要用JavaScript、HTML5、CSS3以及jQuery（用于DOM操作）来构建这个功能。

步骤1: HTML结构

首先，让我们创建待办事项清单的基本HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易待办事项清单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="to-do-list-container">

    <ul class="list-group">
        <!-- 待办事项项将在这里动态添加 -->
    </ul>

    <div id="add-task-form">
        <input type="text" placeholder="添加一个新任务...">
        <button>添加</button>
    </div>

</div>

<script src="scripts.js"></script>
</body>
</html>

步骤2: CSS样式

接下来，使用一些基本CSS来给网页进行简单的样式：

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

#to-do-list-container {
    width: 400px;
    margin: auto;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

.list-group {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #ddd;
}

li::before {
    content: attr(data-label);
    font-weight: bold;
    color: #337ab7;
    width: 50%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

label {
    display: inline-block;
    max-width: 100px;
    margin-right: 20px;
}

button, input[type="text"] {
    width: auto;
    padding: 8px;
}

input[type="text"]:hover {
    border-color: #4CAF50;
}

步骤3: JavaScript：DOM操作

最后，让我们添加JavaScript代码来动态操作DOM：

// scripts.js
document.addEventListener('DOMContentLoaded', function() {

    // 获取列表项和输入表单元素
    const listContainer = document.querySelector('#to-do-list-container');
    const addButton = document.getElementById('add-task-form').querySelector('button');

    // 为添加按钮添加事件监听器
    addButton.addEventListener('click', () => {
        const taskInput = document.getElementById('task-input');  
        let taskText = taskInput.value;

        if (taskText !== '') {
            listContainer.appendChild(createTask(taskText));
            taskInput.value = '';
        }
    });

    // 用于创建新任务项的辅助函数
    function createTask(text) {
        const li = document.createElement('li');
        const label = document.createElement('label');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.className = 'task-check';

        if (text !== '') {
            label.appendChild(checkbox);
            label.appendChild(document.createTextNode(text));
        }

        li.className = 'list-item';

        // 添加任务状态的事件监听器
        checkbox.addEventListener('change', () => {
            checkTaskStatus(li.querySelector('.task-check'), li.children[0], checkbox.checked);
        });

        return li;
    };

    function checkTaskStatus(checkbox, textNode, checked) {
        if (checked) {
            console.log(textNode.textContent + '已被标记为完成');
        } else {
            console.log('任务被取消标记为完成');
        }
    }

});

理解JavaScript的基础语法、变量和如何与DOM交互是任何前端开发人员工作中必备的基石。在更高级的场景中，你可能会使用jQuery或其它提供DOM操作便利方法的库来替代。

了解这些基本概念对于任何正在构建现实世界项目中的前端开发人员来说都是必不可少的。 了解如何使用JavaScript处理表单数据和与用户界面进行交互是现代前端开发中非常重要的一部分。在我们之前创建的应用程序中，我们将学习如何动态地添加、更新或删除任务列表中的任务，并通过点击“完成”按钮来标记它们为已完成。

JavaScript代码简化版

现在让我们回到简单的待办事项清单应用程序。首先，我们使用jQuery（已包含在HTML文件的 head 部分）来简化DOM操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易待办事项清单</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="to-do-list-container">

    <ul class="list-group">
        <!-- 待办事项项将在这里动态添加 -->
    </ul>

    <div id="add-task-form">
        <input type="text" placeholder="添加一个新任务...">
        <button>添加</button>
    </div>

</div>

<script src="scripts.js"></script>
</body>
</html>

简化版的jQuery代码

现在，我们来使用jQuery简化DOM操作，并为列表项和任务输入添加事件监听器：

$(document).ready(function() {

    // 获取列表项元素
    var $list = $('#to-do-list-container ul');

    // 为添加按钮添加事件监听器
    $('#add-task-form').on('click', 'button', function(e) {
        e.preventDefault();
        addTaskToList($list);
    });

    // 创建新任务的辅助函数
    function addTaskToList(listElement) {
        var taskInput = $('input[type="text"]');

        if (taskInput.val().trim() !== '') {
            listElement.append(createTask(taskInput.val()));

            $list.scrollTop(0); // 确保滚动条在列表顶部
            taskInput.value = '';
        }
    }

    function createTask(text) {
        var li = $('<li class="list-item"></li>');
        var label = $('<label class="task-check" for="checkbox-' + text + '"></label>');
        var checkbox = $(":checkbox", {checked: false});

        if (text !== '') {
            label.append(checkbox);
            label.append(text.split('\n').join('<br>'));
        }

        li.append(label);

        return li;
    }
});

比较与表单数据

在之前的部分中，我们通过点击“完成”按钮来标记任务为已完成。现在，让我们添加一个简单的表单验证：

// 如果任务为空，则阻止提交
function validateForm() {
    var taskInput = $('#task-input');

    if (taskInput.val().trim() === '') {
        alert('Please enter a valid task.');
        return false;
    }
}

$(document).ready(function() {

    // 获取列表项元素
    var $list = $('#to-do-list-container ul');

    // 为添加按钮添加事件监听器
    $('#add-task-form').on('click', 'button', function(e) {
        e.preventDefault();
        addTaskToList($list);
    });

    // 创建新任务的辅助函数
    function addTaskToList(listElement) {
        var taskInput = $('input[type="text"]');

        if (taskInput.val().trim() !== '') {
            listElement.append(createTask(taskInput.val()));

            $list.scrollTop(0); // 确保滚动条在列表顶部
            taskInput.value = '';
        }

        // 验证表单
        var isValid = validateForm();
        if (!isValid) return;
    }

    function createTask(text) {
        var li = $('<li class="list-item"></li>');
        var label = $('<label class="task-check" for="checkbox-' + text + '"></label>');
        var checkbox = $(":checkbox", {checked: false});

        if (text !== '') {
            label.append(checkbox);
            label.append(text.split('\n').join('<br>'));
        }

        li.append(label);

        return li;
    }
});

总结

通过添加表单验证和简单的表单处理，我们使应用程序更加健壮。在真实应用中，你可能会使用更复杂的库（如React、Vue或Angular）来进行类似功能的表单处理，并结合前端状态管理工具（如Redux或Vuex）来维护状态更新。

这个示例是任何想要开始构建自己待办事项清单应用的初学者的第一步。掌握这些基本概念后，你可以逐步将它们集成到更复杂的项目中。

Blog Post Image