1.html部分
1.1浏览器内核
IE:trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用GoogleChrome的Blink内核
Chrome:Blink(基于webkit，Google与OperaSoftware共同开发)
1.2行内元素、块元素、行内块元素都有哪些？区别是什么
三者可以相互转化
display:inline 装换为行内元素
display:block 转换为块元素
display:inline-block 转换为行内块元素
| 代表标签 | 特征 | |
|---|---|---|
| 行内元素 | span,strong, em, label, select, textarea | (1)设置宽高无效(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间(3)不会自动进行换行 |
| 块状元素 | div，其他如p、nav、aside、header、footer、section、article、ul-li、address | (1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)可以自动换行(4)多个块状元素标签写在一起，默认排列方式为从上至下 |
| 行内块状元素 | img、input | (1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右 |
1.3 image标签上title属性与alt属性的区别是什么？
title属性为设置该属性的元素提供建议性的信息(悬停显示)，
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的(图片读取不到提示)
1.4说出5个HTML新增标签，说明语义与应用场景
- section:定义文档中的一个章节
- nav:定义包含导航链接的章节
- header:定义页面或者章节头部。包含logo、页面标题、导航性目录
- footer :定义页面或者章节尾部。 包含版权信息、法律信息链接、反馈建议地址
- aside:定义一些和页面关联度较低的内容，即使删除，剩余的内容依然合理
1.5 H5新特性、移出哪些元素
- HTML5 主要是关于图像，位置，存储，多任务等功能的增加。
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签（header,nav,footer,aside,article,section）
- 音频、视频API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在页面会话结束时会被清除
- 表单控件，calendar、date、time、email、url、search
- 移除的元素：
- 纯表现的元素：basefont，big、u等；
- 对可用性产生负面影响的元素：frame，frameset等
1.6 iframe的优缺点
优点：
- 解决加载缓慢的第三方内容如图标和广告等的加载问题
- iframe无刷新文件上传
- iframe跨域通信
缺点：
- frame会阻塞主页面的Onload事件
- 无法被一些搜索引擎索引到
- 页面会增加服务器的http请求
- 会产生很多页面，不容易管理。
1.7 居中问题
文字水平居中:text-align:center;
标签盒子水平居中：margin:0 auto;
2. css部分
2.1 对css布局的理解
固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding
2.2 列举清除浮动的方法
-
额外标签法
<style> .fahter{ width: 400px; border: 1px solid deeppink; } .big{ width: 200px; height: 200px; background: darkorange; float: left; } .small{ width: 120px; height: 120px; background: darkmagenta; float: left; } .footer{ width: 900px; height: 100px; background: darkslateblue; } .clear{ clear:both; } </style> <body> <div class="fahter"> <div class="big">big</div> <div class="small">small</div> <div class="clear">额外标签法</div> </div> <div class="footer"></div> </body> -
父级添加overflow属性（父元素添加overflow:hidden）
.fahter{ width: 400px; border: 1px solid deeppink; overflow: hidden; } -
使用after伪元素清除浮动（推荐使用）
.clearfix:after{ /*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/ } <body> <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> <!--<div class="clear">额外标签法</div>--> </div> <div class="footer"></div> </body> -
使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; } <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div> </div> <div class="footer"></div>
2.3隐藏元素方法
- visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
- opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
- position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外。
- display: none；元素会变得不可见，并且不会再占用文档的空间。
2.4 css什么属性可以继承？
1、字体系列属性
- font-family：字体系列
- font-weight：字体的粗细
- font-size：字体的大小
- font-style：字体的风格
2、文本系列属性
- text-indent：文本缩进
- text-align： 文本水平对齐
- line-height： 行高
- word-spacing：单词之间的间距
- letter-spacing：中文或者字母之间的间距
- text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
- color：文本颜色
2.5请简述CSS的选择器？
- 元素选择器：* 、标签选择器、id选择器、类选择器
- 关系选择器：子集选择器和后代选择器
- 属性选择器：E[att]、E[att=“val”]等等
- 伪类选择器：E:link、E:visited、E:hover、E:active E:first-child、E:last-child等
- 伪对象选择器：E:before和E:after等
2.6 css选择器的优先级是？
!important>行内>id>类>标签选择器
10000>1000>100>10>1
2.7 请简述CSS的权重规则？
一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选择器+1。
2.8 CSS中 link 和@import 的区别是什么？
两者都是外部引用 CSS 的方式，但是存在一定的区别：
- link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
- link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM改变样式；而@import不支持。
2.9 定位有几种？有什么区别？
相对定位：position:relative;它是参照它在页面中原来的位置进行移动的。
绝对定位：position:absolute;它是相对于距离它最近的有定位的父元素进行移动的
固定定位：position:fixed;它是相对于页面的位置进行移动的
注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。
2.10 如何让一个盒子水平垂直居中
-
已知宽高
<div class="div1"></div> <style> .div1{ width:400px; height:400px; position:absolute; left:50%; top:50% margin:-200px 0 0 -200px; } </style> -
未知宽高一
<style> .div1{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; border: 1px solid #000; width: 400px; height: 400px; } </style> <body> <div class="div1"></div> </body> -
未知宽高二
.div1{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid #000; width: 400px; height: 400px; } </style> <body> <div class="div1"></div> </body> -
未知宽高三
.div{ display: flex; justify-content: center; /* 水平方向 居中*/ align-items: center; /* 垂直方向 居中*/ }
2.11请描述一下cookies，sessionStorage和localStorage的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
2.12 两个div左右铺满，左边的div一直为100px，右边的div跟随浏览器大小变化
方法一: 左边盒子浮动，右边盒子设置margin-left:100px
方法二:设置弹性盒子，左边固定大小，右边设置 flex:1
2.13 如何解决跨域问题？
JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面
- jsonp
- cors
- 通过修改document.domain来跨子域
- 使用window.name来进行跨域
2.14 前端如何优化网站性能？
1、减少 HTTP 请求数量
可以通过精灵图、合并css和js文件、懒加载等方式来减少http请求。
CSS Sprites
国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并 CSS 和 JS 文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
2、控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
一般情况下都是CSS在头部，JS在底部。
3、利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
4、减少 DOM 操作（vue这种减少操作DOM）
5、图标使用 IconFont 替换image标签
2.15 说一下你对css盒子模型的理解？
图中最内部的框是元素的实际内容，也就是元素框， 紧挨着元素框外部的是内边距padding， 其次是边框（border）， 然后最外层是外边距（margin），整个构成了框模型。
通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。 而外边距margin是透明的，不会遮挡周边的其他元素。
那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
box-sizing:border-box;和box-sizing:content-box;的区别
content-box:
- margin:不影响盒子
- padding:使盒子变大
- border:使盒子变大
border-box:
- margin:不影响盒子
- padding:不影响盒子
- border:不影响盒子
2.16 解释下 CSS sprites原理，优缺点
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
优点：
- 减少网页的http请求
缺点：
- 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
- CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
- 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
2.17 css盒子的margin中的合并和塌陷问题如何解决
外边距塌陷:
当嵌套的两个块元素,给子盒子加向上的外边距时,
父盒子会跟着掉下来,此时就是外边距塌陷.
解决方案:
1.给父盒子加padding
2.给父盒子加上边框
3.给父元素加overflow:hidden 属性
嵌套盒子垂直外边距合并方案:
给父亲上边框
border: 1px solid transparent
给父亲内边距
padding-top: 1px;
给父元素 添加 overflow: hidden
子元素 添加 position:absolute/relative 或 float
2.18 用css绘制一个实心三角
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、
right四个方向的三角*/
}
2.19 css3新增属性
border-radius 圆角
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景显示原点
text-shadow 文字阴影
boX-shadow 盒子阴影
text-overflow 文字隐藏的方式 裁剪/省略号
box-sizing
transform 变换 转换
animation 动画
transition 过渡动画
媒体查询 @media
2.20 px，em，rem的区别
px像素（Pixel）。
相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
PX特点
IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem。
em是相对长度单位。
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，
需要在css中的body选择器中声明Font-size=62.5%，
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
em特点
em的值并不是固定的；
em会继承父级元素的字体大小。 所以我们在写CSS的时候，需要注意两点：
body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。
避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。
比如说你在#content中声明了字体大小为1.2em，
那么在声明p的字体大小时就只能是1em，
而不是1.2em, 因为此em非彼em， 它因继承#content的字体高而变为了1em=12px。
rem特点
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，
通过它既可以做到只修改根元素就成比例地调整所有字体大小，
又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小。
2.21 display：inline-block什么时候会出现间隙？及解决办法
<style>
*{margin:0;padding:0;}
.box{
overflow-x:auto;
background:#fff;
white-space:nowrap;
}
.box span{
display:inline-block;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background:#f00;
color:#fff;
}
</style>
<body>
<div class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</div>
</body>
解决办法
方法一： 元素之间不换行，代码如下：
111 111 111 111
方法二： 给其父元素设置font-size:0;给其自身设置实际需要的字号大小。
方法三： 负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。
2.22 css3伸缩盒子
设置主属性
display: flex;
主轴对齐
justify-content
flex-start弹性盒子元素向行起始位置对齐flex-end弹性盒子元素向行结束位置对齐center弹性盒子元素向行中间位置对齐space-between左右对其父容器的开始和结束，中间平均分页，产生相同的间距space-around将多余的空间平均的分页在每一个子元素的两边
侧轴对齐
单
align-items
多
align-content
- stretch ;(默认值 当子项目没有设置高度时 高度自动延申充满)
- flex-start ;(垂直方向 顶部位置)
- flex-end ;(垂直方向 尾部位置)
- center ;(垂直方向 居中位置)
- baseline ;(垂直方向 基线对齐)
换行
flex-wrap
- nowrap ;（默认值 不换行）
- wrap ;（换行）
- wrap-reverse ;（倒序换行）
设置主轴的方向
flex-direction
- row(默认值 横向 从左至右))
- row-reverse(横向 从右至左)
- column(竖向 从上至下)
- column-reverse(竖向 从下至上)
2.23 css3新增伪类
-
p:first-of-type 选择属于其父元素的首个元素的每个元素。
-
p:last-of-type 选择属于其父元素的最后元素的每个元素。
-
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
-
p:only-child 选择属于其父元素的唯一子元素的每个元素。
-
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
-
:disabled 控制表单控件的禁用状态。
-
:checked，单选框或复选框被选中。
-
:before在元素之前添加内容，也可以用来做清除浮动
-
:after在元素之后添加内容
2.24如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）
1.居中浮动定位
.box{
float:left;
position:relative;
left:50%;
}
p{
float:left;
position:relative;
right:50%;
}
<div class="box">
<p>我是浮动的</p>
<p>我也是居中的</p>
</div>
2.居中div盒子
.box{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #faf;
}
<div class="box"></div>
3.居中绝对定位的div
详见2.10
2.24移动端布局
- 绝对定位
- 绝对定位+负边距
- 绝对定位+平移
- 网格grid实现
- 弹性盒子
- 表格布局
2.25localStorage和sessionStorage的区别
- localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
- 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
- localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
- sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
- 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面间无法共享sessionStorage的信息。
2.26兼容性问题
不同页面的margin和padding都是不一样的
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
| a:link | 超链接的默认样式 |
| a:visited | 已经访问过的链接的样式 |
| a:hover | 处于鼠标悬停状态的链接的样式 |
| a:active | 被激活（鼠标左键按下的一瞬间）的链接的样式 |
2.27BFC模式规范(块级格式化上下文：block formatting context)
BFC规则简介
浮动浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC
触发条件
满足以下条件
- 根元素()
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-headergroup、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）
- overflow 值不为 visible 的块元素 -弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
渲染规则
- BFC垂直方向边距重叠
- BFC的区域不会与浮动元素的box重叠
- BFC是一个独立的容器，外面的元素不会影响里面的元素
- 计算BFC高度的时候浮动元素也会参与计算
BFC应用场景
避免外边距折叠
防止浮动导致父元素高度塌陷
js部分
3.1.JavaScript 的typeof返回哪些数据类型?
“在javascript中,typeof操作符可返回的数据类型有:“undefined”、“object”、“boolean”、“number”、“string”、“symbol”、“function”等。”
3.2.例举至少3种强制类型转换和2种隐式类型转换?
强制
（1）使用Number()函数将参数转换为一个数字
（2）使用parseInt()函数将参数转换为一个整数
（3）使用parseFloat()函数将参数转换为一个浮点数
隐式
（1）表达式中同时存在字符串类型和数字类型的操作数，而运算符使用加号+，此时 JavaScript 会自动将数字转换成字符串。
（2）表达式运算符为-``、*、/、%中的任意一个，此时 JavaScript 会自动将字符串转换成数字，对无法转换为数字的则转换为 NaN。
（3）运算符为++或--时，JavaScript 会自动将字符串转换成数字，对无法转换为数字的则转换为 NaN。
3.3.JavaScript的事件流模型都有什么?
事件冒泡：由最具体的元素开始接收事件，并往上传播
事件捕获：由最不具体的元素接收，并往下传播
事件委派
阻止默认事件
3.4.BOM对象有哪些，列举window对象?
window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
document对象，文档对象；
location对象，浏览器当前URL信息；
navigator对象，浏览器本身信息；
screen对象，客户端屏幕信息；
history对象，浏览器访问历史信息；
3.5.请简述AJAX及基本步骤?
简述 AJAX：
AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
基本步骤
创建Ajax对象
var oAjax=null;
if(window.XMLHttpRequest)
{undefined
oAjax=new XMLHttpRequest();
}
else
{undefined
oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
连接服务器，准备数据
oAjax.open('GET', url, true); //oAjax.open(“方式”,”地址”,是否为异步);
发送请求
oAjax.send();
接收服务器的返回
oAjax.onreadystatechange = function () {
undefined
if (oAjax.readyState == 4) {//完成
undefined
if (oAjax.status == 200) //成功
{
undefined
fnSucc(oAjax.responseText);
}
else {
undefined
if (fnFaild)
fnFaild(oAjax.status);
}
}
};
3.6.HTTP状态消息200 302304 403 404 500分别表示什么?
200 - 请求成功
302 - 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304 - 资源（网页等）被永久转移到其它URL
403 - 服务器理解请求客户端的请求，但是拒绝执行此请求
404 - 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
500 - 内部服务器错误
3.7.GET和POST的区别，何时使用POST?
get是从服务器上要数据，post是给服务器数据，然后get是将参数放到URL中的，post是将内容放到http请求的，所以get安全性较低，post安全性高。get方法服务器用的是Request.QueryString获取变量，post用的是Request.Form获取数据的。get传送的数据量较小，不能大于2kb。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80kb，IIS5中为100kb。
仅用于POST请求 在以下情况只能用POST请求（1.无法使用缓存文件；2.向服务器发送大量数据；3.发送包含未知字符的用户输入时，post比get更稳定也更可靠）
建议使用get方法的情况：1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
3.8.js字符串操作函数?
1）字符串转换
toString()
String()
+拼接
2）字符串分割
split() split()的第二个参数，表示返回的字符串数组的最大长度
3）字符串替换
replace() 默认只进行第一次匹配操作的替换，想要全局替换，需要置上正则全局标识g
4) 获取字符串长度
直接 .length
5) 查询子字符串
indexOf()，该Of() 方法对大小写敏感。返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。
lastIndexOf()，该方法对大小写敏感。返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1 。
6）返回指定位置的字符或其字符编码值
charAt() 查找指定位置的字符
7) 字符串匹配
match() 可以直接通过字符串进行匹配，也可以通过正则进行匹配，
8）字符串连接
concat() str1.concat(str2)
9）字符串切割和提取
第一种，slice()函数： 可以为负数，如果起始位置为负数，则从字符串最后一位向前找对应位数并且向后取结束位置，如果为正整数则从前往后取起始位置到结束位置。
10）字符串大小写转换
toLowerCase() toUpperCase()
11）字符串去空格
str…trim()
3.9、数组中的常用方法
1. push
作用：像数组的末尾添加一项或多项元素
参数：要添加的项
返回值：新数组的长度
是否改变原数组：改变
2. pop
作用：删除数组的最后一项
参数：无
返回值：被删除的项
是否改变原数组：改变
3. shift
作用：删除数组的首项
参数：无
返回值：被删除的项
是否改变原数组：改变
4. unshift
作用：向数组的开头添加一或多项
参数：要添加的项，多项用’,'隔开
返回值：新数组的长度
是否改变原数组：改变
5.splice
作用：增删改
参数：ary.splice(index,howmany,item1,…,itemX)
返回值：删除的项
是否改变原数组：改变
6. slice
作用：截取数组(复制数组)
参数：array.slice(start, end)
返回值：返回一个新数组
是否改变原数组：不改变
7. join
作用：用指定的分隔符将数组每一项拼接为字符串
参数：指定的分隔符,如果省略该参数，则使用逗号作为分隔符
返回值：拼接好的字符串
是否改变原数组：不改变
8. concat
作用：用于连接两个或多个数组
参数：参数可以是具体的值，也可以是数组对象。可以是任意多个
返回值：返回连接后的新数组
是否改变原数组：不改变
9. sort
作用：对数组的元素进行排序
参数：可选(函数) 规定排序规则 默认排序顺序为按字母升序
返回值：排好序的原数组
是否改变原数组：改变
10. reverse
作用：倒序数组
参数：无
返回值：倒序后的原数组
是否改变原数组：改变
11. indexOf
作用：查找指定元素的位置
参数：array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值：返回第一次查到的索引，未找到返回-1
是否改变原数组： 不改变
12. lastIndexOf
作用：查找指定元素最后出现的位置
参数：array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值：返回查到的元素的索引，未找到返回-1
是否改变原数组：不改变
13. forEach
作用：循环遍历数组每一项
参数：函数 ary.forEach(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值：无
是否改变原数组： 不改变
3.10、怎样添加、移除、移动、复制、创建和查找节点?
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
4）复制
cloneNode() //复制节点
3.11.NAN是什么
属于number数据类型，意思是not a number ，属于数值类型
NAN与任何数都不相等，包括自己本身
3.12如何判断是否为数组
arr.isArray()
3.13js的运算符
算数运算符
-
算术运算使用的符号，用于执行两个变量或值的算术运算。
-
浮点数的精度问题
- 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
- 不要直接判断两个浮点数是否相等 !
-
符号
+加
-减
*乘
/除
%取余数(取模)
递增和递减运算符
-
如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。
-
递增运算符
-
前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
使用口诀：先自加，后返回值
-
后置递增运算符
num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单
使用口诀：先返回原值，后自加
-
-
递减运算符
比较运算符
- 比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。
逻辑运算符
-
：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值
-
逻辑与&&
- 两边都是 true才返回 true，否则返回 false
-
逻辑或 ||
- 两边都是 true才返回 true，否则返回 false
-
逻辑非 ！
-
逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false
-
短路运算（逻辑中断）
- 短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的
-
赋值运算符
-
=直接赋值
-
十=、-= 加、减一个数后在赋值
-
*=、/=、%= 乘、除、取模后在赋值
运算符优先级
-
1小括号()
-
2一元运算符++ – !
-
3算数运算符先*/%后±
-
4关系运算符= < <=
-
5相等运算符== ! === =! ==
-
6逻辑运算符先&&后│
-
7赋值运算符=
-
8逗号运算符，
3.14 js语句考点
js的语句有循环语句（for循环语句、while和do while）,条件语句有（if、switch语句等）
3.15、split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
3.16、数组方法
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
3.17、this指向
（1）在方法中，this表示该方法所属的对象
（2）若单独使用，this表示全局对象
（3）在函数中，this表示全局变量
（4）在事件中，this表示接受事件的元素
3.18闭包
让外部访问函数内部变量成为可能；
局部变量会常驻在内存中；
可以避免使用全局变量，防止全局变量污染；
会造成内存泄漏（有一块内存空间被长期占用，而不被释放）
3.19、DOM对象的常用方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
3.20.js同源策略和解决跨域
如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源
URL 结果 原因
http://store.company.com/dir2/other.html 同源 只有路径不同
http://store.company.com/dir/inner/another.html 同源 只有路径不同
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html 失败 主机不同
如何解决跨域？
1、 通过jsonp跨域
2、 跨域资源共享（CORS）
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、document.domain + iframe跨域
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
3.21已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
document.getElementById(“ID”).value
3.22设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)？
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
3.23当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：<div onclick=”test()”></div>
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(‘click’, test)
3.24已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。？
alert(stringArray.join(“”))
3.25输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26？
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
3.26下面的代码运行结果是什么？为什么？
var foo = 1;
function fn(){
console.log(foo);
var foo = 2;
console.log(foo);
}
fn()
3.27介绍js的基本数据类型
答： Undefined、Null、Boolean、Number、String
3.28js有哪些内置对象？
答：数据封装类对象：Object、Array、Boolean、Number 和 String其他对象：Function、Arguments、Math、Date、RegExp、Error
3.29 this指向
this总是指向函数的直接调用者
如果有new关键字，this指向new出来的新对象
在事件中，this指向触发这个事件的对象
特殊的是，IE中的attachEvent中的this总是指向全局对象Window
3.30 eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’)。
3.31 DOM怎样添加、移除、移动、复制、创建和查找节点
创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性
3.32 null 和undefined区别
null表示为‘无’的对象，装换为数值时为0，undefined表示‘无’的原始值，转为数值时为NaN
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
3.33 new操作符具体干了什么呢
创建了一个空对象，并且this变量引用该对象，继承了 该函数的原型
属性和方法被加入 到this引用的对象中
新创建的对象由this引用，并且最后隐式返回this
3.34 JSON理解
是一种轻量级的数据交换格式
属于JavaScript子集
数据简单，易于读写，占用宽带小
3.35 call() 和 apply() 的区别和作用？
答： apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3]);
call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3);
3.36 如何解决跨域问题
JSONP：
原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。 由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。 优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。 JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里
3.37、ES6的了解
- 新增模板字符串（为JavaScript提供了简单的字符串插值功能）
- 箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）
- for-of（用来遍历数据—例如数组中的值。）
- arguments对象可被不定参数和默认参数完美代替
- ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。
- 增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令
- class命令声明的全局变量，不属于全局对象的属性。
- 还有就是引入module模块的概念。
3.38、说说你对闭包的理解
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念闭包有三个特性：
（1）函数嵌套函数
（2）函数内部可以引用外部的参数和变量
（3）参数和变量不会被垃圾回收机制回收
3.39.js面向对象
1.简介：
js在es6中没有类的概念，es6之后才有类的概念
面向对象：类是对象的模板，对象是类的实例
2.对象的创建
对象字面量
let obj={ }
new关键字
let obj = new Obejct()
自定义构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.say = function() {
console.log(this.name + this.age);
};
}
var p1 = new Person("tom", 23);
var p2 = new Person("jim", 22);
p1.say();
new一个对象时发生了什么？
- 创建了一个空对象
- 让this指向这个对象
- 执行构造函数中的代码，给这个对象添加新的属性和方法
- 返回这个新对象
原型对象
构造函数弊端
占用内存空间，造成资源浪费
构造函数原型对象
写法： prototype
常规的数据是没有原型的，函数具有原型
函数在原型上挂东西是为了继承，
我们可以通过new继承我们挂载的东西
一般将共用的属性放在构造函数上面
将共用属性放在原型对象上面
proto
每个对象身上系统自动添加 __proto__ 属性,所以可以用prototype原型上面的方法
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {
console.log(this.name + this.age);
};
var p1 = new Person("tom", 23);
var p2 = new Person("jim", 22);
console.log(p1.__proto__ === Person.prototype); //true
constructor构造函数
对象原型(proto)和原型对象(prototype)身上都有constructor，constructor方法指向构造函数本身
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
constructor: Person,
say: function() {
console.log("会唱歌");
},
run: function() {
console.log("会跳舞");
}
};
var p1 = new Person("tom", 23);
var p2 = new Person("jim", 22);
console.log(Person.prototype.constructor);
如果我们手动修改了原型对象，给原型对象赋值的是一个对象，就必须用constructor属性指回原来的构造函数
构建函数、原型和对象实例关系
原型链
每一个对象都有一个__proto__属性，指向它的原型对象
原型链查找机制
- 当访问一个对象的属性或者方法时候，先去看这个对象自身有没有这个属性或者方法
- 如果此对象没有这个属性或者方法，就去通过
__proto__属性去查找它的原型对象上是否有这个属性 - 如果此时还没有查找到，就去查询原型对象的原型（Object的原型对象）
- 以此类推，一直找Object（如果此时还查找不到就是null）
__proro__属性为对象的成员查找机制提供一个方向，也就是一条线。- 构造函数中的this和原型对象中的this指向的都是对象的实例
继承
原型对象继承
function Father(name, age) {
this.name = name;
this.age = age
}
// 父构造函数原型上添加方法
Father.prototype.work = function () {
console.log("要陪我一起加班吗");
};
// 子继承父类的work方法
Son.prototype = new Father();//子类继承父类构造方法
// 指回son
Son.prototype.constructor = Son
function Son(name, age, address) {
Father.call(this, name, age, address);//通过call改变this指向，继承属性
this.address = address
}
// 子不影响父
Son.prototype.study = function () {
console.log('我要学习');
}
var son = new Son('tom', 23, '保定')
console.log(Father.prototype);
console.log(Son.prototype);
console.log(son);
es6中继承
class Father {
constructor(name,age){
this.name = name;
this.age = age
}
work(){
console.log('要陪我一起加班吗');
}
}
class Son extends Father{
constructor(name,age){
super();
this.name=name
this.age=age
}
say(){
console.log('不加班');
}
}
let son =new Son('tom',21)
son.work()
son.say()
console.log(son);
3.40.函数
函数定义
声明式函数
function fn() {
return xx;
}
fn();
字面量函数
var fn=function(){}
fn()
自调用函数
(function fn(i) {
console.log(i);
})(5);
函数提升
声明式函数存在函数提升，可以在函数前调用函数
函数作用域
- 函数内部的变量叫局部变量，没有var的是隐士全局变量
- 函数外部的变量是全局变量
- 默认函数外部不能获取函数内部的局部变量，函数内部能获取函数外部的全局变量
- 闭包能获取函数内部的变量
js 获取原型的方法？
- p.proto
- p.constructor.prototype
- Object.getPrototypeOf§
3.41.js内置对象
Math对象
| 属性、方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版 就近取整 注意 -3.5 结果是 -3 |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 求最大和最小值 |
| Math.random() | 获取范围在[0,1)内的随机值 |
日期对象
使用Date实例化日期
-
获取当前时间
var now = new Date(); -
获取特定时间
var data= new Date('2019/5/1');
方法与属性
| 方法 | 说明 |
|---|---|
| getFullYear() | 获取当年 |
| getMonth() | 获取当月(0-11)获取后需要加1 |
| getDate() | 获取当天日期 |
| getDay() | 获取星期几(周日0到周六6) |
| getHours() | 获取当前小时 |
| getMinutes() | 获取当前分钟 |
| getSeconds() | 获取当前秒钟 |
| date.getTime() | 获取总毫米数 |
3.42 正则表达式
语法
var reg=/^规则$/
var reg = new RegExp(/规则/);
表达式规则
常见的正则表达式
1、数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
2、中文字符的正则表达式：[\u4e00-\u9fa5]
3、手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
4、帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：1[a-zA-Z0-9_]{4,15}$
5、强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
6、身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(\d{15}$)|(^\d{18}$)|(\d{17}(\d|X|x)$)
7、金额校验(非零开头的最多带两位小数的数字)：^([1-9][0-9]*)+(.[0-9]{1,2})?$
8、Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
9、域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
10、QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
11、xml文件：^([a-zA-Z]±?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
12日期格式：^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
13、HTML标记的正则表达式：<(\S*?)[^>]>.?|<.? /> ( 首尾空白字符的正则表达式：^\s|\s*KaTeX parse error: Undefined control sequence: \s at position 4: 或(^\̲s̲*)|(\s*) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
14、中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
15、IP地址：((?😦?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
常用正则方法
match
match() 与字符串一起使用以检查字符串和正则表达式 regex 之间的匹配，以正则表达式为参数。
语法：
str.match(regex);
可能返回三个值，
第一种加全局查询g的，返回多个符合正则的值
第二种不加全局查询的，返回第一个值
第三种没有符合规则的，返回null
test
test() 用于测试指定字符串和正则表达式之间是否匹配，接受一个字符串作为其参数，并根据是否匹配返回 true 或 false
有时候可能需要忽略大小写，可以在正则表达式后面加个i
search
search() 方法是一个字符串方法，可以将其与正则表达式一起使用。可以将正则表达式作为参数传递给它，以在字符串中搜索匹配项。
方法返回第一个匹配项在整个字符串中的位置（索引），如果没有匹配项，则返回 -1。
replace
replace() 是在字符串中搜索指定的值或正则表达式并将其替换为另一个值，方法接受两个参数：
要搜索的值
要替换的新值
方法返回一个包含被替换后的新字符串
但是，它不会改变原始字符串，并且只会替换搜索到的第一个值。
replaceAll
replaceAll() 类似于方法 replace() ，但它允许替换字符串中所有匹配的值或正则表达式。
它接受两个参数：
要搜索的值，如果是正则，则必须带上全局标记 g
要替换的新值
它返回一个包含所有新值的新字符串，同样也不会更改原始字符串。
3.43.事件处理
三种绑定方式
- 第一种：
<button onClick="fn()">点击</button>
<script>
function fn() {
alert("被点击了");
}
</script>
- 第二种：
<button id="btn">点击</button>
<script>
document.querySelector("#btn").onclick = function() {
alert("被点击了");
};
</script>
- 第三种：
<button id="btn">点击</button>
<script>
document.querySelector("#btn").addEventListener("click", function() {
alert("被点击了");
});
</script>
事件冒泡、捕获
捕获：从根节点开始执行，一直往子节点查询执行，直到查询执行到目标节点
- 当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。
冒泡：从目标节点开始执行，一直往父节点冒泡查找执行，直到查到根节点
- 从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。
阻止事件冒泡
js方法：e.stopPropagation ()
jQ方法： return false
<style>
#big {
width: 100px;
height: 100px;
background-color: red;
}
#small {
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
<div id="big">
<div id="small"></div>
</div>
<script>
var big = document.getElementById("big");
var small = document.getElementById("small");
big.onclick = function(event) {
alert("大盒子被点击了");
};
small.onclick = function() {
alert("小盒子被点击了");
event.stopPropagation();
};
</script>
阻止默认行为
event.preventDefault();
<a href="https://www.baidu.com" id="link">百度</a>
<p id="ele"></p>
<script>
var link = document.getElementById("link");
link.onclick = function(event) {
var res = confirm("你确认离开当前页面吗？");
if (res) {
alert("执行跳转操作");
} else {
// 因为a标签有默认的跳转行为，你就是添加了逻辑判断也没有用，还是会跳转，所以阻止默认行为
event.preventDefault();
alert("执行其它业务逻辑");
}
};
</script>
vue中阻止事件冒泡 @click.stop=“fn”
3.44 DOM操作
什么是DOM与节点树
DOM
DOM 是 JavaScript操作网页的api接口，全称为“文档对象模型,浏览器会根据 DOM 模型，将结构化文 档（比如HTML和 XML）解析成一系列的节点，再由这些节点组成一个DOM树（DOMTree）。所有的节点和最终的树状结构，都有规范的对外接口。DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是JavaScript 最常见的任务.
节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
浏览器原生提供document节点，代表的是整个文档。
DOM选择器
| 选择器 | 返回值 |
|---|---|
| document.getElementById() | 返回唯一一个 |
| documentgetElementsByClassName | 返回多个类似数组 |
| document.getElementsByTagName() | 此方法返回多个类似数组 |
| document.querySelector() | 此方法返回唯一一个 |
| document.querySelectorAll() | 此方法返回类似数组的DOM节点数组 |
DOM基本操作
添加节点: 使用document.createElement()生成元素节点，并返回该节点。
<div id="fu"></div>
<script>
let span = document.createElement('span')
let fu = document.querySelector('#fu')
// console.log(fu);
fu.appendChild(span)//添加节点
span.innerHTML='我是span'
</script>
删除节点：.removeChild(子节点对象)
<div id="fu">
<div id="zi"></div>
</div>
<script>
let fu = document.querySelector('#fu')
let zi = document.querySelector('#zi')
fu.removeChild(zi)
</script>
3.45 深拷贝与浅拷贝
概念
深拷贝：两个数据指向两个地址，不会互相影响
浅拷贝：两个数据指向同一个地址，改变一个，另一个也会受到改变
深浅拷贝只针对引用数据库类型(object 和 Array)
数组的拷贝
浅拷贝
var arr = [0,1,2,3]
arr2=arr
arr2[0]=10
console.log(arr);//[10,1,2,3]
console.log(arr2);//[10,1,2,3]
深拷贝
var arr = [0,1,2,3]
function copy(arr){
let newArr=[];
for(let i = 0;i<arr.length;i++){
newArr.push(arr[i])
}
return newArr
}
let arr2 = copy(arr)
arr2[0]=10;
console.log(arr);//[0,1,2,3]
console.log(arr2);//[10,1,2,3]
对象的拷贝
浅拷贝
let obj = {
"name":'tom',
"age":21
}
let obj2=obj
obj.name='jim'
console.log(obj);//{name:'tom',age:21}
console.log(obj2);//{name:'tom',age:21}
深拷贝
let obj = {
"name": 'tom',
"age": 21
}
let obj2 =JSON.parse(JSON.stringify(obj))
obj2.name = 'jim'
console.log(obj);//{name:'tom',age:21}
console.log(obj2);//{name:'jim',age:21}
3.46 字符串变驼峰
function combo(msg) {
let arr = msg.split("-"); //[get,element,by,id]
for (let i = 1; i < arr.length; i++) {
arr[i] = arr[i][0].toUpperCase() + arr[i].substring(1); //Element
}
msg = arr.join(""); //msg=” getElementById”
return msg;
}
let str = "get-element-by-id";
let res = combo(str);
console.log(res);
3.47 日期转换
let d= new Date();
let year = d.getFullYear()
let month= d.getMonth()+1;
month =month<10?'0'+month:month
let day = d.getDate()//获取日期 getDay获取星期几
day = day <10? '0'+day :day
console.log(`${year}-${month}-${day}`);
3.48 随机数
let arr = [];
function getRandom(iStart, iEnd) {
let iChoice = iEnd - iStart + 1;
return Math.floor(Math.random() * iChoice) + iStart
}
for (let i = 0; i < 10; i++) {
let num = getRandom(10, 100);//调用函数
arr.push(num);
}
arr.sort();
console.log(arr.sort());
3.49 人民币
let str = 12345678+'';
function res (str){
// 装换为数组 数组反转 装换为字符串
return(str=str.split('').reverse().join(''))
}
str =res(str)
function toRMB(str){
let rmb=''
for (let i = 1; i <= str.length; i++) {
rmb+=str[i-1]
if(i%3 == 0 && i!=str.length){
rmb+=','
}
}
return rmb
}
str=res(toRMB(str))
// str = toRMB(str)
console.log(str);
3.50求阶乘
Number.prototype.N = function(){
let re = 1;
// 原型链中this指向实例对象，也就是num
for ( let i = 1;i<=this;i++){
re*=i
// console.log(this);//3
}
return re
}
let num = 3
console.log(num.N());
3.51防抖与节流
防抖:
指触发事件后几秒后函数执行一次，如果在这几秒内又重新触发函数，就重新计算函数执行时间
function ajax() {
console.log(111);
}
// 防抖
function debounce(func,delay) {
let timer = null
return ()=>{
if(timer){
// 如果有的话就清除并重置定时器
clearTimeout(timer);//清除定时器
timer =null;//重置定时器
}
timer = setTimeout(()=>{
//重新设置定时器
func();//在这里执行ajax请求
timer=null;//执行完毕后，重置定时器
},delay)
}
}
let deajax = debounce(ajax,2000)
节流:
指触发函数后，设置一个倒计时，倒计时结束后，什么也不管，立即执行，无论有没有结果
function ajax() {
console.log(111);
}
// 节流
function throttle(func,delay){
let timer=null;
return ()=>{
if(!timer){
// 如果没有设置定时，我们在这里设置定时器
setTimeout(() => {
func()//在这里设置定时器
timer=null;//执行完毕后，重置定时器
}, delay);
}
}
}
let thajax = throttle(ajax,2000)
防抖和节流的作用
减少一些操作的频率，降低请求次数
3.52定时器
循环定时器
let timer = setInterval(function(){
console.log(1);
},1000)
//清除
clearInterval(timer)
一次性定时器
let timer = setTimeout(function(){
console.log(1);
},2000)
// 清除
clearTimeout(timer)
3.53 window对象上常用方法
页面跳转
window.location.href="网址"
返回锚点
window.location.hash
返回的是问号后面的
返回搜索参数
window.location.search
返回的是？号后面的参数
刷新当前页面
window.location.reload()
3.54 es6新特性
三种变量
var
let
const
var和let区别
- var变量提升,let 没有
- var变量覆盖，let没有
- var 变量污染(没有块级作用域)，let有块级作用域
- 都可以不赋值
- var 是函数作用域
const 常量
- const 值是不允许被修改的
- const声明必须赋值
- 支持let 其他属性
变量结构
数组结构
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);//123
//设定默认值
let [a, b = 5] = [10];
console.log(a, b); //10 5
对象结构
let res = {
code: 200,
data: {
message: [
{ id: 1, name: "冰箱", price: 2000 },
{ id: 2, name: "彩电", price: 1000 }
]
}
};
const {
code,
data: { message }
} = res;
console.log(code, message); //200 []
字符串解构
const [a, b, c, d, e] = "hello";
console.log(a, b, c, d, e); // "h" "e" "l" "l" "o"
模板字符串
var y = 2022;
var m = 5;
var d = 15;
var str = `今年是${y}年${m}月${d}日`;
console.log(str); // 今年是2022年5月15日
箭头函数
特点
- 没有自己的this对象
- 不可以当成构造函数，即(不可以对箭头函数使用new命令)
- 不可以使用arguments对象，在函数体不存在，可以用rest代替
- 箭头函数this指向父作用域的this
数组扩展
array.from
将类似数组转换为真正的数组
Array.of
将一组数据转换为数组
find()
找出第一个符合条件的数组成员，并返回该成员，否则返回undefined
findIndex()
找出第一个符合条件的数组成员的索引号，找不到返回-1
fill()
给定值，填充一个数组
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
entries()
返回键值对
let arr = ['a','b','c']
for(let [index,item] of arr.entries()){
console.log(index,item);
// 0 'a'
// 1 'b'
// 2 'c'
}
keys()
返回索引值
let arr = ['a','b','c']
for (let index of arr.keys()){
console.log(index);//0,1,2
}
values()
返回数组成员
let arr = ['a','b','c']
for( let item of arr.values()){
console.log(item);//a,b,c
}
includes()
查找该数组是否包含这组值，返回false或者true
let arr = ['a', 'b', 'c']
console.log(arr.includes('a'))//true
flat()
数组拉平
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
3.55 模块化
export 导出模块
可以导出变量，函数，类
export导出后import不可以随意更换名字
export { firstName, lastName, year };
export default 导出后 import导入时候能随意更换名字
import 导入模块
import { firstName, lastName, year } from './profile.js';
3.56 promise
经典标杆
const promise = new Promise((resolve,reject)=>{
console.log(1);
resolve();
console.log(2);
})
promise.then(()=>{
console.log(3);
})
console.log(4);//1 2 4 3
promise 在生成函数时就执行，所以打印1 ，2
promise.then是异步函数所以往后放
4正常输出
3.57 对象的合并
1.拓展运算符
2.assign方法
const obj2 = {
name: "ls",
sex: "女"
};
const obj1 = {
name: "zs",
age: 13
};
const newObj = Object.assign(obj2, obj1);
console.log(newObj);
需要注意的是:合并的时候，如果有重复的字段，重复的字段会被后面的对象覆盖
4. vue 基础语法
4.1 MVVM理解
什么是MVC
是应用最广泛的软件构架之一，MVC分别指：Model(模型)、View(视图)、Controller(控制器)。视图可以直接跟模型打交道，是单向的
缺点：
前后端不分离，没有办法独立开发。
前端不够独立，没有自己的数据中心。太依赖后台
什么是MVVM
MVVM分别指：Model(模型)、View(视图)、ViewModel(视图模型)
在MVVM模式下视图跟模型是不能直接通信的，只能通过ViewModel(视图模型)进行交互，它能监听到数据的变化，然后通过视图进行自动更新，当用户操作视图时，VM也能监听到视图的变化，然后数据做相应改动，实现了双向数据绑定，视图和视图模型可以进行通信
MVVM实现了业务与视图分离
区别
- mvc 中 Controller演变成 mvvm 中的 viewModel
- mvvm 通过数据来驱动视图层的显示而不是节点操作。
- mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步
- mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验
4.2 vue组件化理解
组件定义
组件是可复用的vue实例
增加代码的复用性，提高维护效率
使用场景
- 通用组件 实现基本功能
- 业务组件 完成一定的业务和功能
- 页面组件 组织应用各页面内容
如何使用组件
第一种：components注册
第二种：有状态组件（data） 无状态组件（函数组件）
第三种：组件传值，父传子用props接受，子传父用emit分分等
第四种：组件用于内容的分发，比如插槽的使用
vue组件产生过程：组件配置-Vuecomponent-render-虚拟dom-真实的DOM结构
插槽
默认插槽
子组件
<slot></slot>
父组件
<template>
<div class="home">
<HelloWorld>
<ul v-for="(item) in students" :key="item.id">
<li >{{item.name}}</li>
<li >{{item.age}}</li>
<li >{{item.id}}</li>
</ul>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
export default {
name: "Home",
data() {
return {
students: [
{ id: 1, name: "tom", age: 23 },
{ id: 2, name: "jim", age: 21 },
{ id: 3, name: "jack", age: 22 }
]
};
},
components: {
HelloWorld
}
};
</script>
具名插槽
子组件可以通过name定义多个插槽
子组件
<slot name="title"></slot>
<slot name="content"></slot>
父组件
<template>
<div class="home">
<HelloWorld>
<ul slot="content">//这里插槽姓名
<li v-for="(item,index) in students" :key="item.id">{{item.name}}</li>
</ul>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
export default {
name: "Home",
data() {
return {
msg: "world",
students: [
{ id: 1, name: "tom", age: 23 },
{ id: 2, name: "jim", age: 21 },
{ id: 3, name: "jack", age: 22 }
]
};
},
components: {
HelloWorld
}
};
</script>
作用域插槽
子组件把数据定义在插槽中，父组件管理 插槽中的数据并进行展示
子组件
<template>
<div class="hello">
<slot :title="title" :content="content"></slot>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
title: "我是标题",
content: [
{ id: 1, name: "tom", age: 23 },
{ id: 2, name: "jim", age: 21 },
{ id: 3, name: "jack", age: 22 }
]
};
}
};
</script>
父组件
<template>
<div class="home">
<HelloWorld>
<template scope="params">//自己起的名字
<h3>{{params.title}}</h3>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
export default {
name: "Home",
data() {
return {};
},
components: {
HelloWorld
}
};
</script>
解析
params是自己起的名字，相当于是接受子组件传递过来的数据对象，格式是
params={
title:"xx",
students:[]
}
1. 父组件使用插槽数据的时候，如果使用的是scope，必须包裹在template标签中
1. 父组件使用插槽数据的使用，如果使用的是slot-scope,可以不用写template标签
4.3属性绑定
语法
v-bind:属性=‘变量’ 简写 :属性=‘变量’
实例
<img :src="url" alt="">
data() {
return {
url:"http://82.157.238.208/girl.png"
};
},
4.4列表渲染
<li v-for="(item,index) in students" :key="item.id">
4.5双向数据绑定
表单元素中通过v-model指令把用户输入的值和data（模型）中的数据进行绑定，页面用户输入的内容发生改变，data(模型)中的数据发生改变，如果是data(模型)中的数据发生改变，页面（视图）也会发生相应的改变。
4.6 事件处理
事件绑定
<p>{{ msg }}</p>
<!-- v-on绑定事件 -->
<button v-on:click="change('你好')">点击更换内容</button>
<!-- @符号简写和传参 -->
<!-- <button @click="change('新内容')">点击更换内容</button> -->
<!-- 键盘事件处理 -->
<input type="text" v-model="text" @keydown.enter="handle" />
export default {
name: "VueAbout",
data() {
return {
msg: "hello world",
text: "",
};
},
methods: {
change(str) {
this.msg = str;
},
handle() {
console.log(this.text);
},
},
};
- v-on:事件名=“事件处理函数”,事件函数定义在methods中
- v-on可以简写成@
- 键盘事件有很多，比如keyup、keydown
- 事件绑定可以添加事件修饰符
事件修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
4.7class和style绑定
给类设置三元表达式
orld>
#### 作用域插槽
子组件把数据定义在插槽中，父组件管理 插槽中的数据并进行展示
子组件
```vue
<template>
<div class="hello">
<slot :title="title" :content="content"></slot>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
title: "我是标题",
content: [
{ id: 1, name: "tom", age: 23 },
{ id: 2, name: "jim", age: 21 },
{ id: 3, name: "jack", age: 22 }
]
};
}
};
</script>
父组件
<template>
<div class="home">
<HelloWorld>
<template scope="params">//自己起的名字
<h3>{{params.title}}</h3>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
export default {
name: "Home",
data() {
return {};
},
components: {
HelloWorld
}
};
</script>
解析
params是自己起的名字，相当于是接受子组件传递过来的数据对象，格式是
params={
title:"xx",
students:[]
}
1. 父组件使用插槽数据的时候，如果使用的是scope，必须包裹在template标签中
1. 父组件使用插槽数据的使用，如果使用的是slot-scope,可以不用写template标签
4.3属性绑定
语法
v-bind:属性=‘变量’ 简写 :属性=‘变量’
实例
<img :src="url" alt="">
data() {
return {
url:"http://82.157.238.208/girl.png"
};
},
4.4列表渲染
<li v-for="(item,index) in students" :key="item.id">
4.5双向数据绑定
表单元素中通过v-model指令把用户输入的值和data（模型）中的数据进行绑定，页面用户输入的内容发生改变，data(模型)中的数据发生改变，如果是data(模型)中的数据发生改变，页面（视图）也会发生相应的改变。
4.6 事件处理
事件绑定
<p>{{ msg }}</p>
<!-- v-on绑定事件 -->
<button v-on:click="change('你好')">点击更换内容</button>
<!-- @符号简写和传参 -->
<!-- <button @click="change('新内容')">点击更换内容</button> -->
<!-- 键盘事件处理 -->
<input type="text" v-model="text" @keydown.enter="handle" />
export default {
name: "VueAbout",
data() {
return {
msg: "hello world",
text: "",
};
},
methods: {
change(str) {
this.msg = str;
},
handle() {
console.log(this.text);
},
},
};
- v-on:事件名=“事件处理函数”,事件函数定义在methods中
- v-on可以简写成@
- 键盘事件有很多，比如keyup、keydown
- 事件绑定可以添加事件修饰符
事件修饰符
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
4.7class和style绑定
给类设置三元表达式
a-zA-Z ↩︎
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
