jQuery项目-todolist随想
JQuery项目-todolist
1. 布局
body里主要分三个部分：header头部，footer底部和中间部分我用section包裹。
1.1 header结构
我希望可以将ToDoList和后面的输入框绑定， 所以选择使用label包围ToDoList， 这样就可以点击文字的时候同时选中输入框。
对于输入框input，需要注意id要和label的for的值一样才能绑定；对于想要默认展示的文字，需要使用placeholder属性；将autocomplete设置为”off”避免自动记录之前的历史；required= “required”设置不能提交空表单。
1.2 footer结构
文字就可以，但是注意版权符号需要转义使用©
1.3 主体结构
再分成两部分：正在进行和已经完成。
这里选择也用section包围，因为这样的话就可以达到和header内容的版心对齐效果。
其中每部分的结构都是一样的，h2标题和数量在一行，下一行是list。
最后，刚写完html的初版网页belike：
2. 样式
2.1 整体样式
去除body默认的padding和margin，将背景颜色改为#CDCDCD
去除ol和ul默认的list-style和padding
2.2 header样式
固定高度，要不然由内容撑起来显得太窄了；将版心固定宽度然后居中对齐。
label的文字ToDoList垂直居中，需要设置line-height的大小和height一样大，并且左浮动。
input输入框使用border-radius设为圆角, 里面默认的字离左边框太近了，使用text-indent让文字往后缩进；当选定input输入框时，将outline-width设为0去掉；向右浮动。
2.3 footer样式
文字水平居中使用text-align：center；
2.4 主体样式
因为我的html结构里，把count写在h2里面了，所以给h2一个相对定位，count一个绝对定位来摆放他们的位置；我的count在结构里是用span包裹的，因为span是行内元素，想要改变大小，还需要将display设置为inline-block；
2.5 响应式布局
为了页面可以随着屏幕尺寸做自适应的拉伸，将版心section设定的固定的宽度注销掉，在媒体查询里定义。
加上了css的v2版网页belike：
3. 交互
因为我们希望可以达到刷新或者关掉页面也不会丢失数据的效果，需要用到本地存储localStorage
3.1 todo1: 按下回车将完整的数据存储到本地存储里
首先先给输入框绑定一个keydown的事件。在处理函数中要先通过事件对象e.keyCode判断按键是否为回车键，若是再判断是否为空，若空则alert提示。
若非空则先读取本地存储原来的数据，再将新数据合并再更新存储到本地存储。最后渲染到页面上再将输入框的值置空。
其中，读取数据的操作比较频繁就封装个函数，由于本地存储的数据都是字符串格式，需要JSON.parse()转换为javascipt对象。同理，将数据存储到成本地存储也封装成函数，需要将javascipt对象data使用JSON.stringify(data)转换为本地存储的字符串格式。
将本地存储的所有数据渲染到页面上的功能也封装成函数。调用读取数据的方法，对data进行遍历，遍历的时候通过判断值的done属性值来判断是添加到哪个list。添加的方法选择使用prepend在内部的前面添加，添加的内容就是li标签。
3.2 todo2: 删除操作
并集选择ol和ul两个list中的a，如果点击就将data进行splice然后再存再渲染。
3.3 todo3: 选项操作
并集选择ol和ul两个list中的input，如果点击就将对应的数据的done属性进行修改，然后再存再渲染。
这里需要注意的是要通过$(this)的siblings找到a再找到id属性值。
加上了js的v3版网页belike：
4. 再休整一下样式
4.1动态添加的li
给两个list不同颜色左边框，圆角一点，左右padding把内容挤到中间一点；
给li加相对定位，这样给里面包含的input和a绝对定位就可以固定位置了；
最后的final version!!!
