js三大件基础知识总结

复习整理

html

1.html5有什么新特性？

新增语义化标签<header></header>、<nav></nav>等
复制代码

​ 新增用于绘画的 元素

​ 用于媒介回放的video和audio元素

​ 本地缓存有更好支持（localStorage和sessionStorage）

2.html是什么，html文档是什么？

html是用来描述网页的一种超文本标记语言，html文档也被成为网页，它包含html标签和纯文本

3.是什么？

它不是html标签，它为浏览器提供一种信息声明，告诉浏览器html是用什么版本编写的，用来表示html的版本

4.html文档的类型

有html、html+、html2.0、html、3.二、html4.0一、xhtml 1.0、html5等

---

css

1.简述flex布局

flex布局：弹性布局，设置间距相同的布局、单行单列布局的时候至关好用 display能够设置为flex、inline-flex。

设置display：flex的时候，子元素的float、clear、vertical-align属性都将所有失效。

容器属性：

flex-direction设置主轴的排列方向，有 row（竖直向下排列）、row-reverse（竖直向上排列）、column（垂直向右排列）、column-reverse（垂直向左排列）

flex-wrap 设置是否排列在一条线上，有nowrap、wrap和warp-reverse三个选项

flex-flow是flex-direction和flex-wrap的简写

justify-content定义项目在主轴上的对齐方式有 flex-start | flex-end | center | space-between | space-around

align-items定义交叉轴的对齐方式 flex-start | flex-end | center | baseline | stretch

align-content定义多跟轴线的对齐方式

项目属性：

align-self（改项目的对齐方式）

order （项目排列顺序）

flex-grow（项目放大比例）

flex-shrink（项目缩小比例）

flex-basis（在分配多余空间时，项目占据的主轴空间）

flex（flex-grow，flex-shrink，flex-basis的缩写）

2. 简述grid布局

​ 网格布局

3. 几种实现水平垂直居中的方法

• 使用display：flex，justify-content：center，align-item： center实现

• 肯定高宽状况下 .test { position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; }，或者 .test { position: absolute; margin:auto; left:50%; top:50%; margin-top： -height/50； margin-left： -width/50； }，

• 不肯定高宽 .test { position: absolute; margin:auto; left:50%; top:50%; transform： translate（-50%，-50%） }，

4. 常见块级元素和内联元素

块级元素： div、form、table、p、h1-h六、dl、li、ul、ol等 内联元素： a、strong、br、img、i、span、label、input、textarea、select等

5. position定位有哪些

​ absolute（绝对定位，相对于值不为static的第一个父元素进行定位） relative（相对定位，相对于其正常位置进行定位） fixed（相对于浏览器窗口进行定位） static（默认值，没有定位，元素出如今正常的流中） inherit（继承父元素position属性的值） sticky（relative和fixed的结合体，当元素在屏幕内饰relative，滚出屏幕时显示为fixed）

6. css3的新属性

1. transfrom（对元素进行旋转、缩放、移动或倾斜）、animation（动画效果）和transition（添加过渡效		     果）
2. 三个边框效果： border-radius（建立圆角边框）、border-shadow（阴影）、border-image（使用图片绘制边框）
3. 文字效果新增word-wrap、text-overflow和text-shadow，以上等等
复制代码

7.block、inline和inline-block的区别

• display：block

  1. block元素又叫作块级元素，它独占一行，多个block元素各占一行。默认状况下block元素 宽度自动填满父元素宽度
  2. 能够设置weight和width属性，块级元素设置了width仍是独占一行
  3. 能够设置padding和margin属性

• display：inline 1.inline元素又叫内联元素，不会占一行，多个内联元素会排列在一行，一行排列不下去才会 行，，宽度随元素的内容变化 2.设置width和weight属性无效 3.inline元素的margin和padding属性，水平方向上都能产生边距效果，竖直方向上不会产生 效果

• display： inline-block

  1. 内联块级元素拥有inline元素的多个占据同行特性和block元素的设置高度宽度特性和设置 padding和margin特性

8. display：none和visiblity：hidden的区别

​ 为none的时候不占空间，为hidden的时候隐藏元素依然占据空间

​ 为none的会产生回流和重绘，visiblity：hidden的时候只产生重绘

​ visiblity：hidden的子孙元素设置visiblity：hidden时会失效

9. 什么是BFC， BFC用来解决什么问题

格式化上下文：特色是内部的子元素不会影响外部的元素，能够用来解决margin穿透和清除浮动

一个块格式化上下文由如下之一建立：

1)根元素或其它包含它的元素
2)浮动元素 (元素的 float 不是 none)
3)绝对定位元素 (元素具备 position 为 absolute 或 fixed)
4)内联块 (元素具备 display: inline-block)
5)表格单元格 (元素具备 display: table-cell，HTML表格单元格默认属性)
6)表格标题 (元素具备 display: table-caption, HTML表格标题默认属性)
7)具备overflow 且值不是 visible 的块元素，
8)display: flow-root
9)column-span: all 应当老是会建立一个新的格式化上下文，即使具备 column-span: all 的元素并不被包裹在一个多列容器中。
复制代码

10.盒子模型有哪些，如何设置

iE盒子模型： 内容（content+padding+border）+边界margin 高宽包含padding和border

标准盒子模型： content+padding+border+边界margin 高宽指的是content

经过box-sizing：content-box设置标准盒子模型，box-sizing：border-box设置ie盒子模型

11.css选择器有哪些

选择器有id选择器、元素选择器、属性选择器、类选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类和伪元素。

12.清除浮动的四种方式

• 在浮动的元素样式中加入clear：both
• 在浮动元素下面插入清除浮动的块级元素
• 给浮动元素设置伪类，伪类样式设置display为block，clear：both
• 设置BFC（格式化上下文），如浮动父元素设置overflow：auto

13.如何用css实现一个三角形

​ 定义一个div元素，让它的内容高宽为0，经过border来实现

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border: transparent transparent red;
}
复制代码

以上css样式经过设置底部border边为红色，其余边为透明色，实现了一个底部宽40，高20的红色的三角形

---

js

###1. addEventListener的第三个参数的做用

指定事件是否在捕获或者冒泡阶段执行，true为在捕获阶段执行，false默认，在冒泡阶段执行

2.什么是事件冒泡，什么是事件捕获

事件冒泡指事件从发生的目标开始，沿着文档逐层向上冒泡，到documnent为止，事件捕获则相反，从documnet开始，沿着文档向下，直到目标事件为止，

3.如何阻止事件冒泡和事件捕获

ie下设置e.cancelBubble = true，在符合w3c的浏览器设置e.stopProgation()阻止事件冒泡，也能够经过preventDefault阻止默认行为，由于事件处理的默认行为就是冒泡或者经过return false

使用stopImmediatePropagation() 阻止事件捕获，须要注意的是stopImmediatePropagation() 也能阻止事件冒泡，调用后，不只父类元素冒泡被阻止，同时该元素绑定的同类事件也会执行

4.typeof返回的数据类型

string、number、boolean、undefined、object、function

5.列举三种强制类型转换和2种隐式类型转换

强制（parseInt、parseFloat、number）

隐式（== ===）

6.split（） join（）区别

前者将字符串切割成数组形式，后者将数组转为字符串

7. ajax请求get和post方法的区别

1. get主要是获取资源，post请求服务器端资源
2. get传输数据经过url，post经过http的post机制，将要传输的数据放在请求实体中发送给服务器
3. get传输数据量小，post传输数据量大
4. get不安全，post安全性较高
5. get只能支持ASCII字符传输，传递中午字符会乱打；post支持标准字符集，能够传递中文字符

8.call、apply和bind的区别

call和apply均可以改变this的指向，区别在于传入apply的第二个参数是一个数组，call后面是对象

bind后面的参数也是对象，可是bind不会当即执行

9.ajax请求时，如何解析json数据

使用JSON.parse()把json数据转化为js对象，使用JSON.Stringify()把js对象转化为json对象

10.闭包是什么，有什么特性

闭包就是可以读取函数内部变量的函数，使得函数不被GC回收，若是过多使用，就会形成内存泄露

11.添加 删除 替换 插入到某个节点的方法

1. 建立新节点

   createElement（） // 建立一个具体元素

   createTextNode（） // 建立一个文本节点

2. 添加、移除、替换、插入

   appendChild（） // 添加

   removeChild（） // 移除

   replaceChild（） // 替换

   insertBefore（） // 插入

12.document onload和doucment ready的区别

onload是在结构和样式、外部js及图片加载好后执行js，ready是在dom树建立完成后就执行，是jquery里面的方法

13.函数声明和函数表达式的区别

函数声明在js解析时就会进行函数提高，所以在同一做用域中，无论函数声明在哪定义，该函数均可以调用，函数表达式只有在执行到那一块后，才能够调用

14. null和undefined的区别

​ null表示‘空’的对象，转化为数值是0，undefined是一个表示无的原始值，转化为数值是NAN，

​ 变量为声明，默认是undefined，null表示尚不存在的对象

​ undefined表示为未初始化的变量返回的值，null表示一个尚不存在的对象返回的值，undefined能够看作空的变量，null看作空的对象

15. new操做符干了什么

1. 建立了一个空对象。

2. 把所建立的空对象的_ proto _指向构造函数的prototype

3. 执行构造函数中的代码，构造函数中的this指向对象

4. 返回该对象（除非构造函数中返回一个对象或者函数）

16.实现深度克隆

JSON.parse(JSON.stringify());

17.什么是同源策略

它是浏览器的一种约定，脚本只容许访问同一站点的资源，协议相同，域名相同，端口号相同，就是同一站点

在浏览器中，