jquery作品思路

/**增删改查分类基础逻辑（本质操作：增删改查操作的都是本地储存里的数组，而不是代码里的数组）

* 第一步，写好本地储存需要的数组格式===图片地址、英雄名称和英雄属性

* 第二步， 1.写将自己代码里的数组储存到本地储存的方法（本地储存只能存字符串，所以需要先转化）saveDate()

*    2.写得到本地储存数组的“date”数组方法（先转化为数组对象） getDate()

*    3.写渲染遍历方法，使本地储存数组“date”加载到页面(注意每次遍历前要清空盒子内所有东西) load()

*      本质：增删改查，修改了本地储存的数据。load渲染方法，遍历了本地储存数组显示到页面中

*          所以要每次遍历前清空一下盒子的内容

*    4.前期工作完成

*  涉及到的知识：两个有参构造1.localStorage.setItem(key, JSON.stringify(date)); 2.localStorage.getItem(list);

*          each数组动态遍历，即随着i的增加检测下标i所对应的数组对象。

*              each模板：$.each(dateName, function (i, value) {}

*                dateName：数组名称,i:数组下标，val

* 第三步，写需要的增删改查方法

*    1.如果有图片，需要先写动态预览。

*      file的图片路径读取不到，需要先转化为64位，然后在读取转化后数据的result（即我们需要的图片路径）

*    涉及到的知识点：onchange，files[0]，new FileReader()，readAsDataURL(file)，result

*    (1) onchange 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。

*    (2) files[0]：type="file"的input原型地址

*    (3) new FileReader()，readAsDataURL(file)：将files[0]转化位base64位代码可获取状态

*    (4) result：上传文件获取的图片路径；即img.src = files[0].result;

*    (5) 注意获取的时候用js获取比较简单

*    2.增加函数（注意刚提到的增删改查的本质：对本地储存的数组进行操作，而不是对代码里的数组进行操作）

*      得到本地储存数据getDate()

*        push（）方法向数组中增加自己想要的元素

*          保存更改（增加新元素）后的新的本地储存数组date saveDate()

*            遍历新的date（本地储存中的）数组

*    3.删除函数（核心和增加函数一样）     

*      得到本地储存数据getDate()

*        splice（）方法向数组中删除元素 date.splice(index, num);index数组下标，num从这个下标开始后面要删除的个数

*          保存更改（增加新元素）后的新的本地储存数组date saveDate()

*            遍历新的date（本地储存中的）数组

*    4.修改函数（date.splice(index, 1, { img: result1, name: $('#name1').val(), title: $('#sort1').val() });）

*      得到本地储存数据getDate()

*        splice（）方法向数组中删除元素 date.splice(index, num，html1，html2,html3···);index数组下标，num从这个下标开始后面要删除的个数，html要添加的元素

*          保存更改（增加新元素）后的新的本地储存数组date saveDate()

*            遍历新的date（本地储存中的）数组

*    5.查找功能

*      巧妙思路：遍历网页需要查找的区域所有元素，遍历的同时检测区域中每个元素的text值，与获取的input里的值进行比较

*          若相同，this元素显示；若不相同，this元素隐藏

* 第四步，写重置功能

*        用于元素被删除想要找回时的的操作

*      具体实现：调用saveDate（）方法，参数传递值--想要转化成本地储存的代码里的数组       

* jquery很简单，了解本质和逻辑后100多行js代码就能写出一个很好的

*/