jQuary实现最简单的待办事项列表（移动和PC端均可使用）

最新推荐文章于 2024-04-23 14:34:21 发布
原创 最新推荐文章于 2024-04-23 14:34:21 发布 · 718 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #javascript #html #js

本文介绍用jQuery实现跨移动和PC端的待办事项列表。阐述实现流程，包括导入样式、插件，书写HTML、CSS和jQuery代码；说明实现思路，如注册键盘和点击事件等；还提及所遇Bug及解决办法，最后给出相关源码。

jQuary实现最简单的待办事项列表（移动和PC端均可使用）

目录：

​ 前言：ToDoList是一款无需注册即可使用，数据存储在用户浏览器的H5本地数据库里，是最简单、最安全的代办事项列表应用！

​

PC端效果：

在这里插入图片描述

1、实现流程

  • 导入移动端所需要的CSS初始化样式
  • 导入flexible.js适配文件、jQuery.js插件
  • 布局方式：采用 flexible.js + rem 适配布局
  • 书写html结构
  • 书写css样式，并设置jQuery需要的属性
  • 书写jQuery代码实现具体功能，主要创建对象并实例化调用

2、实现思路

  • 文档注册键盘事件，当按下的是Enter键就创建li节点添加到正在进行ol中
  • 给正在进行中的li节点中的复选框添加点击事件，点击后克隆节点添加到已经完成中，然后删除正进行中的节点
  • 给已经完成中的li节点中的复选框添加点击事件，点击后克隆节点添加到正在进行中，然后删除已经完成中的节点
  • 给文档中所有li的右边的删除按钮a添加点击事件，点击后判断是哪一个元素，然后删除对应的li
  • 给文档中最底下的clear，即a标签添加点击事件，点击后删除文档中的所有li
  • 在文档创建的时候将其写入本地数据路，并添加对应的唯一标记，来后期识别
  • 当点击复选框后根据唯一标记判断是哪一个li，并将其checked属性值更改为true和false来辨别是已经完成的还是正在进行中的
  • 当点击li中右边的删除按钮后，将其本地中的数据拿出来转换为json对象删除对应的数据，然后再转换为字符串将本地中的数据替换
  • 当点击清除按钮后，将其本地中的数据拿出来转换为json对象，然后清空所有数据，再将其空数组转换为字符串替换本地数据。
  • 在文档加载的时候将其本地加载进来进行转换，根据标记创建对应的节点，找到对应的css样式即可

3、所遇Bug

  1. 无法动态获取创建的节点

    **解决：**使用jQuery中的on方法注册事件，并且使用事件委托动态获取创建的元素。

  2. 获取到对应的节点无法解决事件委托和冒泡

    **解决：**根据对应的元素自己所拥有的唯一属性来辨别是否是该元素

  3. 无法将数据存入本地

    **解决：**如果本地数据为空，则使用数组套json对象的方式创建数组json对象，并将json数组对象转换为json字符串存入本地；否则只将该次的json对象追加到本地的数组中

  4. 更改本地数据后找不到对应的元素

    **解决：**节点创建时都给一个唯一的ID标记，并将该ID标记存入本地，每次触发的事件的时候根据该ID值判断是否是该元素的父亲，并进行操作

  5. 加载本地数据不知道如何归类

    **解决：**根据每次更改的checked属性来辨别是未完成的还是已经完成的，并调用创建元素节点的函数，通过判断将其添加到对应的地方

4、源码奉上

  1. index.html（结构）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0" ">
    <title>ToDoList</title>
    <!-- 导入jQuery插件 -->
    <script src="./jQuery/jquery-3.5.1.min.js "></script>
    <!-- 导入flexible插件 -->
    <script src="./js/index.js "></script>
    <!-- 移动端布局样式初始化的插件 -->
    <link rel="stylesheet " href="./css/normalize.css ">
    <link rel="stylesheet " href="css/style.css ">
    <script src="./js/main.js "></script>
    <script src="./js/cleateE.js "></script>
    <script src="./js/data.js "></script>
</head>

<body>
    <!-- 页头开始了 -->
    <header>
        <form action=" ">
            <label for="title ">ToDoList</label>
            <input type="text " id="title " class="title " placeholder="添加ToDo " required>
        </form>
    </header>
    <!-- 页头结束了 -->
    <section>
        <h2 class="one ">
            正在进行
            <span>0</span>
        </h2>
        <ol></ol>
        <h2 class="two ">
            已经完成
            <span>0</span>
        </h2>
        <ul></ul>
    </section>
    <!-- 页脚开始了 -->
    <footer>
            Copyright © 2014 todolist.cn 
            <a href="javascript:; ">clear</a>
    </footer>
</body>

</html>

  1. normalize.css（移动端初始化样式插件）

  2. index.js（移动端适配插件）

  3. jquery-3.5.1.min.js（jQuery插件）

  4. style.scc（元素样式文件）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* 当设备宽度大于750px时 */

@media screen and (min-width:750px) {
    /* html采用75px的字体大小 */
    html {
        font-size: 75px !important;
    }
}

body {
    background: #CDCDCD;
}

header {
    height: .666667rem;
    background: rgba(47, 47, 47, 0.98);
}

header form {
    width: 10rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

header label {
    flex: 1;
    width: 1.333333rem;
    height: .666667rem;
    line-height: .666667rem;
    color: #ffffff;
    font-size: .32rem;
    cursor: pointer;
}

header input {
    flex: 1;
    width: 4.826667rem;
    height: .346667rem;
    padding-left: .2rem;
    border: none;
    border-radius: .066667rem;
    box-shadow: 0 1px rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    font-size: .16rem;
    margin-right: 10px;
    /* 点击表单后，表单边框消失 */
    outline: none;
}

section,
footer {
    min-width: 320px;
    max-width: 750px;
    width: 10rem;
    margin: 0 auto;
    font-family: Arial, Helvetica;
    background: #CDCDCD;
}

section h2 {
    height: .413333rem;
    margin: .266667rem 0;
    font-size: .333333rem;
}

section span {
    float: right;
    width: .266667rem;
    height: .266667rem;
    line-height: .266667rem;
    text-align: center;
    border-radius: 50%;
    background: #E6E6FA;
    font-size: .186667rem;
    color: #666666;
    margin-right: .133333rem;
}

ul,
ol {
    list-style: none;
}

footer {
    color: #666666;
    font-size: .186667rem;
    text-align: center;
}

footer a {
    text-decoration: none;
    color: #999999;
}

.li {
    height: .426667rem;
    background: #ffffff;
    margin-bottom: .133333rem;
    border-radius: .04rem;
    border-left: .066667rem solid #629A9C;
    box-shadow: 0 .013333rem .026667rem rgba(0, 0, 0, 0.07);
    /* 弹性布局 */
    display: flex;
    /* 侧轴居中 */
    align-items: center;
    /* 两边贴边，再平分剩余空间 */
    justify-content: space-around;
    /* 相对定位 */
    position: relative;
    cursor: pointer;
}

.li input {
    position: absolute;
    width: .293333rem;
    height: .293333rem;
    left: .2rem;
}

.li p {
    display: inline-block;
    width: 85%;
    height: 100%;
    line-height: .426667rem;
    font-size: .186667rem;
}

.li a {
    position: absolute;
    width: .346667rem;
    height: .32rem;
    line-height: .14rem;
    text-align: center;
    right: .106667rem;
    border-radius: 50%;
    border: .08rem double #ffffff;
    background: #cccccc;
    color: #ffffff;
}

.finish {
    opacity: 0.5;
    border-left: .066667rem solid #999999;
}
  1. main.js（js主入口文件）
$(function() {
    // 实例化数据对象
    var data = new Data();
    // 实例化创建元素的对象
    var create = new cleateE();
    // 将数据加载进来
    data.load();
    //存储输入的文本值
    this.text = null;
    // 索引
    this.num = 0;
    // 给文档绑定键盘事件
    $(document).keydown(function(event) {
        if (event.which == 13 && $(".title").val() != "") {
            // 获取输入的值
            this.text = $(".title").val();
            // 将文本框清空
            $(".title").val("");
            // 调用创建li节点的函数,并将索引作为参数传递
            var n = create.creatE("ol", this.text, this.num);
            // 索引递增
            this.num++;
            // 调用写入本地的函数，并将li的索引作为参数传递
            data.storage(n, this.text);
        }
    })

    // 将ol和ul中的a委托给文档对象的点击事件去执行
    $(document).on("click", $("ol li a,ul li a"), function(event) {
        // 如果点击的这个元素有href属性
        if ($(event.target).prop("href") != undefined) {
            // 获取该元素父亲的tag属性
            var index = $(event.target).parent("li").attr("tag");
            // 删除该节点的父亲
            $(event.target).parent("li").remove();
            // 调用删除本地对应数据的函数，并将触发该事件的元素对象的父亲作为参数传递
            data.removeD(index);
        }
    })

    // 【已完成】：使用事件委托，将li中的input委托给ul去执行
    $("ol").on("click", $("input"), function(event) {
        // 如果所点的这个元素有checked属性，并且为true
        if ($(event.target).prop("checked") != undefined && $(event.target).prop("checked")) {
            // 标记
            var a = 1;
            // 调用修改数据的函数，并将事件对象作为参数传递
            data.amendV($(event.target).parent("li"), a);
            // 则克隆这个元素的父亲li，并添加到ul中
            $("ul").append($(event.target).parent("li").clone().addClass("finish"));
            // 删除ol中的li节点
            $(event.target).parent(".li").remove();

        }
    })

    // 【未完成】：使用事件委托，将li中的input委托给ul去执行
    $("ul").on("click", $("input"), function(event) {
        // 如果所点的这个元素有checked属性，并且为false
        if ($(event.target).prop("checked") != undefined && !$(event.target).prop("checked")) {
            // 标记
            var a = 0;
            data.amendV($(event.target).parent("li"), a);
            // 则克隆这个元素的父亲li，并添加到ol中
            $("ol").append($(event.target).parent("li").clone().removeClass("finish"));
            // 删除ul中的li节点
            $(event.target).parent(".li").remove();
        }
    })

    // 页脚的a添加点击事件
    $("footer a").on("click", function() {
        // 删除ul和ol中所有的li
        $("ol li,ul li").remove();
        data.clear();
    })

    // 计时器实时更新li的个数
    setInterval(() => {
        // 并将其文本添加到各自的span中
        $(".one span").text($("ol li").length);
        $(".two span").text($("ul li").length);
    }, 1);
});
  1. cleateE.js（创建节点文件）
function cleateE() {
    // 创建li节点
    this.creatE = function(isol, value, num) {
        // 创建li标签,并指定类名,并设置自定义属性
        var li = $("<li></li>").addClass("li").attr("tag", num);
        // 创建input标签,并添加到li标签中
        li.append($("<input type='checkbox'>"));
        // 创建a标签，并设置文本值，添加到li中
        li.append($("<a></a>").text("-"));
        // 如果为ol，则添加到ol中
        if (isol == "ol") {
            // 创建p标签,并设置文本值，添加到li中
            li.append($("<p></p>").text(value));
            // 将li添加到ol中
            $("ol").append(li);
        } else {
            // 否则就是添加到ul中
            // 创建p标签,并设置文本值，添加到li中
            li.append($("<p></p>").text(value));
            // 否则将li添加到ul中
            $("ul").append(li);
        }
        // 返回创建的这个li的索引
        return num;
    }
}
  1. data.js（存入本地文件）
function Data() {
    // 写入本地数据
    this.storage = function(n, text) {
        // 如果获取本地的数据不为空
        if (window.localStorage.getItem("todo") != null) {
            // 则获取本地数据，将其转换为json对象数组
            var obj = JSON.parse(window.localStorage.getItem("todo"));
            // 创建一个json对象，将其添加到另一个json对象数组中
            obj.push({ "title": text, "done": false, "tag": n });
            // 再将json对象数组转换为字符串写入到本地
            window.localStorage.setItem("todo", JSON.stringify(obj))
        } else {
            //创建jeson对象,并装入数组
            var data = [{ "title": text, "done": false, "tag": n }];
            //将jeson对象转换为字符串写入本地
            window.localStorage.setItem("todo", JSON.stringify(data))
        }
    }

    // 修改本地数据
    this.amendV = function(target, isFinish) {
        // 则获取本地数据，将其转换为json对象数组
        var obj = JSON.parse(window.localStorage.getItem("todo"));
        // 如果是完成
        if (isFinish) {
            // 遍历json的数组，拿到每个json对象
            for (var i = 0; i < obj.length; i++) {
                // 如果点击的这个元素的tag属性 == 存储的json对象的tag，那么它们就是一个
                if (target.attr("tag") == obj[i]["tag"]) {
                    // 更改存储的done属性，说明复选框被选中
                    obj[i]["done"] = true;
                }
            }
        } else {
            // 遍历json的数组，拿到每个json对象
            for (var i = 0; i < obj.length; i++) {
                // 如果点击的这个元素的tag属性 == 存储的json对象的tag，那么它们就是一个
                if (target.attr("tag") == obj[i]["tag"]) {
                    // 更改存储的done属性，说明复选框被选中
                    obj[i]["done"] = false;

                }
            }
        }
        // 再将json对象数组转换为字符串写入到本地
        window.localStorage.setItem("todo", JSON.stringify(obj))
    }

    // 删除本地数据
    this.removeD = function(index) {
        // 获取本地数据，将其转换为json对象数组
        var obj = JSON.parse(window.localStorage.getItem("todo"));
        // 遍历json数组对象
        for (var i = 0; i < obj.length; i++) {
            if (index == obj[i]["tag"]) {
                // 那么就根据数组中的索引删除该元素
                var value = obj.splice(i, 1);
            }
        }
        // 再将json对象数组转换为字符串写入到本地
        window.localStorage.setItem("todo", JSON.stringify(obj))
    }

    // 清空本地数据
    this.clear = function() {
        // 获取本地数据，将其转换为json对象数组
        var obj = JSON.parse(window.localStorage.getItem("todo"));
        // 遍历数组
        for (var i = 0; i < obj.length; i++) {
            obj.splice(i, 1)
            i--;
        }
        // 再将json对象数组转换为字符串写入到本地
        window.localStorage.setItem("todo", JSON.stringify(obj))
    }

    // 加载本地数据
    this.load = function() {
        // 实例化创建元素的对象
        var create = new cleateE();
        // 则获取本地数据，将其转换为json对象数组
        var obj = JSON.parse(window.localStorage.getItem("todo"));
        // 如果获取到
        if (obj != null) {
            // 就遍历对象
            for (var i = 0; i < obj.length; i++) {
                // 拿到文本值
                var value = obj[i]["title"];
                // 获取标记
                var tag = obj[i]["tag"];
                // 如果状态时true，则是已经完成的
                if (obj[i]["done"]) {
                    // 那么就将它添加到ul中
                    create.creatE("ul", value, tag);
                    // 并设置复选框的样式
                    $("li input").addClass("finish").prop("checked", true);
                } else {
                    // 否则就添加到ol中
                    create.creatE("ol", value, tag);
                }
            }
        }
    }
}

移动端效果：

在这里插入图片描述

JavaScript、Css/Html 实现待办事项列表
LinHt_优快云的博客
08-19 2686
利用JavaScript、css/html技术设计一个简单的待办事项列表管理系统，主要包含新增待办事项、正在进行列表、完成列表共计三个模块。
React+Redux实现简单的待办事项列表ToDoList
尐轩web前端网络日志
02-05 5610
使用Redux做了一个简单的ToDoList待办事项列表 这个例子也是源于Redux作者Dan Abramov的视频demo 还要特别说明一下 我还没有使用react-redux库进行解耦 也没有拆分成多个文件等等优化 为了单纯的练习redux 适合初步学习redux的同学 本人学疏才浅，发现可以优化的地方或者问题还请大家指正，谢谢功能样式样子就是这样的 在输入框输入待办事项 功能
用jQuery–实现todolist待办事项清单
01-08
效果图 实现todolist整体思路： 思路图如果看着不方便 js代码里面已经做好详细注释 ToDoList—最简单的待办事项列表 ToDoList 正在进行 已经完成 Copyright :copyright: 2014 todolist.cn css代码 @media screen and (max-device-width: 620px) { section { width: 96%; padding: 0 2%;
todolist最简单的待办事项列表
这里是前端，是不一样的前端
06-04 1235
代码展示 在这里插入代码片 ```<template> <div class="box"> <!-- 输入框 --> Todolist <input type="text" v-model="inputValue" @keydown.enter="submit" placeholder="添加TODO" class="q1"/> <!-- 提交按钮 --> <!-- <button @cli
【jQuery案例】todolist待办事项清单 jQuery+JS实现
weixin_52212950的博客
05-24 2943
近期完成了一个仿 todolist 的一个任务事项管理页面，简洁的布局，斜对称的设计更加美观，仅仅用到了本地存储，纯前端，这篇文章给大家分享源码并分析一下其 jQuery 实现过程 页面展示： 未添加事项页面： 添加事项（回车，点击添加均可触发）： 做完事项后勾选左侧选项 点击右侧橙色按钮删除事项 主题切换（目前写入了两个主题）： 左侧工具栏操作说明 .........
用jQuery--实现todolist待办事项清单
xiaofiy的博客
04-04 1404
效果图 实现todolist整体思路： 思路图如果看着不方便 js代码里面已经做好详细注释 html代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam...
基于jquery开发的todolist待办事列表清单项目
Bofu
07-31 851
目录前提：一、项目介绍：二、todolist项目分析三、todolist核心功能实现四、完整的jquery代码：五、注意事项六、代码仓库七、参考资料： 前提： 这里只介绍jquery所实现的操作部分，页面的html和css部分这里就不在详细介绍，需要看源码的伙伴可以到底部中的项目仓库链接中获取。 一、项目介绍： 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 但是本页面内容刷新页面不
实现待办事项列表的动态增删功能
在本例中，待办事项列表界面具备了基本的添加和删除功能，这样的功能对于实现任务管理至关重要。以下是待办事项列表界面相关知识点的详细介绍： 1. HTML结构设计 待办事项列表界面的前端通常是由HTML（HyperText ...
实现可添加删除的待办事项列表界面教程
- **example.js**：实现待办事项列表界面的核心逻辑，包括添加待办事项、删除待办事项的功能实现。 通过上述内容，我们建立了一个待办事项列表界面，它能够响应用户的操作，并以一种直观的视觉方式呈现信息。该应用...
一个待办事项列表界面（可添加删除）
12-18
在本项目中，我们利用HTML5、CSS3和JavaScript（包括jQuery库）创建了一个功能完备的待办事项列表界面。这个界面允许用户添加新的待办事项，并能够删除已完成的任务，从而提升用户对日常任务管理的便利性。接下来，...
joplin一个开源的记笔记和待办事项工具支持桌面和移动端
08-08
joplin，一个开源的记笔记和待办事项工具，支持桌面和移动端，包括：Windows, macOS, Linux, Android and iOS.
jQuery我的日历日程安排事项代码
10-24
jQuery我的日历日程安排事项代码
移动端待办事项列表如何实现上下拖动排序
cuicq77的博客
06-29 446
有不少用户在使用了敬业签的便签和待办分类功能后都表示这些功能是非常实用的，并且在其便签分类中，把便签的排序模式设置为“自由排序”后，就能够长按并上下拖动其中一条便签内容，进行自由排序了，把便签拖动到哪个位置，便签就会排到哪个位置，这个排序功能是很方便的。于是就有一些用户表示想要在待办分类中也使用拖动自由排序功能，因为很多用户在记录待办事项的时候都是无序的，而为每条待办规划好时间后，又想要待办列表按照一定的先后顺序进行显示，这时候拖动排序功能就能够满足要求。而目前动端敬业签的待办事项列表中已支持上下拖动排序功
系统待办事项设计_手机待办事项提醒软件哪个好？推荐使用有提醒功能的便签软件...
weixin_39802055的博客
11-27 342
随着生活节奏的不断加快，日常需要我们处理的待办事项也在逐渐增多，因此为了能保质且保量的完成这些任务，我们中的一些人便选择在自己的手机端安装一款待办事项提醒软件，借助它的提醒功能，来使自己免于遗忘的困扰。既然如此，那么在这个软件行业持续壮大的今天，到底哪款手机待办事项提醒软件比较好用呢？为了便于大家的使用，下面小编就为大家安利一款既简单好用，又有提醒功能的手机便签软件——敬业签。因为，敬...
JQuery实现to do list
qq_37086980的博客
07-14 846
JQuery实现 to do list 代码案例 $(function() { $('#title').on('keydown', function(event) { // 按下回车键保存代办事项 if (event.keyCode == 13) { // 先读取本地存储原来的数据 var local = getData(); // 更新 local 数组，追加数据 lo
jQuery初体验 —— 本地存储方式实现ToDoList
敏敏的博
03-17 1652
文章目录前言一、ToDoList 案例介绍二、ToDoList 案例分析1.本地存储数据2.页面渲染三、案例实现总结 前言 终于学到jQuery啦！今天通过实现ToDoList这个小案例来练习一下jQuery的使用，顺便复习一下本地存储。（源码在文末） 一、ToDoList 案例介绍 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 本页面内容刷新页面不会丢失。 最终效果如下图所
【学习用jQuery写待办事项的思路】
qq_46827043的博客
04-12 827
web前端学习之梳理思路版
自己写的ToDoList—最简单的待办事项列表的代码和思路详解没有更详细的了
weixin_46515050的博客
04-28 3727
ToDoList—最简单的待办事项列表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl...
怎么在电脑桌面上添加待办事项？
最新发布
c18069344077的博客
04-23 1551
更重要的是，它不仅适用于Windows电脑桌面，还可以在Mac电脑、iPad、安卓和苹果手机端上使用，实现数据内容的多端实时同步。例如，将一天中的关键会议、提交报告的时间节点、需要联系的客户等事项清晰列出，就能有效避免遗漏，提高工作效率。更为智能的是，当你在新增待办事项或日程安排时，如果以文字形式输入了时间点，系统会自动为你设置好相应的年月日、时分的定时提醒，省去了手动设置的麻烦。敬业签作为一款优秀的桌面待办软件，以其智能化的提醒系统、多样化的记录功能和跨平台的使用体验，成为上班族不可或缺的工作助手。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

御弟謌謌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值