Bootstrap+jQuery总结

基础

jQuery基础

1. jQuery API 中文文档
2. jQuery API 3.3.1 速查表 （比较系统，好查询）
3. DOM的jquery操作（遍历）
4. 使用注意事项

• 将其文件放在项目指定文件夹（一般在js文件夹下），然后像引用js文件那样引用它
• 必须放在所有自定义js文件之前

5. jQuery官网中可以下载大量的插件以方便使用（2000多个插件）

• jacarousel插件（图片传送带，点击实现，不能自动轮播）
• easyslide插件（图片轮播，不能点击）
• facelist插件（输入关键字，显示内容提示，还可以直接选择）
• mb menu插件（多级菜单）

6. jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）“查询"和"查找” HTML 元素

7. jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有

  元素

• $(“p.test”).hide() - 隐藏所有 class=“test” 的

  元素

• $("#test").hide() - 隐藏所有 id=“test” 的元素

8. 文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

// 开始写 jQuery 代码…

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败

9. jQuery 事件格式

$(“p”).click(function(){

$(this).hide();

});

10. 允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

实例

$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

11. jQuery 遍历

• 意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
• jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

12. jQuery - AJAX load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

13. jQuery事件绑定

a.绑定事件 bind（）；

b.解除绑定 unbind（）；

c.绑定一次事件 one（）；

Bootstrap基础

1. Bootstrap4的重要更新
2. Bootstrap4 中文文档

Bootstrap3 中文文档

3. Bootstrap 4.X版本的图标显示不出来问题

4. 前端初学者应该学bootstrap3还是bootstrap4？

5. 导航栏

6. Bootstrap4 导航栏navbar

7. bootstrap导航栏.nav与.navbar区别

8. 全面解析Bootstrap图片轮播效果

9. Bootstrap：标签页，鼠标滑过激活当前选项卡

10. bootstrap元素居中

在bootstrap中实现元素居中的方法主要有这几种：

1. 加类.text-center（子元素居中）
2. 加类.center-block（自身居中）

3.利用bootstrap中列偏移的概念。例如：col-md-offset-2(外边距向右偏移两列)

9. 轮播插件自动播放

默认使用Bootstrap的Carousel组件，只需要加上 data-ride=“carousel” 就可以实现自动播放了。无需使用初始 化的js函数

其中**data-ride=“carousel”****设置为自动播放，****data-interval=“2500”**可以调整轮播时间间隔。

2.使用jQuery`$(’#slidershow’).carousel({

interval: 2000 // in milliseconds

})

bootstrap使用轮播图时，如果有多个嵌套div，需要规定最大的div的宽度，否则会出现指示符异常

10. bootstrap4 调整元素之间距离

https://blog.csdn.net/jianye5461/article/details/79463014

11. bootstrap之data-toggle,data-dismiss,data-target用法

data-toggle : 标记用于触发的；

data-dismiss：标记点击后消失；

data-target：一般用于button标签里面，后面的参数是响应的标签对应的ID

增删改查基础

localStorage

1. localStorage使用总结 （比较全面，包含json本地存储的方法）
2. localStorage之【增、删、改、查】
3. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车 （比较不错的一个本地存储，实现增删改查的例子）

json

1. JS中操作JSON时，对数据的增删改查
2. AJAX请求 JSON数据并实现本地缓存
3. JQuery、Bootstrap框架和Ajax方法实现一个简单后台表格增删改查 （主要是读取json文件来实现）
4. 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

在 JS 语言中，一切都是对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：

• 对象表示为键值对

• 数据由逗号分隔

• 花括号保存对象

• 方括号保存数组

• JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：

{"firstName": "Json"}

这很容易理解，等价于这条 JavaScript 语句：

{firstName : "Json"}

• JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串
• JSON 和 JS 对象互转

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

xml

1. html和xml的区别

牵扯到后台服务器

1. Jquery与Bootstrap实现后台管理页面增删改查功能

本阶段所遇问题

模态框

1. bootstrap模态框（modal）按ESC键关闭无反应问题
   1. 一定要在div标签里面加上 tabindex="-1"属性！
2. Bootstrap 模态框中加入的按钮不能实现点击事件？获取不到模态框中的内容？ （个人博客，对其有深刻理解）
   1. 浅谈css3有意思的属性pointer-events: none；
   2. pointer-events （MDN）
   3. bootstrap modal的data-dismiss属性 （模态框的关闭）

下拉菜单

1. bootstrap的下拉菜单出错？

引入以下文件

	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

json和localstorage

1. 研究向json对象的嵌套数组中添加元素？

• 每次页面刷新的时候，json对象会回到重新定义的状态，然后会造成对同一个json对象操作的失败
• 已经成功在不同key值中存储数据
• 如果利用不同key值来实现存储的话，没有必要将所有数据存储到嵌套数组当中
• 再次研究使用json嵌套数组来达到自己的要求——刚找到一个方法来实现
• 将本地数据读取出来，然后再在嵌套数组用push()方法添加，完美解决

1. 向json嵌套数组中添加数据后，存储进本地文件，下次在进行操作后会出现覆盖上次存储的现象？
   1. 原因1：因为json对象相同，又对同一个json对象进行操作，实现了修改json对象数据后，又重新保存，所以会出现永远不能记录到上次的存储数据（也就是再次刷新页面后会出现这样的问题）
   2. 原因2：因为在进行存储操作的时候，靠的是json嵌套数组的索引值来实现的。每次进行刷新的时候，json对象的索引值也会刷新，所以会出现这样的操作。
   3. 解决思路1：定义一个数index来记录每次存储后的索引值，每次在进行添加元素的时候，在上次已经添加的基础上在进行操作
   4. 解决思路2：改变当前json的数据存储方式，每次都向该json对象添加一个记录当前添加操作的数组
   5. 解决思路3：将json对象先存成数组然后在存进json里边——感觉不行，刷新页面之后数组还是会初始化
   6. 最终解决办法——每次添加时候也添加相对应的key
   7. 在不懈努努力之下，最终还是将此问题按照最初的想法解决——将本地数据读取出来，然后再在嵌套数组用push()方法添加，完美解决（注意，json对象要在方法内部声明）
2. 当本地数据为不存在的时候，一个全局变量显示未声明的错误，因为后边多出用到这个变量，多以比较难改。

• 思路1：报错未声明，是因为读取到此行代码的时候json未进行本地存储，所以会报错
• 解决1：先进行本地存储（存储空的json对象），然后在声明全局变量
• 问题：出在第二次添加后应该保存打的json对象，而不是保存小的嵌套数组的对象
• 可以将json的嵌套数组改为json数组