LonM

前端开发基础知识汇总

一.HTML

1.前言与常用标签

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

Web标准构成：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

web标准小结

web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
结构类似人的身体，表现类似人的着装，行为类似人的行为动作
理想状态下，他们三层都是独立的，放到不同的文件里面

声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。指定html 语言种类

head 头部. 标题 title 文档标题

标签名	定义	说明
	标题标签	作为标题使用，并且依据重要性递减
	段落标签	可以把 HTML 文档分割为若干段落
	水平线标签	没啥可说的，就是一条线
	换行标签
	div标签	用来布局的，但是现在一行只能放一个div
	span标签	用来布局的，一行上可以放好多个span

标签	显示效果
b或strong	粗体
i或em	斜体
s或del	加删除线
u或ins	加下划线

b 只是加粗 strong 除了可以加粗还有强调的意思，语义更强烈。

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的宽度
border	数字	设置图像边框的宽度

**注意: **

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取键值对的格式 key=“value” 的格式

链接标签

文字或图片

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

快捷键是： ctrl + / 或者 ctrl +shift + /

相对路径

路径分类	符号
同一级路径
下一级路径	“/”
上一级路径	“…/”

锚点定位

使用相应的id名标注跳转目标的位置。 (找目标)

第2集

2. 使用链接文本创建链接文本（被点击的）（拉关系）我也有一个姓毕的姥爷..

base标签

base 可以设置整体链接的打开状态
base 写到之间
把所有的连接都默认添加 target="_blank" 在新窗口中打开链接

预格式化文本pre

 标签可定义预格式化的文本。被包围在  标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

特殊字符

大于号 >

小于号 <

空格

2.表格table

表格作用：

存在即是合理的。表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表

格式数据

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。

**总结： **

表格的主要目的是用来显示特殊数据的
一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签
中只能嵌套类的单元格
标签，他就像一个容器，可以容纳所有的元素

表格属性 重点记住 cellspacing 、 cellpadding

属性名	含义	常用属性值
border	设置表格的边框（border="0"为无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2像素）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1像素）
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	这是表格在网页中的水平对齐方式	left、center、right

表头单元格标签th

作用：
- 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中
语法：
- 只需用表头标签替代相应的单元格标签即可

表格标题caption

caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。
caption 标签必须紧随 table 标签之后。
这个标签只存在表格里面才有意义。

合并单元格

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

合并的顺序我们按照先上后下先左后右的顺序

先确定是跨行还是跨列合并
根据先上后下先左后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量比如：
删除多余的单元格单元格

3.列表和表单

列表

无序列表ul

1. 
中只能嵌套
，直接在标签中输入其他标签或者文字的做法是不被允许的。
2. 与之间相当于一个容器，可以容纳所有元素。

有序列表ol

列表项1
列表项2
列表项3

自定义列表

名词1: 名词1解释1; 名词1解释2
名词2: 名词2解释1; 名词2解释2

标签名	定义	说明
	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	有序标签	里面只能包含li 有顺序，使用情况较少
	自定义列表	里面有2个兄弟， dt 和 dd

表单

input控件

input 输入的意思
标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

type的属性	描述
text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图像形式提交按钮
file	文件域

属性	属性值	描述
name	由用户自定义	控件的名称
value	由用户自定义	input控件中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

checked="checked"表示就默认选中了

label标签

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

1.第一种用法就是用label直接包括input表单。

用户名：

2.第二种用法 for 属性规定 label 与哪个表单元素绑定

男

textarea文本域

语法：

<textarea >
  文本内容
textarea>

作用：

通过textarea控件可以轻松地创建多行文本输入框.

cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

select下拉列表

选项1 选项2 选项3 ...

一起使用
form属性，可以将输入标签放在表单的外面，还受到表单的管理
required:必填验证
novalidate:关闭验证
- 在表单上添加该属性，那么在提交的时候就不会再执行 required验证
pattern：自定义验证-通过编写正则表达式自定义验证规则一般和required同时使用
- 表单事件

audio 音频标签

语法:

<audio src="小猪佩奇.mp3" autoplay> audio>

支持的格式

格式	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

video 视频标签

语法:

  <video src="小猪佩奇.mp4" autoplay controls >video>

支持的格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

video常用属性、方法、事件

属性	方法	事件
duration 视频播放时长	play 播放	canplay 视频加载完毕准备播放
currentTime 当前播放进度	pause 暂停	timeupdate 播放时-持续触发
volume 音量大小

source标签

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

    
    <video >
      <source src="1.mp4">
      <source src="2.mp4">
      <source src="3.mp4">
    video>

object-fit属性

当video标签视频内容宽度没有铺满video标签时，可以在css写上该属性即可

    video {
      /* 让视频内容铺满整个video标签 */
      object-fit: fill;
    }

公共属性

以下属性是要直接写在标签上的如 autoplay controls

<video src="小猪佩奇.mp4" autoplay controls >video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

伪类选择符

结构伪类选择器

E:first-child —— 匹配父元素的第一个子元素

E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n个元素或者是倒数第n个元素（n也可以为公式、数字、关键字）

常见的关键词有even偶数、odd奇数

E:nth-of-type(n)

E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。

属性选择器

E[att] 选择具有att属性的E元素。
E[att=“val”] 选择具有att属性且属性值等于val的E元素。
E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=“val”] 选择具有att属性且属性值为包含val的字符串的E元素
E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。

伪元素选择器

E::before 在E元素前插入一个元素
E::after 在E元素后插入一个元素
E::first-letter 选择到了E容器内的第一个字母
E::first-line 选择到了E容器内的第一行文本

想要让伪元素有效，必须遵循以下注意事项

伪元素只能给双标签加不能给单标签加
伪元素的冒号前不能有空格如 E ::before 这个写法是错误的
伪元素里面必须写上属性 content:"";

2.2D、3D转换、动画animation

2d移动 translate

语法：div{

transform: translate(50px,50px);

}

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2d旋转 rotate

使用步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{
      transform: rotate(0deg);
}

特点

角度为正时顺时针负时为逆时针
默认旋转的中心点是元素的中心点

转换中心 transform-origin

该属性可以修改元素旋转的时候的中心点

transform-origin:50% 50%; 默认值元素的中心位置百分比是相对于自身的宽度和高度
transform-origin:top left; 左上角和 transform-origin：0 0;相同
transform-origin:50px 50px; 距离左上角 50px 50px 的位置
transform-origin：0; 只写一个值的时候第二个值默认为 50%;

2d缩放 scale

给元素添加转换属性 transform
转换的属性值为 scale(宽的倍数,高的倍数) 如宽变为两倍，高变为3倍 transform:scale(2,3)

div{
    transform:scale(2,3);
}

小结

transform:scale(1,1) 放大一倍相对于没有放大
transform:scale(2,2) 宽和高都放大了2倍
transform:scale(2) 只写一个参数第二个参数则和第一个参数一样相当于 scale(2,2)
transform:scale(0.5,0.5) 缩小
transform:scale(-2,-2) 反向放大2倍很少用负数容易让人产生误解

动画 animation

用@keyframes定义动画，类似定义类选择器

   /* 1 声明动画函数 */

    @keyframes ani_div {
 0%{
    width: 100px;
    background-color: red;
  }
  50%{
    width: 150px;
    background-color: green;
  }
  100%{
    width: 300px;
    height: 300px;
    background-color: yellow;
  }
}
 div {
      width: 200px;
      height: 200px;
      background-color: aqua;
      margin: 100px auto;
      /* 2 调用动画 */
      animation-name: ani_div;
      /* 持续时间 */
      animation-duration: 2s;
    }

语法：

动画名

设置要使用的动画名 animation-name:xxx;
持续时间

设置动画播放的持续时间 animation-duration:3s
速度曲线

和设置过渡的速度曲线一样 animation-timing-function:linear;
- linear：匀速
- ease：慢-快-慢默认值
- ease-in：慢-快。
- ease-out：快-慢。
- ease-in-out：慢-快-慢。
延迟时间

animation-delay: 0s;
循环次数

设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环
循环方向

animation-direction

如在动画中定义了 0%：红色 100%：黑色 那么当属性值为
1. normal 默认值 红 -> 黑
2. reverse 反向运行 黑 -> 红
3. alternate 正-反-正… 红 -> 黑 -> 红…
4. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
5. 以上与循环次数有关
动画等待或者结束的状态

animation-fill-mode 设置动画在等待或者结束的时候的状态
- forwards：动画结束后，元素样式停留在 100% 的样式
- backwards：在延迟等待的时间内，元素样式停留在 0% 的样式
- both：同时设置了 forwards和backwards两个属性值
暂停和播放

animation-play-state 控制播放还是暂停

running 播放 paused 暂停

复合写法
```
animation: name duration timing-function delay iteration-count direction fill-mode;

animation:动画名称 持续性时间 运动曲线 合适开始 播放次数 是否反方向 起始或结束的标志
```
动画结束事件animationend

元素在动画结束之后，会自动触发的事件 animationend
```
    var div = document.querySelector("div");
    div.addEventListener("animationend", function () {
      console.log("div的动画结束之后，触发");
    })
```
css3兼容处理

css3涉及到较多的新属性，某些低版本（如ie8以及以下）的浏览器对css3的支持程度不够，因此需要做以下处理

添加对应的浏览器的前缀常见前缀如下
- 谷歌 -webkit
- 火狐 -moz
- IE -ms
如对 border-radius 进行兼容性处理
```
      -webkit-border-radius: 30px 10px;
      -moz-border-radius: 30px 10px;
      -ms-border-radius: 30px 10px;
	  // border-radius 一定要放在最后
      border-radius: 30px 10px;
```
如果发现添加前缀也解决不了兼容性问题，那么就不要使用该css3属性

3D转换

3d移动 translate3d
1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
2. translform:translateX(100px) 仅仅是移动在x轴上移动
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

视距 perspertive

perspertive 就是用来设置人和物体的距离

写在被观察元素的父盒子里

左手准则

要判断某元素沿着x轴是怎么旋转的

左手的手拇指指向 x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

3d旋转 rotate3d

语法：

transform:rotateX(45deg); 沿着x轴正方向旋转 45度
transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度了解即可

3D缩放 scale3d

语法：

transform: scale3d(1 ,1,2); 宽，高缩放一倍，厚度放大两倍
transform: scaleX(1) 只缩放宽
transform: scaleY(1) 只缩放高
transform: scaleZ(1) 只缩放厚

视距原点 perspective-origin

视距原点 可以设置人站在x轴和y轴的位置

视距原点和视距一样，也是设置给要观察元素的父元素上
perspective-origin:center center; 默认值是元素的中心点
perspective-origin:10px；指定了一个参数的时候，第二个参数默认为center 也就是50%；
perspective-origin:10% %；百分比都是相对于自身的宽度和高度

转换样式（3D呈现） transform-style

控制子元素是否开启3维立体环境

transform-style: flat; 平面模式 - 不开启3维立体环境
transform-style: preserve-3d; 3维立体环境

3.流式布局

布局视口 layout viewport

移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

视觉视口 visual viewport

它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签

"viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

属性	解释
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

最标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。

物理像素比：一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

背景缩放background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

单位：长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

CSS3盒子模型

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型：盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

/*CSS3盒子模型（用这个）*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

移动端特殊样式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

流式布局方式

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

4.flex布局

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex

container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
item），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父项常见属性

flex-direction：设置主轴的方向

子属性	属性值
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content：设置主轴上的子元素排列方式

子属性	属性值
flex-start	默认值，从头部开始，如果主轴是X，则从左往右
flex-end	从尾部开始排列
center	在主轴居中对齐，如果主轴是X轴，水平居中
space-around	平分剩余空间
space-bet	先两边贴边再平分剩余空间

flex-wrap：设置子元素是否换行

默认项目都排在一条线（又称”轴线”）上。

flex-wrap属性定义，flex布局中默认是不换行的

nowrap 不换行

wrap 换行

align-items：设置侧轴上的子元素排列方式（单行）

flex-start 从头部开始

flex-end 从尾部开始

center 居中显示

stretch 拉伸

align-content：设置侧轴上的子元素的排列方式（多行）

只能用于子项出现换行的情况（多行），在单行下是没有效果的。

子属性	属性值
flex-start	默认值在侧轴的头部开始排列
flex-end	从侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-bet	子项在侧轴先两边贴边再平分剩余空间
stretch	设置子项元素高度平分父元素高度

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow:row wrap;

子项常见属性

flex子项目占的份数

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
    flex: ; /* 默认值 0 */
}

align-self控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

5.rem布局

rem单位

rem (root em)是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小。

比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。

媒体查询

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

all 用于所有设备

print 用于打印机和打印预览

scree 用于电脑屏幕，平板电脑，只能手机等

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

width 定义输出设备中页面可见区域的宽度

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大可见区域宽度

less 基础

Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

Less 使用之变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名:值;

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

@color: pink;

Less 编译 vocode Less 插件

Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，重新加载下 vscode。

只要保存一下Less文件，会自动生成CSS文件。

Less 嵌套 ：如果遇见（交集|伪类|伪元素选择器），利用&进行连接

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

乘号（*）和除号（/）的写法
运算符中间左右有个空格隔开 1px + 5
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个值有单位，则运算结果就取该单位

6.响应式布局

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

Bootstrap

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap基本使用

创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容

bootstrap布局容器

.container

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

bootstrap栅格系统

按照不同屏幕划分为1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=“col-md-4 col-sm-6”

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

 
  
      往左侧推
      往右侧推

响应式（隐藏）工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

语法： class="hidden-xs“

与之相反的是 visible-xs/sm/md/lg

四.js基础

1.数据类型

JS组成

ECMAScript——JavaScript语法

DOM——页面文档对象模型

BOM——浏览器对象模型

数据存储单位

大小关系：bit < byte < kb < GB < TB<.....

位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）
字节(Byte)：1B = 8b
千字节(KB)：1KB = 1024B
兆字节(MB)：1MB = 1024KB
吉字节(GB): 1GB = 1024MB
太字节(TB): 1TB = 1024GB

输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

声明变量

//  声明变量  
var age; //  声明一个 名称为age 的变量

赋值

age = 10; // 给 age  这个变量赋值为 10

变量的初始化

var age  = 18;  // 声明变量同时赋值为 18

声明一个变量并赋值， 我们称之为变量的初始化。

数据类型简介

Nunber 数字型，包含整型和浮点型，在JS中八进制前面加0，十六进制前面加 0x

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
alert(Infinity);  // Infinity 无穷大
alert(-Infinity); // -Infinity 无穷小
alert(NaN);       // NaN , Not a number，代表一个非数值

isNaN用来判断一个变量是否为非数字的类型，返回 true 或者 false

语法： var 变量名A = isNaN(变量名B)

String 字符串型

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

字符串长度 —— 语法：语法： var 变量名A = 变量名B.length

字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

Boolean 布尔值类型，如true、false,等价于1和0、
Undefined 未定义——一个声明后没有被赋值的变量会有一个默认值undefined
Null 空值——一个声明变量给 null 值，里面存的值为空

获取变量数据类型

typeof 可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

数据类型转换

转换为字符串

1.toString() 语法：alert(变量名.toString())

2.String()强制转换语法：alert(String(变量名))

3.加号拼接字符串：和字符串拼接的结果都是字符串（隐式转换）
转换为数字型

1.parseInt(string)函数语法：parseInt(’string‘)

2.parseFloat(string)函数语法：parseInt(’string‘)

3.Number()强制转换语法：Numer(‘string’)

4.js隐式转换：利用算术运算隐式转换为数值型比如：‘12’-0
转换为布尔型

Boolean()函数语法：Boolean(‘string’)

关键字

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

2.运算符、流程控制、循环

递增运算符

++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。

使用口诀：先自加，后返回值

num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。

使用口诀：先返回原值，后自加

比较运算符

< > <== >== == != === !==

逻辑运算符

与&& 或|| 非!

流程控制

if 语句

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

三元表达式

表达式1 ? 表达式2 : 表达式3;

switch分支流程控制

  switch( 表达式 ){ 
      case value1:
          // 表达式 等于 value1 时要执行的代码
          break;
      case value2:
          // 表达式 等于 value2 时要执行的代码
          break;
      default:
          // 表达式 不等于任何一个 value 时要执行的代码
  }

注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

for循环

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

while循环

while (条件表达式) {
    // 循环体代码 
}

do-while循环

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

continue

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）

break

立即跳出整个循环（循环结束）

3.数组、函数

创建数组

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组

注意 Array () ，A 要大写

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中新增元素

  数组[ 数组.length ] = 新数据;

函数的使用

声明函数

// 声明函数
function 函数名() {
    //函数体代码
}

调用函数

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

函数的参数

形参：函数定义时设置接收调用时传入
实参：函数调用时传入小括号内的真实数据

函数的返回值

return 语句

在使用 return 语句时，函数会停止执行，并返回指定的值
如果函数没有 return ，返回的值是 undefined

arguments的使用

当不确定有多少个参数传递的时候，可以用 arguments 来获取

arguments展示形式是一个伪数组，可以进行遍历

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

4.作用域、预解析、对象

JavaScript（es6前）中的作用域有两种：

全局作用域在函数内部没有声明直接赋值的变量属于全局变量

局部作用域（函数作用域）

预解析

预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行：从上到下执行JS语句。

预解析会把变量和函数的声明在代码执行之前执行完成。

对象

所有的事物都是对象，对象是由属性和方法组成的

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

创建对象的三种方式

1.利用字面量创建对象

var 对象名 = {
   属性1：属性值1;
  属性2：属性值2;
  .......
    sayHi : function(){
        alert('大家好啊~');
    }
};

调用对象——对象名.属性名或对象名[‘属性名’]

调用对象方法——对象名.方法名()

2.利用 new Object 创建对象

var 对象名 = new Obect();

通过内置构造函数Object创建对象，此时变量已经保存了创建出来的空对象

通过对象操作属性和方法的方式，来为对象增加属性和方法

比如——对象名1.属性1=’XXX‘;

3.利用构造函数创建对象

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

构造函数的调用格式

var obj = new 构造函数名(实参1，实参2，实参3)

以上代码中，obj即接收到构造函数创建出来的对象

遍历对象

其语法如下：

for (var 变量 in 对象名字) {
    // 在此执行代码
}

5.内置对象

Math对象

属性、方法名	功能
Math.PI	圆周率
Math.floor()	向下取整
Math.ceil()	向上取整
Math.round()	四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs()	绝对值
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机数

// Math随机数方法  包含两端的2个数字
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}
 console.log(getRandom(1, 10));

日期对象

获取当前时间必须实例化：

var now = new Date();

获取指定时间的日期对象

var future = new Date('2019/5/1');//或者 （'2019-10-10 8:8:8'）

 // 返回当前年份
        console.log(date.getFullYear());
        // 返回当前月份 数值比实际月份小1  需要＋1
        console.log(date.getMonth() + 1);
        // 返回当前日期是本月的多少日
        console.log(date.getDate());
        // 返回当前日期是周几  注意：返回当前是周几  周日返回值为0
        console.log(date.getDay());
         // 返回当前小时
        console.log(date.getHours());
		  // 返回当前分钟
        console.log(date.getMinutes());
		  // 返回当前秒钟
        console.log(date.getSeconds());

获取总毫米数

基于1970年1月1日（世界标准时间）起的毫秒数

获取总毫秒数如下

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

数组对象

检测是否为数组

1.instanceof 可以判断一个对象是否是某个构造函数的实例返回值为true或者false

语法：数组名 instanceof Array

比如：console.log(arr instanceof Array);

2**.Array.isArray(数组名)**用于判断一个对象是否为数组返回值为true或者false 是 HTML5 中提供的方法

添加删除数组元素

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素–数组名.push(要添加的)	新的长度
pop()	删除最后一个元素，数组长度减一	删除的元素值
unshift(参数1…)	开头添加一个或多个元素	新的长度
shift()	删除第一个元素，数组长度减一	第一个元素值

注意：push、unshift为增加元素方法；pop、shift为删除元素的方法

数组排序

方法名	说明
reverse()	颠倒数组中元素顺序
sort()	对数组的元素进行排序

注意：sort方法需要传入参数来设置升序、降序排序

如果传入“function(a,b){ return a-b;}”，则为升序
如果传入“function(a,b){ return b-a;}”，则为降序

数组转换为字符串

1.toString() 把数组转换成字符串，逗号分隔每一项

2.join(‘分隔符’) 把数组中的所有元素转换为一个字符串

注意：二者均返回一个字符串，join方法如果不传入参数，则按照 “ , ”拼接元素

数组对象转换为字符串格式

JSON.stringify()

其他方法

数组连接 concat(‘连接内容’)

数组截取字符串 slice(截取的起始位置，截取的数量)

数组替换 replace(‘被替换的字符’,‘替换为的字符’) 只会替换第一个

数组根据索引号删除相关内容 splice(索引号,从索引号处开始要删除的数量 )

字符串对象

js 会把基本数据类型包装为复杂数据类型

字符串转换为数组对象

JSON.parse()

字符串操作方法

连接字符串 str.concat(‘连接内容’)

查找字符串 str.substr（start,length）从start位置开始，length取的个数

截取字符串 slice(start,end) 从start位置开始，截取到end位置，end取不到

替换字符串 str.replace(‘被替换的字符’,‘替换为的字符’) 只会替换第一个

字符转换为数组 str.split(‘分隔符’)

五.Web API

API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能

1.获取元素、事件基础、操作元素

获取元素

根据ID获取

语法：document.getElementById(id)
返回值：元素对象 或 null

根据标签名获取元素

语法：document.getElementsByTagName('标签名')  或者 element.getElementsByTagName('标签名') 
返回值：元素对象集合（伪数组，数组元素是元素对象）

根据类名获取元素 （h5新增）

document.getElementsByClassName(‘类名’) //返回元素对象集合

根据选择器获取元素 （h5新增）

document.querySelector(‘选择器’) //返回第一个元素对象

document.querySelectorAll(‘选择器’) //根据指定选择器返回

获取body元素

document.body

获取html元素

document.documentElement

事件基础

事件三要素

事件源（谁）：触发事件的元素
事件类型（什么事件）：例如 click 点击事件
事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发

修改元素内容（获取或设置）

element.innerText 从起始到终止位置的内容，但不识别html标签，空格和换行也会去掉

element.innerHTML 从起始到终止位置的内容，但识别html标签，空格和换行也会保留

属性操作

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名=值

样式属性操作

element.style 行内样式操作

element.className 类名样式操作

2.自定义属性操作、节点操作

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

自定义属性操作

获取属性值

1.element.属性 //获取内置属性（元素本身自带的属性）

2.element.getAttribute(’属性值’) //主要获得自定义的属性，程序员自定义的属性

设置属性值

1.element.属性 = ‘值’ //设置内置属性值

2.element.setAttribute(’属性值’,‘值’) //主要设置自定义的属性

移出属性

element.removeAttribute(‘属性’);

H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如：element.setAttribute('data-index',2)

获取H5自定义属性

element.dataset.属性名

element.dataset[’‘属性名’]

节点操作

元素节点 nodeType为1 //实际开发中的主要操作对象

属性节点 nodeType为2

文本节点 nodeType为3（包含文字、空格、换行等）

父级节点

node.parentNode //返回最近的一个父节点，没有则返回null

子节点

1.parentNode.childNodes //会返回所有节点

2.parentNode.children //只返回子元素节点，其余节点不返回，重点使用这个

第1个子节点：parentNode.firstElementChild

最后一个子节点：parentNode.lastElementChild

兄弟节点

node.nextElementSibling 返回下一个兄弟元素节点

node.previousElementSibling 返回上一个兄弟元素节点

创建节点

document.createElement(‘tagName’)

添加节点

node.appendChild(节点名) //将一个节点添加到指定父节点的子节点列表末尾，类似于css里的after伪元素

node.insertBefore(节点名,指定元素) //将一个节点添加到父节点指定的子节点前面，类似于css里的before伪元素

删除节点

node.removeChild(child)

说明：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

复制（克隆）节点

node.cloneNode() ; // 括号为空或者里面是false 浅拷贝只复制标签不复制里面的内容

node.cloneNode(true); //括号为true 深拷贝复制标签复制里面的内容

document.write创建元素

语法：
- document.write()
- element.innerHTML
- document.createElement()
区别：
1. document.write 是直接将内容写入页面的内容流，界面加载完成之后，再写入，这样它会导致页面全部重绘
2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰
5. 总结：不同浏览器下，innerHTML 效率要比 creatElement 高

3.事件高级

方法事件监听addEventListener()

同一个元素同一个事件可以注册多个监听器（事件处理程序）

// 参数1：事件类型，它是字符串 必定加引号 而且不带on
// 参数2：事件处理程序
btns[1].addEventListener('click', function() {
	alert(22);
})
btns[1].addEventListener('click', function() {
	alert(33);
})

attachEvent()事件监听

语法：

 eventTarget.attachEvent(eventNameWithOn, callback) 
 比如： btns[2].attachEvent('onclick', function() {
        alert(11);
    }) //  attachEvent ie9以前的版本支持  这里的事件需要带on

删除事件（解绑事件）

1. eventTarget.removeEventListener(type, listener[, useCapture]);
 //针对addEventListener()
2. eventTarget.detachEvent(eventNameWithOn, callback);
//针对attachEvent()

DOM 事件流

捕获阶段
当前目标阶段
冒泡阶段

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

注意：

JS 代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。（理解：只在冒泡阶段触发）
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件对象

  eventTarget.onclick = function(event) {
     // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
  } 
  eventTarget.addEventListener('click', function(event) {
    // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
  }）

事件对象的属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble=true	该属性阻止冒泡排序非标准 ie6-8使用
e.returnValue=false	阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡排序

e.target 和 this 的区别

this 是事件绑定的元素（绑定这个事件处理函数的元素）。
e.target 是事件触发的元素（比如click事件中点击的对象）。

阻止默认行为

e.preventDefault(); //标准写法一般用这个
e.returnValue = false; // 低版本浏览器 ie678
return false; //return后面的不执行

    <a href="http://www.baidu.com">百度</a>
    <script>
        // 2. 阻止默认行为 让链接不跳转 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); //  dom 标准写法
        });
        // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue = false;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
        }
    </script>

阻止事件冒泡

e.stopPropagation() //标准写法
e.cancelBubble = true; //非标准写法

 var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); 
            window.event.cancelBubble = true; 
        }, false);

阻止事件冒泡的兼容性处理

  if(e && e.stopPropagation){
      e.stopPropagation();
  }else{
      window.event.cancelBubble = true;
  }

事件委托

事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

禁止鼠标右键菜单

contextmenu事件：鼠标右键菜单事件。主要控制应该何时显示上下文菜单（右键菜单），主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
})

禁止鼠标选中

selectstart 事件：鼠标选中事件，用于界面文字防止选中

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于整个文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于整个文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	被按下时触发
onkeypress	被按下时触发但不识别功能键比如ctrl shift 箭头等
onkeyCode	返回该键的ASCII值

如果使用addEventListener 不需要加 on

三个事件的执行顺序是： keydown – keypress — keyup （按下–按住–抬起）

keyCode判断用户按下哪个键

    <script>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        document.addEventListener('keyup', function(e) {
            console.log(e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }
        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log(e.keyCode);
        })
    </script>

onkeydown 和 onkeyup 不区分字母大小写，通过keyCode属性获取到的a 和 A 得到的都是65
onkeypress 区分字母大小写，通过keyCode属性获取到的 a 是 97 和 A 得到的是65
但是在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

4.BOM、JS执行机制、元素偏移量 offset

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

页面（窗口）加载事件

第一种——语法：

window.onload = function(){}
或者 
window.addEventListener("load",function(){});

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

第二种——语法：

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

调整窗口大小事件

语法：

 window.onresize = function(){}

 window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

window.innerWidth 当前屏幕的宽度

定时器

setTimeout()

 window.setTimeout(回调函数, [延迟的毫秒数]);

window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取**字符串‘函数名()’**三种形式。第三种不推荐
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

清除定时器：

 window.clearTimeout(定时器名字)

setInterval() 闹钟定时器

 window.setInterval(回调函数, [间隔的毫秒数]);

和setTimeout用法类似

清除定时器：

 window.clearInterval(intervalID);

this指向问题

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this也指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例（通过构造函数new出来的对象）

location对象

获取或设置窗体的 URL，并且可以用于解析 URL

URL 的一般语法格式为：

 protocol://host[:port]/path/[?query]#fragment

 http://www.itcast.cn/index.html?name=andy&age=18#link

location 对象的属性

location 对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

location对象的常见方法

location对象方法	返回值
location.assign()	和href一样，可以跳转页面
location.replace()	替换当前页面，因为不记录历史，所以不能后退
location.reload()	重新加载页面，相当于刷新按钮或者F5 如果参数为true 强制刷新

navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值

下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

history对象

与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能参数是1则前进1个页面参数是-1 后退1个页面

JS执行机制

同步：先做一件事情，然后再做另一件事情。他是单线程，一个人依次做多件事情

异步：是两件事情同时去做，他是多线程，多个人同时做多个事情

元素偏移量 offset

offset属性	作用
element.offsetParent	返回该元素带有定位的父元素如果父级都没有定位则返回body
element.offsetTop	返回该元素相对带有定位父元素上方的偏移量
element.offsetLeft	返回该元素相对带有定位父元素左边的偏移量
element.offsetWidth	返回自身padding、边框、内容区的宽度
element.offsetHeight	返回自身padding、边框、内容区的高度

注意：返回的数值都不带单位

offset 与 style 区别

offset：想要获取元素大小位置，用offset更合适

style：想要给元素更改值，则需要用style改变

获取鼠标在盒子内的坐标

我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

5.元素可视区 client 、元素滚动 scroll、动画函数封装

client

通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

立即执行函数

(function(){})()
(function(){}())

创建一个独立的作用域，避免了命名冲突问题

pageshow

这个事件在页面显示时触发，无论页面是否来自缓存。
在重新加载页面中，pageshow会在load事件触发后触发；
根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件
persisted：判断页面是否来自缓存，如果是返回true，如果不是返回false
注意这个事件给window添加。

元素滚动 scroll

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离
element.scrollLeft	返回被卷去的左侧距离
element.scrollWidth	返回自身实际的宽度，不含边框
element.scrollHeight	返回自身实际的高度，不含边框

返回数值均不带单位

当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。
滚动条在滚动时会触发 onscroll事件

页面被卷去的头部

可以通过window.pageYOffset 获得如果是被卷去的左侧window.pageXOffset

注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset

页面被卷去的头部兼容性解决方案

需要注意的是，获取页面被卷去的头部高度，有兼容性问题，因此通常有如下几种写法：

声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
//使用的时候  getScroll().left

mouseenter 和mouseover的区别

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发，因为mouseenter不会冒泡。

跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

简单动画函数封装

function animate(obj目标对象, target目标位置){…}

给不同元素记录不同定时器

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

 function animate(obj, target) {
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

动画函数多个目标值之间移动

<script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function () {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function () {
            // 调用函数
            animate(span, 800);
        })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>

动画完整版代码

 <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target, callback) {
            // console.log(callback);  callback = function() {}  调用的时候 callback()

            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    if (callback) {
                        // 调用函数
                        callback();
                    }
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function () {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function () {
            // 调用函数
            animate(span, 800, function () {
                // alert('你好吗');
                span.style.backgroundColor = 'red';
            });
        })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>

节流阀

当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发，利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量var flag= true;
If(flag){flag = false; do something} 关闭水龙头
利用回调函数动画执行完毕， flag = true 打开水龙头

返回顶部

页面滚动了多少，可以通过 window.pageYOffset 得到
最后是页面滚动，使用 window.scroll(x,y) 不带单位直接写数字

6.移动端和插件的使用、本地存储

常见的触屏事件

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无的变化

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

移动端拖动元素

 <script>
        // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
        // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
        // （3） 离开手指 touchend:
        var div = document.querySelector('div');
        var startX = 0; //获取手指初始坐标
        var startY = 0;
        var x = 0; //获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //  获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止屏幕滚动的默认行为
            //如果不阻止，当粉色盒子滚出界面之后会出现滚动条
        });
    </script>

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

transitionend

监听过渡完成的事件对象

语法： element.addEventListener(‘transitionend’,函数);

classList 属性

返回元素的类名。但是ie10以上版本支持

添加类：

element.classList.add（’类名’）；

focus.classList.add('current');

移除类：

element.classList.remove（’类名’）;

focus.classList.remove('current');
例：ol.querySelector('.sty').classList.remove('sty');

切换类：

element.classList.toggle（’类名’）; 有这个类名则移除，没有则添加

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案：

1. 禁用缩放：浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。

  <meta name="viewport" content="user-scalable=no">

2.利用touch事件自己封装这个事件解决300ms 延迟。

原理就是：

当我们手指触摸屏幕，记录当前触摸时间

当我们手指离开屏幕，用离开的时间减去触摸的时间

如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

代码如下:

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//调用  
  tap(div, function(){   // 执行代码  });

3.使用插件：fastclick 插件解决300ms 延迟

Swiper 插件

中文官网地址： https://www.swiper.com.cn/

其他移动端常见插件

lsuperslide： http://www.superslide2.com/

l iscroll： https://github.com/cubiq/iscroll

1.打开demo实例文件，查看需要引入的相关文件，并且引入

2.复制demo实例文件中的结构html，样式css以及js代码

移动端视频插件

zy.media.js

Bootstrap

Bootstrap JS插件使用步骤：

1.引入相关js 文件

2.复制HTML 结构

3.修改对应样式

4.修改相应JS 参数

本地存储

1、容量较大，sessionStorage约5M、localStorage约20M

2、只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage （session：会话）

1、生命周期为关闭浏览器窗口

2、在同一个窗口(页面)下数据可以共享

3、以键值对的形式存储使用

存储数据：

sessionStorage.setItem('key', 存的内容)

获取数据：

sessionStorage.getItem('key')

删除数据：

sessionStorage.removeItem('key')

清空数据：(所有都清除掉)

sessionStorage.clear()

window.localStorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在

2、可以多窗口（页面）共享（同一浏览器可以共享）

3、以键值对的形式存储使用

存储数据：

localStorage.setItem('key', value)

获取数据：

localStorage.getItem('key')

删除数据：

localStorage.removeItem('key')

清空数据：(所有都清除掉)

localStorage.clear()

change事件

当选框发生改变的时候可以使用change事件

六.jQuery

1.选择器、样式操作、效果

jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

jQuery 的下载**

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

各个版本的下载：https://code.jquery.com/

jQuery的入口函数

jQuery中常见的两种入口函数：

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

相当于原生 js 中的 DOMContentLoaded

jQuery 对象和 DOM 对象转换

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

总结：实际开发比较常用的是把DOM对象转换为jQuery对象

jQuery 选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 和CSS选择器写法一致

筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取li元素中索引号为2的元素，index从0开始
:odd	$(‘li:odd’)	获取li元素中索引号为奇数的元素
:even	$(‘li:even’)	获取li元素中索引号为偶数的元素

筛选方法

语法	用法	说明
parent()	$(‘li’).parent();	查找父级
children(‘选择器’)	$(“ul”).children(“li”);	查找最近一级的亲儿子相当于$(“ul>li”)
find(‘选择器’)	$(“ul”).find(“li”);	相当于$(“ul li”) 和后代选择器一样
siblings(‘选择器’)	$(".first").siblings(“li”);	查找兄弟节点，不包括自身
nextAll([expr])	$(".first").nextAll();	查找当前元素之后所有的兄弟元素
prevAll([expr])	$(".first").prevAll();	查找当前元素之前所有的兄弟元素
hasClass(class)	$(“div”).hasClass("protected"0;	检查当前的元素是否含有某个特定的类，如果有返回true
eq(index)	$(“li”).eq(2);	相当于$(‘li:eq(2)’)，index是从0开始的

jQuery样式操作

排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings().css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作


// 以前的js是不允许对于一组对象之间操作的，只能对一个元素对象进行操作
var divs = document.getElementsByTagName('div');
divs.style.backgroundColor = 'red'; // 错误
divs[0].style.backgroundColor = 'red'; // 正确

链式编程

// 链式编程是为了节省代码量，看起来更优雅。
//原代码
$(this).css('color', 'red');
$(this).sibling().css('color', ''); 
//链式编程的代码
$(this).css('color', 'red').sibling().css('color', ''); 

//jq的操作方法： css(),hide(),show()等等，会将调用者返回
//jq的筛选方法，会将筛选完的对象返回。 非筛选方法（操作方法），会将调用者（jq对象）返回

jQuery 得到当前元素索引号

$(this).index();

jQuery弹窗(类似alert)

var isC = confirm('您确定要退出吗') //点击后返回布尔值

jQuery操作 css 方法

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color'', 'red');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

jQuery设置类样式

// 1.添加类
$("div").addClass("current");  // className，classList

// 2.删除类
$("div").removeClass("current");

// 3.切换类  没有就添上  有就移除
$("div").toggleClass("current");

原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名

jQuery 效果

显示、隐藏、二者切换

显示

语法： show( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示，默认normal，还有slow、fast，要带引号，也可直接设置毫秒数（不带单位）