平时都是在用vue，闲来忽然想起初涉前端是用的jq，那就写点啥回忆回忆吧！
要想玩转jq，我感觉jq相对来讲有些js基础，有个API文档，基本人人都可以玩转。（当然玩转还是不能随心所欲）
对于一个开发者，”随心所欲“应该是使用某个插件的最高境界。
走着，上代码
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 * {
11 padding: 0;
12 margin: 0;
13 }
14
15 .todo_list {
16 width: 800px;
17 height: 800px;
18 margin: 20px auto;
19 border-style: dotted solid double dashed;
20 }
21
22 .top {
23 height: 100px;
24 /* outline: red solid 1px; */
25 }
26
27 .title {
28 text-align: center;
29 }
30
31 .search {
32 text-align: center;
33 }
34
35 .search input {
36 margin: 10px;
37 width: 650px;
38 height: 30px;
39 padding-left: 5px;
40 }
41
42 .search button {
43 width: 60px;
44 height: 30px;
45 background-color: #428bca;
46 border-color: #357ebd;
47 color: #fff;
48 border-radius: 5px;
49 border: none;
50 }
51
52 .head {
53 height: 50px;
54 }
55
56 .content {
57 height: 600px;
58 /* outline: yellow solid 1px; */
59 }
60
61 .list {
62 margin-top: 10px;
63 height: 30px;
64 display: flex;
65 text-align: center;
66 }
67
68 .left {
69 width: 50%;
70 text-indent: 40px;
71 }
72
73 .time {
74 width: 30%;
75 }
76
77 .operation {
78 width: 20%;
79 text-align: center;
80 }
81
82 .operation button {
83 padding: 5px;
84 margin-left: 5px;
85 background-color: #428bca;
86 border-color: #357ebd;
87 color: #fff;
88 border-radius: 5px;
89 border: none;
90 }
91
92 .listtodo {
93 margin: 10px 0;
94 display: flex;
95 }
96
97 .line {
98 text-decoration: line-through;
99 color: red;
100 }
101 </style>
102 </head>
103
104 <body>
105 <div class="todo_list">
106 <div class="top">
107 <div class="title">
108 <h2>TODOLIST</h2>
109 </div>
110 <div class="search">
111 <input type="text" id="todo" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
112 <button id="add">add</button>
113 </div>
114 </div>
115 <div class="head">
116 <div class="list">
117 <div class="left">
118 <h3>need to be dealt with</h3>
119 </div>
120 <div class="time">
121 <h3>time</h3>
122 </div>
123 <div class="operation">
124 <h3>operation</h3>
125 </div>
126 </div>
127 </div>
128 <div class="content">
129 <!-- <div class="listtodo">
130 <div class="left">
131 123
132 </div>
133 <div class="time">
134 2019.15.26
135 </div>
136 <div class="operation">
137 <button>done</button>
138 <button>delete</button>
139 </div>
140 </div> -->
141 </div>
142 </div>
143 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
144 <script>
145 //id标识便于筛选
146 var count = 0;
147 // 第一次加载执行
148 window.onload = function () {
149 w_getData();
150 }
151 // localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口***享，数据一直有效，除非人为删除，可作为长期数据。
152 //设置：
153 // localStorage.setItem("dat", "456");
154 //获取：
155 // localStorage.getItem("dat");
156 //删除
157 // localStorage.removeItem("dat");
158 //调取本地存储展示在页面 w_前缀是为了方便智能查找
159 function w_getData() {
160 var data = JSON.parse(localStorage.getItem('todoList'));
161 var arr = [];
162 //没有直接return掉
163 if (data == null) {
164 return
165 }
166 $('.content').html('');
167 for (var i = 0; i < data.length; i++) {
168 if (data[i].line == true) {
169 var html = `<div class="listtodo line" listid="${data[i].id}"><div class="left">${data[i].things}</div><div class="time">${data[i].time}</div><div class="operation"><button id="done">done</button><button id="delete">delete</button></div></div>`;
170 // $('.content').append(html);
171 } else {
172 var html = `<div class="listtodo" listid="${data[i].id}"><div class="left">${data[i].things}</div><div class="time">${data[i].time}</div><div class="operation"><button id="done">done</button><button id="delete">delete</button></div></div>`;
173 }
174 // var html = `<div class="listtodo" listid="${data[i].id}"><div class="left">${data[i].things}</div><div class="time">${data[i].time}</div><div class="operation"><button id="done">done</button><button id="delete">delete</button></div></div>`;
175 $('.content').append(html);
176 if (data[i].id != null) {
177 arr.push(data[i].id);
178 }
179 }
180 if (arr.length > 0) {
181 var max = Math.max.apply(null, arr);
182 count = max + 1;
183 }
184 }
185 $(function () {
186 //添加事件
187 $('#add').click(function () {
188 // 非空验证
189 if ($('#todo').val() == '') {
190 return
191 }
192 //获取时间
193 var time = w_nowTime();
194 //todoList
195 var todoList = [];
196 // 先获取下本地是否存有
197 var historyTodoList = JSON.parse(localStorage.getItem("todoList"));
198 if (historyTodoList) {
199 //本地有
200 var todo = {};
201 todo.things = $('#todo').val();
202 todo.time = time;
203 todo.id = count;
204 historyTodoList.push(todo);
205 localStorage.setItem('todoList', JSON.stringify(historyTodoList));
206 count++;
207 } else {
208 //本地無
209 var todo = {};
210 todo.things = $('#todo').val();
211 todo.time = time;
212 todo.id = count;
213 todoList.push(todo);
214 localStorage.setItem('todoList', JSON.stringify(todoList));
215 count++;
216 }
217 //存储完成后清空输入框
218 $('#todo').val('');
219 // 显示在任务列表
220 w_getData();
221 })
222 // 已完成直接划掉(采用事件委托的方式，方式新增html元素找不到事件)
223 $(document).on('click', '#done', function () {
224 $(this).parent().parent().addClass('line')
225 let listids = $(this).parent().parent().attr('listid');
226 let datas = JSON.parse(localStorage.getItem('todoList'));
227 let resIndexs = datas.findIndex(v => {
228 return v.id === parseInt(listids);
229 })
230 datas[resIndexs].line = true;
231 localStorage.setItem('todoList', JSON.stringify(datas));
232
233 })
234 //delete删除事件(采用事件委托的方式，方式新增html元素找不到事件)
235 $(document).on('click', '#delete', function () {
236 let listid = $(this).parent().parent().attr('listid');
237 let data = JSON.parse(localStorage.getItem('todoList'));
238 // ES6 提供了两个数组的实例查找相关的方法
239 // ① Array.find
240 // ② Array.findIndex
241 let res = data.find(v => {
242 return v.id === parseInt(listid);
243 })
244 let resIndex = data.findIndex(v => {
245 return v.id === parseInt(listid);
246 })
247 console.log(res, resIndex)
248 data.splice(resIndex, 1);
249 //删除后存储
250 localStorage.setItem('todoList', JSON.stringify(data));
251 w_getData();
252 })
253 //时间函数
254 function w_nowTime() {
255 var myDate = new Date();
256 var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
257 var month = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
258 var day = myDate.getDate(); //获取当前日(1-31)
259 var week = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
260 var hour = myDate.getHours(); //获取当前小时数(0-23)
261 var minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
262 var seconds = myDate.getSeconds(); //获取当前秒数(0-59)
263 switch (week) {
264 case 0:
265 week = `日`
266 break;
267 case 1:
268 week = `一`
269 break;
270 case 2:
271 week = `二`
272 break;
273 case 3:
274 week = `三`
275 break;
276 case 4:
277 week = `四`
278 break;
279 case 5:
280 week = `五`
281 break;
282 case 6:
283 week = `六`
284 break;
285 default:
286 }
287 return `${year}年${w_zero(month)}月${w_zero(day)}日${w_zero(hour)}:${w_zero(minutes)}:${w_zero(seconds)}星期${week}`
288 }
289 //不够补零
290 function w_zero(num) {
291 if (num < 10) return "0" + num; else return num;
292 }
293 })
294 // enter添加事件
295 $('#todo').keydown(function (event) {
296 var e = event || window.event;
297 if (e.keyCode == 13) {
298 $('#add').click();
299 }
300 });
301 </script>
302 </body>
303
304 </html> 相对来讲，不管用啥最终还是饮水思源，原生js是所有框架的老祖宗
无论是对于萌新还是老油条
都是一份”戒不掉的思念“。
