jQuery笔记(5) 做一个to do list!

全局滚动

本文由“壹伴编辑器”提供技术支持

案例实践:To do list

我们可以写下我们要做的事,如果做完了打上勾,就会变成已经完成事件,也可以取消完成,回到正在进行中的状态.

各种文件引用完毕和准备工作完成以后就开始写了

这里补充一点新的知识:

1. 本地存储里面只能存储字符串的数据格式,需要用JSON.stringify()的方法将数组对象转换成字符串格式.
2. 获取本地存储的数据,我们需要用JSON.parse()把里面的字符串数据转换成对象格式.

①②③:

④⑤⑥:

①②③: 按下回车后就加载渲染,将得到的数据放入li中,然后生成代办事项

(测试一下)

看看n打印出来是什么:

修改一下: ①②③

因为是本地存储的数据,所以是不会丢失的.不仅是要在按下回车才渲染,而是在我们刷新页面时就要自动渲染,

看看到现在为止的效果吧:

但是这是有bug的

因为每次加载都会调用load这个函数,而且因为ol里面本来就有之前的内容,现在又在原先的li的基础上再追加,就会越来越多.

这时候只要在每次遍历之前将ol的内容清空就可以了

这样就能在每次加载的时候,给每个ol填充内容,且一开始是空的ol,所以不会存在多出来的追加.

这样就OK啦

③给li单独设置自定义属性,根据遍历时的索引号

先休息下,明天继续

④⑤⑥⑦

下一步:完成待办&撤销完成

①②③④⑤:

⑥⑦:同时还要修改load()函数,添加一个判断条件

看看现在的效果吧

接下来就是最简单的一步了:统计个数

最后还剩下一点不足需要修改一下,比如不能输入空内容,还有每次按下回车或应该清空输入框:

over!!!

后面又要学新东西啦!!!现在先去重做一遍,然后去看书.