使用JavaScript、jQuery和Bootstrap构建待办事项应用
待办事项应用是一个简单的生产力工具，帮助用户管理日常任务。本文将介绍如何使用JavaScript、jQuery和Bootstrap来构建一个基本的待办事项应用。这三个工具的结合可以实现高效、响应式的用户界面设计和交互。
一、JavaScript：编程语言
JavaScript是一种轻量级的编程语言，运行在浏览器中，用于实现网页的交互功能。JavaScript是构建现代Web应用不可或缺的一部分。
二、jQuery：JavaScript库
jQuery是一个流行的JavaScript库，用于简化HTML文档的遍历、事件处理和动画等操作。jQuery易于使用，可以提高Web开发的效率。
三、Bootstrap：前端开发框架
Bootstrap是一个流行的前端开发框架，基于HTML、CSS和JavaScript。Bootstrap提供了大量的样式和组件，可以帮助开发者快速构建响应式和移动端优先的网页。
安装Bootstrap：
``` npm install bootstrap ``` 在`index.html`中引入Bootstrap： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>待办事项应用</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>待办事项应用</h1> <div class="row"> <div class="col-md-6"> <input type="text" id="taskInput" class="form-control" placeholder="新增任务"> <button id="addTaskBtn" class="btn btn-primary">添加任务</button> </div> </div> <div class="row"> <div class="col-md-12"> <ul id="taskList" class="list-group"></ul> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.7.1/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="app.js"></script> </body> </html> ```
四、编写JavaScript代码
创建一个JavaScript文件，例如`app.js`：
```javascript $(document).ready(function() { var tasks = []; function renderTasks() { $('#taskList').empty(); for (var i = 0; i < tasks.length; i++) { var task = tasks[i]; var $li = $('<li>').addClass('list-group-item').text(task); $('#taskList').append($li); } } $('#addTaskBtn').click(function() { var task = $('#taskInput').val(); tasks.push(task); renderTasks(); $('#taskInput').val(''); }); renderTasks(); }); ```
