填空:
播放时间改变时触发:timeupdate
播放视频的展示图片的链接地址:puster
animation-direction:alternate 的效果是:动画播放的次数,奇数次正向播放;偶数次逆向播放
(animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放)
设置动画效果暂停的代码是:animation-play-state:paused
在web应用中,写出可以实现动画效果的方法(举例三个):CSS3 translate , CSS3 transition , CSS3 animation , SVG , javascript直接实现 , requestAnimationFrame(类似于setInterval)
sass通过$定义变量,那么要定义一个字体颜色为red的变量应该为color:red
js特性包括:解释性,用于客户端,基于对象;
简答（面试）:
1.当页面中出现滚动条时怎样取消?
html,body{
height:100%;
overflow:hidden;
}
webkit-scrollbar:{
display:none;
}
2.css3动画和animation动画的区别?
(1) css3动画需要触发条件,animation动画在页面加载后就可以实现;
(2) css3动画只有开始和结束两种过程,中途无法控制;而animation可以设置动画次数;
(3) css3简单动画效果,通过属性展示动画效果;而animation复杂动画效果,定义关键帧,控制每一帧的动画效果;
3.什么是响应式以及开发原理它的优缺点是什么?
描述:通过一套代码,根据视口的变化来判断显示不同的样式和结构,解决了不同浏览器不同设备的,不同的显示效果。
开发原理：使用媒体查询标签针对不同宽度的设备进行布局和样式设置
优点：
面对不同的设备可以更加灵活的显示页面的效果
能够快捷的解决多设备的显示适应问题
缺点：
兼容各种设备，工作量大，页面加载时间太长，开发成本高，维护费用高
在一定程度上会改变原有网站的布局结构，会给用户造成视觉混淆
4.如何实现响应式布局？
通过一套代码,根据视口的变化来判断显示不同的样式和结构;
外链式css引入:
内链式css引入:
@media screen and (min-width:px) and (max-width:px) { }
(1) 媒体查询
(2) 百分比布局
(3) rem响应式布局
(4) 视口单位
5.移动端适配方案是什么？
移动端:可进行移动的设备,在开发者眼中就是手机和平板;
移动端适配就是在进行屏幕宽度的等比例缩放：
(1) 使用rem--设置html的font-size:100px;那么1rem = 100px;
(2) 使用vw--1vw表示屏幕宽度的1%;(把屏幕宽度分成了100份,是css3中新增的vw单位);
(3) 使用媒体查询标签--@media screen and (min-width:768px) and (max-width:1200px);
(4) 使用rem+vw方案
(5) 使用viewport方案--在meta标签中设置initial-scale
(6) 采用流式布局--使用%定义宽度,高度使用px固定,使用min-width和max-width来控制页面的最大宽和最小宽
(7) 采用flex+rem布局(比如淘宝和小米移动端)
6.flex布局的原理，以及对父元素，子元素的属性分别有哪些？
任何一个容器都可以指定flex布局;当我们为父盒子设置为flex布局以后,子元素的float,clear,vertical-align属性将失效;
原理:通过给父盒子添加display:flex来控制子盒子的位置和排列方式;
父元素常见属性:
flex-direction:row/row-reverse/cloumn/cloumn-reverse设置主轴的方向
Justify-content:flex-start/flex-end/center/sapce-around/space-between/space-evenly设置主轴上子元素排列方式
flex-wrap:wrap/nowrap设置子元素是否换行
align-content:flex-start/flex-end/center/stretch/sapce-around/space-between设置侧轴上的子元素排列方式(多行)
align-items:flex-start/flex-end/center/stretch设置侧轴上的子元素排列方式(单行)
flex-flow:flex-direction justify-content; 复合属性
子元素常见属性:
flex:子元素占的份数（数值）
align-self:auto/flex-start/flex-end/center控制子元素在侧轴的排列方式
order:定义子元素的前后排列顺序(数值越小越靠前,数值越大越靠后)
7.align-items与align-content的区别是什么？
align-items:适用于单行的情况align-content:适用于子元素换行(多行)的情况,在单行下是没有效果的(比前者多了space-around和space-between两个属性)
8.css3盒子模型与传统盒子模型的区别是什么？
Css3盒子模型:box-sizing:border-box;
传统盒子模型:box-sizing:content-box;
1.传统盒子模型的padding和border会撑大盒子
2.CSS3盒子模型的padding和border不会撑大盒子
9.请说明px，em，rem的区别是什么？
px是相对长度单位,它是相对于显示器分辨率而言的,即像素值;
em是相对长度单位,相对于父元素来设置字体大小的;
rem是css3新增的一个相对单位,相对于根元素html来变化的;
vw与%的区别:
%是基于父元素的宽度/高度的百分比;vw/vh是根据窗口的宽度/高度的百分比来变化的;
视口单位的优势在于vh能够直接获取高度;而%在没有设置body高度的情况下,是无法正确获得可视区域的高度;
10.简述sass的作用是什么？
(1)sass赋予了css编程能力,像编写逻辑代码一样的编写样式,编写更为灵活;
(2)相比于平面css,sass的结构式文档样式结构更为清晰,阅读更佳;
(3)减少了重复的css样式代码的出现,使css更干净;
(4)sass更稳定,强大,兼容css版本;
11.请举例说明sass中运算符常用的三种是什么？
数学运算符
$width:100px;$height:200px;
div{width:$width+$height};
除法运算符
p{margin-left:$width/10};
比较运算符
p{
@if($width>=20){
padding:$width/20;
}else{
padding:$width/10
}
}
括号运算符
字符串运算符
布尔运算符
颜色运算符
12.sass的嵌套规则是什么？
(1)普通嵌套
(2)伪类嵌套嵌套
(3)群组选择器
(4)组合选择器
(5)css属性选择器
13.touch事件指的是哪四个事件？每个事件包含哪三个触摸列表？
四个事件:
touchstart事件：当手指触摸屏幕时候触发
touchmove事件：当手指在屏幕上滑动的时候连续地触发
（在这个事件发生期间，调用preventDefault()事件可以阻止滚动。）
touchend事件：当手指从屏幕上离开的时候触发
touchcancel事件：当触摸点被中断时会触发touchcancel事件，
根据自己的具体实现而有所不同（使用很少）
三个触摸列表:
touches： 当前屏幕上所有触摸点的列表数组
targetTouches： 当前对象上所有触摸点的列表数组
changedTouches：涉及当前(引发)事件的触摸点的列表数组
14.css3新特性，过渡，动画是什么？
文字阴影:text-shadow:x-offset y-offset blur color;
文字描边:text-stroke:width color;
盒子阴影:box-shadow:x y 模糊度 (延伸度) 颜色;
线性渐变:background:linear-gradient( to 方向 ,color );
径向渐变:background:-webkit-radial-gradient(position,shape size,start-color,end-color);
circle圆 ellipse椭圆
2D动画:
transform：translate（）
scale（）
rotate()
skew()
过渡:
transition: 过渡属性 过渡时间 过渡方式 延迟时间;
属性值:
transition-property:none/all/property;
transition-duration:5s 单位s/ms
transition-timing-function : ease(默认值)/linear/ease-out/ease-in/ease-in-out;
慢-快-慢/匀速/快-慢/慢-快/慢-快-慢
transition-delay:5s
15.什么是事件委托？其原理是什么？优点是什么？
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父级元素而将事件委托给上级元素来触发处理函数。这主要得益于浏览器的事件冒泡机制。
原理:利用事件冒泡的原理
事件委托优点：
1、减少事件注册，节省内存。比如，
在table上代理所有td的click事件。
在ul上代理所有li的click事件。
2、简化了dom节点更新时，相应事件的更新。比如
不用在新添加的li上绑定click事件。
当删除某个li时，不用移解绑上面的click事件。
事件委托缺点：
1、事件委托基于冒泡，对于不冒泡的事件不支持
2、层级过多，冒泡过程中，可能会被某层阻止掉。
3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
4、把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。
16.在所学的知识中，让元素隐藏的方法有几种？
(1)display:none;
(2)overflow:hidden;
(3)visiblity:hidden;
(4)浮动;
(5)定位;
(6)width:0;height:0;
(7)旋转到90deg;
(8)缩放为0;
(9)opacity:0;
(10)jQuery动画-hide()
17.css3有哪些新特性？
border-radius--实现圆角
box-shadow--盒子阴影
text-shadow--文字阴影
gradient--渐变
transform:rotate--旋转
transform:scale--缩放
transform:translate( )--平移
transform:skew--扭曲
18.前端请求数据的过程中为什么会出现跨域？如何解决跨域问题？
跨域：当请求一个url的协议，域名，端口号三者之间任意一个与当前页面url的协议，域名，端口号不同即为跨域。
导致跨域的根本原因是浏览器的同源策略导致的
解决跨域问题：
（1）Jsonp
是服务器与客户端跨源通信的常用方法。最大的特点就是简单适用，兼容性好；缺点是只支持get请求，不支持post请求。（只有ajax请求才会产生跨域问题）
（2）Cors
(3) src属性不受同源策略影响通过script的src属性 去向服务器发送请求 并且传递一个函数名字 让后端帮我们调用一下这个函数 并将数据传递过来
19.本地存储和cookie的区别是什么？
1.生命周期
localStorage的生命周期是永久的
关闭页面浏览器之后,localStorage中的数据不会消失
localStorage除非主动删除,否则数据永远不会消失
相同的浏览器的不同标签可以共享localStorage
sessionStorage的生命周期仅存在当前会话下有效
sessionStorage在关闭浏览器窗口后被销毁
同时独立打开同一个窗口同一个页面,sessionStorage也是不一样的
cookie的存在时间是自定义的,当有效时间过期就会消失;默认关闭浏览器就消 失
2.存储的大小:
localStorage和sessionStorage的存储数据一般都是5MB
cookie在浏览器中为4KB
3.存储位置:
localStorage sessionStorage都保存在客户端,不与服务器进行交互
cookie保存在服务器
4.保存类型:
localStorage sessionStorage只能存储字符串类型,如果保存了复杂类型值,使用 json对象的方法转换
cookie可以保存任何类型
5.获取方式:
localStorage:window.localStorage
sessionStorage:window.sessionStorage
cookie:document.cookie
6.使用场景:
localStorage常用于长期登录,适合长期保存本地数据
sessionStorage敏感账号一次性登录
7.作用域不同:
sessionStorage 不能跨页面访问
localStorage在所有的同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的
20.谈谈你对闭包的理解，以及它的作用和缺点是什么？
闭包是指有权访问另一个函数作用域中变量的函数（创建闭包的最常见方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量）。
作用：可以读取其他函数内部的变量，并将其一直保存在内存中。
缺点：可能会造成内存的泄露。
21.js的同异步的区别是什么，以及js有哪些操作是异步的？
同步 -- 程序等待服务器响应结果后继续执行
异步 -- 程序不需要等待服务器响应，自己继续向下执行
Ajax.open( ‘方式’ ，’地址’ ， true/ false);
True默认 异步
False 同步
js有哪些操作是异步：
（1）定时器都是异步操作
（2）事件绑定都是异步操作
（3）Ajax中一般都采取异步操作
（4）回调函数可以理解为异步（不是严谨的异步操作）
除了以上这些，其他的都是异步操作；
22.什么是作用域？什么是作用域链？
在JS中变量生效范围。
有全局和局部（函数作用域）：
全局作用域 ：函数作用域和块级作用域之外的作用域
函数作用域：普通函数内部的作用域
块级作用域：let const 产生快级作用域，花括号包裹的作用域。
在使用变量时，从内到外，自下而上查找 的方式产生的链式关系，称为作用域链。
23.什么是原型？什么是原型链？
原型：
1、一个可以被复制的对象，通过复制原型可以创建一个一模一样的新对象，言外之意原型就是一个模板，在js中更准确的描述为对象原型。
2、所有引用类型都有一个_proto属性，属性值是 一个普通对象。
3、所有的函数都有一个prototype属性，属性值是一个普通对象。
4、所有引用类型的proto属性指向它构造函数的prototype
5、原型定义公共属性和方法，利用原型创建新对象的实例会共享原型的属性和方法。
原型链：
原型链是原型对象创建过程的记录，当访问一个对象的某个属性时，会先在这个对象本身的属性上去找，如果没有没有找到，则会去它（实例对象）的proto(原型)上查找，即构造函数的prototype。如果还没找到，就会在构造函数的prototype的proto中查找。
这样一层一层向上查找就会形成一个链式结构。
24.转换数据类型分别有哪些？转换的方法是什么？
JS的数据类型：
数据类型的显式转换：
1.转换为字符串类型：toString() +拼接 String（）
2.转换为数值类型：parseInt（） Number（） parseFloat（） 隐式转换（- * /）
3.转换为布尔类型：Bollean（）
数据类型的隐式转换
1.递增和递减运算符（++,--的前置和后置）：
2.逻辑操作符（！、&&、||），即短路运算符；
3.关系操作符（< > >= <= == != === !==）：
4.相等操作符（==和===）：
NaN：NaN做任何计算都是NaN；NaN与任何类型的数据比较都会返回false；
25.‘==’ 与 ‘===’的区别是什么？
==是相等运算符
值相等即等
===是严格运算符
值相等且数据类型也相等即等
26.几个相同的块状元素如果改为行内块,就会同行显示,他们之间会有一个小间距,请问这个小间距怎样消除?
给他们的父元素设置一个font-size:0;
为什么会有一个小间距?
27.如何使用递归函数实现深拷贝?
如果一个函数在内部可以调用自己，那么这个函数就是递归函数。
递归函数的作用和循环效果一样。
在递归函数中不写终止条件会陷入死循环
写递归函数时 一定要写上终止条件
使用递归函数必须要符合两个条件：
1.在每一次调用自己时，必须是（在某种意义上）更接近于解；
必须有一个终止处理或计算的出口(必须配合return使用)。
28.谈谈你对this的理解?
(1) 在单独使用,普通函数,定时器,立即执行函数,闭包函数,普通函数嵌套中this指向window;
(2) 在事件中this指向事件源;
(3) 在函数的严格模式下,this指向undefined;
(4) 在对象中,this当做方法,指向所属对象;
(5) 在构造函数中,this指向实例化对象;
(6) 在call()和apply()方法中,this可以指向任何一个对象;
(7) 原型链中的方法,this指向调用它的函数;
29.面向对象
概念:
举个最简单点的例子来区分面向过程和面向对象
有一天你想吃鱼香肉丝了，怎么办呢？你有两个选择
1、自己买材料，肉，鱼香肉丝调料，蒜苔，胡萝卜等等然后切菜切肉，开炒，盛到盘子里。
2、去饭店，张开嘴：老板！来一份鱼香肉丝！
看出来区别了吗？1是面向过程，2是面向对象。
面向对象有什么优势呢？首先你不需要知道鱼香肉丝是怎么做的，降低了耦合性。如果你突然不想吃鱼香肉丝了，想吃洛阳白菜，对于1你可能不太容易了，还需要重新买菜，买调料什么的。对于2，太容易了，大喊：老板！那个鱼香肉丝换成洛阳白菜吧，提高了可维护性。总的来说就是降低耦合，提高维护性！
面向过程是具体化的，流程化的，解决一个问题，你需要一步一步的分析，一步一步的实现。
面向对象是模型化的，你只需抽象出一个类，这是一个封闭的盒子，在这里你拥有数据也拥有解决问题的方法。需要什么功能直接使用就可以了，不必去一步一步的实现，至于这个功能是如何实现的，管我们什么事？我们会用就可以了。
特点:
封装性,多态性,继承性;
优点:
灵活;代码复用性;易维护;适合多人开发;
面向对象的创建方式
1.对象字面量
var obj = {
name : '小',
age : 21,
say : function(){
console.log('111');
}
};
var a = Object.create(obj);
console.log(a.name);//小
优点:简单明了
缺点:创建多个对象,代码量大量重复;
2.工厂模式
function person(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function(){
console.log(this.name);
}
return obj;
}
var p1 = new person('小小',19);
console.log(p1);//{name: '小小', age: 19, say: ƒ}
优点:解决了字面量创建多个对象,代码量大量重复的问题
缺点:产生了对象识别问题
3.构造函数模式
function Person(name,age){
this.name = name;
this.age = age;
this.say = say;
}
function say(){
console.log(111);
}
var p1 = new Person('木',6);
console.log(p1);//Person {name: '木', age: 6, say: ƒ}
优点:解决了工厂模式中对象识别的问题
缺点:方法的重复调用,浪费了内存资源
4.原型模式
原生写法
function Person(){
Person.prototype.name = '木木';
Person.prototype.age = 22;
Person.prototype.say = function(){
console.log(222);
}
}
var p1 = new Person();
console.log(p1);//在原型上有属性和方法
简便写法:
function Person(){};
Person.prototype = {
constructor:Person,
name : '小胖',
age : 6,
say : function(){
console.log('你好');
}
}
var p1 = new Person();
优点:让方法在构造函数的原型上被共享,解决了方法的重复调用
缺点:在构造函数的原型上定义了属性和方法,其中一个实例对象的属性被修改,那么其他的也会被修改
5.组合模式
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype = {
constructor : Person,
say : function(){
console.log('明天');
}
}
var p1 = new Person('胖',6);
console.log(p1);
优点:解决了多个实例化对象,其中一个被改变,其他的不会被改变
缺点:每次在原型上修改属性和方法时,都要修改constructor指向
继承(最后记)
原型链继承
核心:将父类实例作为子类原型
缺点:(1)子类的实例可以共享;(2)实例子类的时候,不能向父类构造函数传参
借用构造函数继承
核心:借用父类构造函数来增强子类实例,等于是复制父类的实例属性给子类
优点:(1)子类继承了父类的属性,其中一个子类改变属性值,其他的不会被改变;(2)创建子类实例,可以向父类构造函数传参
缺点:给父类定义的方法,子类不能继承
组合继承
核心:通过调用父类构造函数,继承父类属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
优点:(1)父类的方法定义在原型对象上,可以实现方法的复用;(2)创建的子类实例,可以向父类构造函数传参,并且不共享父类的引用属性
缺点:每次实例对象都要调用父类函数两次(first:改变指向;second:原型链赋值)
寄生组合继承
核心:通过这种方式,砍掉父类的实例属性,这样在调用父类的构造函数的时候,就不会初始化两次实例,避免了组合继承的缺点
优点:(1)只调用一次父类构造函数;(2)保留组合继承的优点
缺点:修改构造函数的指向后,父类实例的构造函数同时也发生改变
多重继承
注意:JavaScript中不存在多重继承,意味着一个字对象不能同时继承多个父类对象,但是通过变通的方式来实现继承
通过Object.assign()方法实现继承
Object.assign(tragetObj,copyObj);
参数一为被继承对象,即子类对象
参数二为被拷贝对象,即父类对象
作用:将copyObj对象中的属性和方法拷贝到tragetObj目标对象上
原型链关系
函数是Function构造出来的
一切函数都是对象
只要是函数对象，就会有原型prototype和隐式原型proto两个属性。
普通对象身上只有proto，没有prototype
实例化对象的proto都指向构造函数的prototype
所有函数的prototype都指向自身prototype
所有prototype的proto都指向Object.prototype(Object的除外)
所有函数对象的proto都指向Function.prototype(包括Function自身)
对象身上都有constructor指向函数自身
原型对象，构造函数，实例化对象 三者的关系
1、任何函数都有Prototype属性，它本身也是一个对象
2、构造函数也是函数，所以也有prototype属性，它本身也是一个对象，我们称它为实例的原型对象。
3、原型对象上的所有属性和方法 都会被实例对象继承。
4、任何对象都有constructor 属性，实例对象的constructor 属性指向它的构造函数。
5、原型也是对象，它也有constructor属性，它的constructor属性指向 构造函数。
6、任何一个对象都有一个proto属性，实例化对象的proto指向的是构造函数的原型。
7、原型对象的proto属性指向object
8、Object 的proto指向null
9、原型链最终指向null
原型和原型链的关系
1) 一个可以被复制的对象，通过复制原型可以创建一个一模一样的新对象，言外之意原型就是一个模板，在js中更准确的描述为对象原型。
2) 所有引用类型都有一个_proto属性，属性值是 一个普通对象。
3) 所有的函数都有一个prototype属性，属性值是一个普通对象。
4) 所有引用类型的proto属性指向它构造函数的prototype
5) 原型定义公共属性和方法，利用原型创建新对象的实例会共享原型的属性和方法。
****
原型链
1、原型链 是原型对象创建过程的记录，当访问一个对象的某个属性时，会先在这个对象本身的属性上去找，如果没有没有找到，则会去它（实例对象）的proto(原型)上查找，即构造函数的prototype。如果还没找到，就会在构造函数的prototype的proto中查找。
这样一层一层向上查找就会形成一个链式结构。
****
2、当查找一个对象的属性时，js会根据原型链向上查找对象的原型，直到找到给定属性为止，如果到达原型链的顶端依然没有找到指定的属性，就会返回undefined。
****
30.阻止冒泡的兼容写法是什么?
if(e.stopPropadation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
31.ajax
什么是ajax
Ajax 是一种数据请求的技术，可以实现无需刷新页面，即可请求不同数据的功能。它是一种编程技术，而非语言。
优点
1、局部刷新
2、优化浏览器和服务器之间的传输，，减少不必要的数据返回，减少带宽的占用。(带宽是指可以通过计算机网络或Internet连接一次发送的数据量。带宽量越大，在给定时间通过它传输的数据越多，那连接就会更快。)
3、ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器的压力。
缺点
1、ajax 不支持浏览器的back（返回）按钮
2、安全问题，ajax暴露了与服务器交互的细节。（name 密码）
3、对搜索引擎支持比较弱。
4、破坏了程序的异常机制。
5、不易调试。
应用场景
1、页面上懒加载更多数据
2、列表数据无刷新页面
3、表单离开焦点数据验证
4、搜索框提示文字下拉列表
原生ajax实现
(1) 设置ajax对象 var ajax = new XMLHttpRequest();
(2) 设置传递方式,传递地址,传递参数(遵循http协议格式) ajax.open(‘get/post’ , ‘请求地址url’ , ‘同异步(true/false)’);
(3) 发送ajax请求 ajax.send();
(4) 监听ajax状态与服务器的响应编码
ajax.onreadystatechange = function( ){
If(ajax.readyState == 4 && ajax.status == 200){
console.log(ajax.responseText);
}
}
如果出现post请求怎样设置请求头
ajax.setRequestHeader(“content-type” , “application/x-www-form-urlencoded”)
get和post请求的区别
1、效率
get 得到，从服务器获取数据（也可以上传数据）
post 给谁，可以向服务器发送请求和下载数据，效率没有get高
2、缓存
get 请求能够被缓存，默认请求方式也是有缓存
post 请求默认不会缓存
3、安全性
get 的所有的参数全部包装在url中，明文显示，且服务器的访问日志会记录，非常不安全
post 的url中只有资源的路径，不包含参数，参数封装在二进制的数据中，
服务器也不会记录参数，相对安全。所有涉及隐私的数据都要post传输。
4、数据量
http 协议中没有对get 和post 请求数据大小进行限定。
但是实际应用中他们通常受限于软硬件平台的设计和性能。
get:方法提交的数据在不同的浏览器和服务器不同，一般限制2-8k之间，更加常见的1k以内。
post: 方法提交的数据比较大，大小靠服务器的设定值限制，php默认是2M (具体看后端的开发文档)
ajax状态码
ajax运行状态的编码
方式： ajax.readyState
0: 请求未初始化
1： 服务器连接已建立
2： 请求已接受
3： 请求处理中
4： 请求已完成且响应已就绪。
浏览器状态码
当我们日常访问网站时得到的回应码。
方式：ajax.status
100 系列 请求的地址问题
200 系列成功
300 系列地址重定向
400 系列参数不合法
500 系列服务器端问题
200 - 服务器成功返回网页
404 - 请求的网页不存在
503 - 服务不可用
200: "OK"
404: 未找到页面
403: 权限不足
32.http和https的区别
由来:HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据加密传输，网景公司设计了SSL(Sercure Socket Layer)协议用于对HTTP协议传输的数据进行加密，从而诞生了HTTPS。
1、HTTPS更安全：HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议的信息明文传输安全；
2、HTTPS需要申请证书：HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费，费用大概与.com域名差不多，每年需要大约几十元的费用。而常见的HTTP协议则没有这一项；
3、端口不同：HTTP使用的是大家最常见的80端口，而HTTPS连接使用的是443端口；
4、安全性不同：HTTP的连接很简单，是无状态的。而HTTPS协议是SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全；
****
33.jQuery
1、$(this) 和 this 关键字在 jQuery 中有何不同
$(this)返回jQuery对象,可以方便调用jQuery方法;
this 在事件中代表元素,在函数中代表window,在对象方法中代表对象;
2、jquery怎么移除标签onclick属性(移除标签属性)
获取:$('div').attr('onclick');
删除:$('div').removeAttr('onclick');
设置:$('div').attr('onclick','text()')
3、jquery中addClass,removeClass,toggleClass的使用
$('div').addClass('box') 为匹配的元素添加指定的类名;
$('div').removeClass('box') 所有匹配的元素删除指定的类名或者删除指定类名的 值;
$('div').toggleClass('box') 匹配元素指定的类名,如果存在就删除,不存在就添加;
4、JQuery有几种选择器
**(1)基本选择器 class id element ***
(2)层次选择器 div p div>p div+p div~p
(3)基本过滤选择器
:first
:last
:even
:odd
:not()
:gt()
:lt()
(4)内容过滤选择器
:contains(text)
:has
:parent
:empty
(5)属性过滤选择器
[attr]
[attr=value]
[attr!=value]
…
(6)子元素过滤选择器
:nth-child()
:first-child
:last-child
:only-child
(7)表单选择器
input
:text
:password
:radio
:checkbox
:submit
(8)表单属性过滤选择器
:checked
:selected
:disabled
(9)可见性
:hidden
:visible
5、$(document).ready()方法和window.onload有什么区别
(1)书写个数不同
window.onload只能在页面中出现一次,否则会覆盖
$(document).ready()在页面中可以出现多个,不会覆盖
(2)执行时机不同
JS入口函数是在所有的文件资源加载完毕后才执行;(文件资源:页面文档,外部 js文件,外部css文件,图片…)
jQuery入口函数是在文档(dom)加载完成后就执行了;
6、jquery中 $ .get()提交和$.post()提交有区别吗
相同点:都是异步请求方式,获取服务器的数据
不同点:
(1)请求方式不同
$.get()方法使用get方法来进行异步请求;
$.post()方法使用post方法来进行异步请求;
(2)参数传递方式不同
get请求会将参数跟在url后进行传递;
post请求则是作为http协议的实体内容发送给web服务器,用户不可见;
(3)传输数据大小不同
get方式传输的数据大小不超过2kb;
post理论上无限制;
(4)安全性不同
get方式请求的数据会被浏览器缓存起来,暴露在页面的地址栏中,会有安全问 题;
post方式请求数据过程用户不可见;
7、jQuery的事件委托方法bind 、delegate、on之间有什么区别
bind('事件类型','事件处理程序')--主要是给元素绑定特定的事件;可以同时绑定多个 事件;不能给新增的元素绑定事件,必须等页面加载完毕才可以执行;
delegate('元素','事件类型','事件处理程序')--可以将事件绑定到最近的父级元素上; 可以选择最近的父级,就可以更快的实现冒泡,时间能在第一时间处理;也可以给新 增的元素绑定事件;
on('事件类型','元素','事件处理程序')--和事件监听语法相似,把监听事件绑定到指定 元素;可以给同一个元素绑定多个事件;
bind()绑定 unbind()解绑
on()绑定 off()解绑
delegate() 绑定 undelegate()解绑
****
8、jq的动画
show()显示 hide()隐藏 toggle()切换
slideUp()上隐藏 slideDown()下隐藏 slideToggle()切换
fadeIn()淡入 fadeOut()淡出 fadeToggle()切换 fadeTo(time,opacity)透明度
animate({'key':'value','key1':'value1',….},time,callback(回调函数));
stop();
9、jquery使用插入节点的方法,遍历节点的方法,操作样式的方法
插入节点的方法:
append() appendTo()
prepend() prependTo()
after() before()
遍历节点方法:
children() siblings() find() next() prev()
each(function(index,item){ });
forEach(function(item,index){ })
操作样式的方法:
css() addClass() removeClass() toggleClass()
****
10.在jQuery中$()是什么意思?
$()函数是jQuery()函数的别称,$()函数可以将任何对象包裹成jQuery对象,可以自定义jQuery对象上的多个方法;
11.jQuery优点?
jQuery是轻量级的框架;
强大的选择器;
出色的DOM操作封装;
可靠的事件处理机制;
完善的ajax;
丰富的插件支持;
出色的浏览器兼容;
开源(免费,共享);
34.正则
概念:正则就是为用户输入的内容设置一些相应的规则。
正则表达式（规则表达式）Regular Rxpression 简写为regex/regexp/RE
调用正则的三种方式
.test() 检测目标字符串中是否含有正则内容,若有返回true,否则返回false
.match() 全局匹配所有的满足正则表达式的内容,存入到数组,需要用修饰符去匹配
.exec() 匹配一次正则,若符合就把结果存入到数组
创建正则两种方式
字面量
var reg1 = /omg/;var str1 = 'omg';console.log(reg1.test(str1)); // true
构造函数
var reg2 = new RegExp('tmd');var str2 = 'tmd';console.log(reg2.test(str2)); // true
字符集
\d 数字
\D 非数字 \w 数字,字母,下划线,单词字符 \W 非单词字符(特殊字符) \s 空格字符 \S 非空格字符 \b 单词边界 \B . 任意单个字符(除了换行) [ ] 某个指定范围的若干字符 [^abc] 不匹配这个字符集中的任意一个(只能单独使用) [0-9] 匹配其中之一 [a-z] 小写字母 [A-Z] 大写字母 [A-z] 包含大小写 [选项1 | 选项2 | 选项3] 三个任选其一 量词-- c 表示字符串 -- n和m表示个数 c+ 至少有一个c c* 至少有0个c c? 至少有0/1个c c{n} 有n个c c{n,m} 有(n,m)个c c{n,} 至少有n个c c$ 以c结尾 ^c 以c开头 6(?=c) 6的后面紧跟c xxx(?!c) xxx后面没有紧跟c的字符集
常用正则表达式(实用)
一、校验数字的表达式
数字：^[0-9]*$
n位的数字：^\d{n}$
至少n位的数字：^\d{n,}$
m-n位的数字：^\d{m,n}$
零和非零开头的数字：^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})$
正数、负数、和小数：^(-|+)?\d+(.\d+)?$
有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$
非零的负整数：^-[1-9][]0-9"$ 或 ^-[1-9]\d$
非负整数：^\d+$ 或 ^[1-9]\d*|0$
非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
正浮点数：^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$
负浮点数：^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))$
浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$
校验字符的表达式
汉字：^[\u4e00-\u9fa5]{0,}$
英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符：^.{3,20}$
由26个英文字母组成的字符串：^[A-Za-z]+$
由26个大写英文字母组成的字符串：^[A-Z]+$
由26个小写英文字母组成的字符串：^[a-z]+$
由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
禁止输入含有~的字符：[^~]+
三、特殊需求表达式
Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+.?
InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$
手机号码：^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)
身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$
强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
日期格式：^\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)$
钱的输入格式：
有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$
这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
中文字符的正则表达式：[\u4e00-\u9fa5]
双字节字符：^\x00-\xff
空白行的正则表达式：\n\s*\r (可以用来删除空白行)
HTML标记的正则表达式：<(\S?)[^>]>.?|<.? /> ( 首尾空白字符的正则表达式：^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IPv4地址：((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}
代码：
1.自定义动画，实现让div一直旋转（div样式自定义）
div {
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 0, 20deg);
animation: name 3s linear infinite;
}
@keyframes name {
from {
transform: rotate3d(1, 1, 0, 0deg);
}
to {
transform: rotate3d(1, 1, 0, 360deg);
}
}
2.请自己封装一个rem的换算，实现网页元素尺寸等比缩放效果
function size(){
var doc = document.documentElement;
var w = doc.clientWidth;
if(w>750){
w = 750
}else{
doc.style.fontSize = w / 375 * 100+'px'
}
}
size();
window.onresize = function(){
size();
}
1rem == 100px;
3.点击按钮 实现 （1）视频音量的添加 、减少（2）点击按钮实现视频快进5秒、快退5秒
1)
btn[1].onclick =function(){
if(au.volume >=1 ){
au.volume = 1;
}else{
au.volume += 0.1;
}
}
btn[2].onclick =function(){
if(au.volume <= 0 ){
au.volume = 0;
}else{
au.volume -= 0.1;
}
}
2)
btn[3].onclick = function () {
au.currentTime += 5 }
btn[4].onclick = function () {
au.currentTime -= 5;
}
4.请使用canvas绘制五角星图案
var cvs = document.querySelector('#cvs');
var ctx = cvs.getContext('2d');
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(120,180);
ctx.lineTo(150,60);
ctx.lineTo(180,180);
ctx.lineTo(98,98);
ctx.lineWidth = '5';
ctx.strokeStyle = 'blue';
ctx.stroke();
ctx.fillStyle = 'red';
ctx.fill();
5.请利用flex 布局代码实现如图的效果（三点筛子）
.three{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content:space-around ;
}
.three>div{
width: 80%;
height: 30px;
display: flex;
}
.three_2{
justify-content: center;
}
.three_3{
justify-content: flex-end;
}
内容有限,需要完整版的评论区@我
