JQuery + Bootstrap 学习告一段落,,做了一个简单的本地储存的增删改查系统。今天就做个自我总结。
首先Bootstrap的应用:
1.运用了导航栏.
2.dl,dt列表
3.各种按钮的使用
4.模态框,及其不能同时显示在一个页面中的问题的解决。
详情模态框冲突问题解决
总结:感觉Bootstrap也是只有要用的时候才回去查询。掌握其用法就好
JQuery的应用
1.常用的得节点事件。click()等等
2.增加节点 :append()。删除节点:remove(),其中remove()是删除这个节点及其所有子节点。
而empty()是删除这个节点下的所有子节点。
3.获取子节点,父节点。children()。parents()。以及它的过滤筛选,更加方便的直接筛选。与js的方式不同。
4.获取input中的值。val();
5.delegate()的使用,对未来事件的处理。
$("#dj_good_ul").delegate(".delect", "click", function () {
let number = $(".delect").index(this);
getA(number);
})
6.jquery中对于css样式的使用:css()。
$("#option2").css("color","black");
7.let的使用,就不用考虑闭包的问题。
8.splice()的使用
用法:The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
for (let j = 0; j < arrthings.length; j++) {
if (bbname == arrthings[j].itemname) {
arrthings.splice(j, 1); //删除数组arrthings中的arrthings[j]。1表示一个数据。
localStorage.setItem("items", JSON.stringify(arrobj1));
}
}
总结:jquery用起来,代码量比js看着减少了些。但是有时候也会有些功能无法实现。最后只能用js去实现。
Localstroge的使用
本地存储用了localstroge
主要的知识就是,存储,查询,删除。
// 获取存储库中的数据
let objarr = localStorage.getItem("items");
// 存储数据
localStorage.setItem("items", JSON.stringify(d)); //以字符串形式存入localstorage
// 删除某条数据
localStorage.removeItem('myCat');
// 删除所有数据
localStorage.clear();
还有就是怎么存储图片,相信很多人存储图片是都会报错:fakepath的图片路径。
这里我也写了自己的解决办法:详情戳:input【type=“file”】上传图片,浏览器路径出现“fakepath”的解决方法
JSON的使用
// 1.先把数据通过json转化为字符串存储到localstorage
// 2.通过json把localstorage的数据转化为对象,就可以用h5来获取
// 3.访问localstroge中的数据的时候需要先把数据转化为js对象,然后获取到数组,对数组进行读取
因为用到了本地存储localstroge,就需要运用json来做数据的转换。
json的一般使用方法如下
let objnum = JSON.parse(allobj).things;
// 把数据转化为js对象
localStorage.setItem("items", JSON.stringify(d)); //以字符串形式存入localstorage