使用jQuery实现ToDoList待办事项功能
112 浏览量
更新于2024-09-01
收藏 78KB PDF 举报
"使用jQuery实现一个简单的待办事项（ToDoList）功能，包括添加、完成、删除待办事项，并将数据存储在本地（localStorage），确保页面关闭后数据仍可保留。"
在网页开发中，实现一个待办事项列表是常见的功能需求，jQuery作为一个强大的JavaScript库，可以帮助我们轻松地实现这一目标。本示例主要讲解如何利用jQuery来模仿ToDoList的功能，通过具体的实例代码来演示其操作流程。
首先，我们需要引入必要的CSS样式和JavaScript文件。这里引入了自定义的`index.css`用于定义页面布局和样式，`jquery.min.js`作为jQuery库，以及自定义的`todolist.js`文件，用于编写实现待办事项功能的JavaScript代码。
HTML结构如下：
```html
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off"/>
</section>
</header>
<section>
<h2>正在进行<span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成<span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2019
</footer>
</body>
```
页面布局包含一个头部区域，用于输入待办事项；两个部分分别显示未完成和已完成的事项列表；底部是版权信息。`#title`文本框用于添加待办事项，`#todocount`和`#donecount`显示各自的事项数量，`#todolist`和`#donelist`分别用于渲染未完成和已完成的事项。
接下来，在`todolist.js`中，我们将实现以下功能：
1. **监听回车事件**：当用户在输入框中按下回车键时，获取输入的内容并创建一个新的待办事项。使用`$(document).on('keydown', '#title')`监听`#title`输入框的键盘事件，判断是否为回车键（keyCode 13），然后添加新项。
2. **创建待办事项**：当用户输入内容后，创建新的`<li>`元素，包括一个复选框和文字内容。使用`append()`方法将其添加到`#todolist`。
3. **处理复选框**：为每个待办事项的复选框添加点击事件监听器，当点击时，根据选中状态将事项移动到已完成列表或返回未完成列表。使用`toggleClass()`切换复选框的选中状态，并更新`#donelist`和`#todolist`。
4. **数据存储**：利用浏览器的`localStorage`对象，将所有待办事项保存在本地。添加和删除事项时，同步更新存储的数据。使用`localStorage.setItem()`和`localStorage.getItem()`进行读写操作。
5. **计数器**：实时更新未完成和已完成事项的数量，显示在页面上。可以使用`length`属性获取`#todolist`和`#donelist`的子元素数量，并更新`#todocount`和`#donecount`的文本。
6. **删除按钮**：为每个待办事项添加一个删除按钮，点击后删除对应的`<li>`元素，并更新存储的数据。可以使用`remove()`方法移除元素。
7. **加载数据**：页面加载时，从`localStorage`读取已存储的待办事项，将它们添加到相应的列表中。
通过以上步骤，我们就使用jQuery实现了一个基本的待办事项列表应用。这个例子展示了如何结合HTML、CSS和JavaScript，特别是jQuery库，来创建交互式的网页功能。它不仅提供了一个实用的工具，也展示了前端开发中的事件处理、DOM操作和本地存储等核心概念。
jQuery模仿模仿ToDoList实现简单的待办事项列表实现简单的待办事项列表
主要介绍了jQuery模仿ToDoList实现简单的待办事项列表，本文通过实例代码给大家介绍的非常详细，具有一
定的参考借鉴价值,需要的朋友可以参考下
功能：在文本框中输入待办事项按下回车后，事项会出现在未完成列表中；点击未完成事项前边的复选框后，该事项会出现在
已完成列表中，反之亦然；点击删除按钮会删除该事项。待办事项的数据是保存到本地存储的（localStorage），就算关闭页
面再打开，数据还是存在的（前提是要用相同浏览器）。
ToDoList链接： ToDoList—最简单的待办事项列表
先把css样式以及js文件引入进来，jQuery文件要写在你自己的js文件上边
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="js/jquery.min.js"></script>
<script src="js/todolist.js"></script>
HTML代码：
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2019
</footer>
</body>
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
下载后可阅读完整内容，剩余4页未读，立即下载
2018-09-05 上传
2021-01-08 上传
点击了解资源详情
2021-01-08 上传
2021-05-26 上传
2024-03-01 上传
2021-06-21 上传
2021-06-21 上传
weixin_38684633
- 粉丝: 4
- 资源: 927
我的内容管理
展开
最新资源
- C语言数组操作：高度检查器编程实践
- 基于Swift开发的嘉定单车LBS iOS应用项目解析
- 钗头凤声乐表演的二度创作分析报告
- 分布式数据库特训营全套教程资料
- JavaScript开发者Robert Bindar的博客平台
- MATLAB投影寻踪代码教程及文件解压缩指南
- HTML5拖放实现的RPSLS游戏教程
- HT://Dig引擎接口，Ampoliros开源模块应用
- 全面探测服务器性能与PHP环境的iprober PHP探针v0.024
- 新版提醒应用v2：基于MongoDB的数据存储
- 《我的世界》东方大陆1.12.2材质包深度体验
- Hypercore Promisifier: JavaScript中的回调转换为Promise包装器
- 探索开源项目Artifice：Slyme脚本与技巧游戏
- Matlab机器人学习代码解析与笔记分享
- 查尔默斯大学计算物理作业HP2解析
- GitHub问题管理新工具：GIRA-crx插件介绍
