最近更新时间：2017年7月19日09:50:06javascript
《个人博客地图》css
IT行业发展迅速而且热火朝天，每一年都呈现人才紧缺现象，同时高薪岗位更是数不胜数，但要想过五关斩六将进入大厂，就须要谦虚学习基础知识，不断总结经验。企业的竞争，本质是人才的竞争，优秀的人才进入优秀的企业，是符合社会发展规律不变的定律。
一、CSS选择器有哪些？它们的优先级是怎样的？
选择器类型：id选择器（ # myid）、类选择器（.myclassname）、标签选择器（div, h1, p）、相邻选择器（h1 + p）、子选择器（ul > li）、后代选择器（li a）、通配符选择器（ * ）、属性选择器（a[rel = "external"]）、伪类选择器（a:hover, li:nth-child）
选择器优先级：就近原则-同权重状况下样式定义最近者为准;载入样式以最后载入的定位为准;
优先级为:!important > id > class > tag，同时important 比 内联优先级高
权重的规则：标签的权重为1，class的权重为10，id的权重为100；若是权重相同，则最后定义的样式会起做用
二、列出px、em、rem三者的区别，以及各自的适应场景
px：像素，相对长度单位，相对于显示器屏幕分辨率而言；
em：相对长度单位，相对于当前对象内的文本字号，若是当前对象没有设置字体尺寸，则相对于浏览器默认字号
rem：，root em，相对长度单位，相对于HTML根元素的字号尺寸
三、写出一个两列等高，左列固定宽度为200px，右列自适应浏览器的布局
父元素flex布局，左侧子元素flex-basis:200px，右侧子元素flex:1；html
更多可参考个人文章《CSS面试集锦》前端
四、你作的页面在哪些浏览器测试过？常见浏览器的内核分别是什么？java
浏览器内核：IE-Trident，Firefox-Gecko，Opera-Blink，Chrome-Webkit，Safari-Webkit，360-兼容模式Trident+极速模式Webkit
五、一个圆心坐标为(0,0)的圆，半径r=10，求45°方向的点坐标(x,y)node
x = Math.cos(Math.PI/4)*rweb
y = Math.sin(Math.PI/4)*r
六、定义一个方法，用于将string中的每一个字符之间加一个空格，并输出面试
如：'hello' -> 'h e l l o'ajax
function joinSpace(str){chrome
return str.split('').join(' ')
}
七、获取JavaScript对象键名
var obj = {name: 'wan',age: 20, sex: 'male'};
var objKey = [];
for(var item in obj){
if(obj.hasOwnProperty(item)){
objKey.push(item);
}
}
//for(var item in obj){
// objKey.push(item);
//}
console.log(objKey);//["name", "age", "sex"]
八、获取页面html标签的个数
var elementArr = document.getElementsByTagName('*')
var tagNameArr = []
for(var i= 0,len=elementArr.length;i<len;i++){
if(tagNameArr.indexOf(elementArr[i].tagName) == -1){
tagNameArr.push(elementArr[i].tagName)
}
}
详解：
document.getElementsByTagName('html');返回文档的html对象集合,typeof为object
document.getElementsByTagName('*');返回文档的全部元素集合，是一个对象
document对象属性和方法：
document.URL;//返回文档完整的URL
document.referrer;//返回本文档的引用地址，载入当前文档的文档的URL
document.cookie;//设置或返回与当前文档有关的全部cookie
document.getElementsByTagName('html')[0];返回文档的html元素对象，元素节点有如下属性和方法：
element.addEventListener();//向指定元素添加事件句柄
element.appendChild();//为元素添加一个新的子元素
element.attributes();//返回元素的属性数组
element.tagName();//返回字符串类型的大写元素名
九、DOM事件流包括哪几个阶段
事件流，从页面接收事件的顺序；IE的事件流叫作事件冒泡；Netscape的事件流叫作事件捕获；
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
document.addEventListener(type, handler, false);//true事件捕获模式，false事件冒泡模式
十、事件委托的实现原理是什么，优缺点
参考个人文章《web页面性能优化方案汇总》
原理：事件冒泡，子元素的单机事件会冒泡到顶层元素document对象上
优势：DOM操做少，只获取一个顶层DOM元素；减小事件注册，节省内存占用；简化了DOM节点更新时的事件更新
缺点：不支持不冒泡的事件；出现不指望的事件误判
适合采用事件委托技术的事件包括：click、mousedown、mouseup、keydown、keyup、keypress
不冒泡的事件：blur、focus、load、unload
十一、call和apply的区别
语法一：func.call(thisObj,a,b,c...) || func.apply(thisObj,array)
定义：将函数（方法） func 绑定到对象 thisObj 上去运行，改变了函数func 原有的 this 的指向，this指向了对象thisObj（js中的函数是对象，函数名是对 Function 对象的引用）
语法二：obj.call(thisObj,a,b,c...) || obj.apply(thisObj,array)
定义：将对象 obj 的属性和方法添加到对象 thisObj 上，即 thisObj 继承了 obj
区别：call的参数个数，从第二个开始 大于等于 0个，为单个变量；apply的参数只有两个，第二个参数为一个数组，即array = [a,b,c...]；
实例一：借调方法，对象sub借调对象add的方法add（函数也是对象）
function add(a,b){return a+b}
function sub(a,b){return a-b}
add.call(sub,3,1)//4
sub.call(add,3,1)//2
add.call(sub,3,1) === add(3,1)
实例二：改变this指向
function a(){console.log(this)}
var obj = {}
a()//window
a.call()//window
a.call(obj)//obj
实例三：实现继承
function Animal(name){this.name=name;this.showName=function(){alert(this.name)}}
function Cat(name){
Animal.call(this,name); //将Animal对象的属性和方法应用到Cat上，所以Cat继承了Animal的全部属性和方法
}
var cat = new Cat(“Black Cat”);
cat.showName(); //Black Cat
实例四：多重继承
function add(a,b){return a+b}
function sub(a,b){return a-b}
function calc(a,b){
add.call(this)
sub.call(this)
}
十二、为下面的类增长一个方法method1
var A = function(){}
A.prototype.method1 = function(a,b){return a+b}
1三、typeof 和 instanceof 操做的用法、实例
typeof操做符判断基本数据类型；instanceof检测对象的继承关系，左操做数是对象，右操做数是构造函数
console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof 'a');//string
console.log(typeof 1);//number
console.log(typeof true);//boolean
console.log(typeof []);//object
instanceof能够准确判断 左对象 是 右对象 的实例
console.log([] instanceof Array);//true
console.log('a' instanceof String);//false
console.log(/a/ instanceof RegExp);//true
console.log([] instanceof Object);//true
1四、html元素添加事件的方法
原生方法：
①<input type='buttom' value='click me' onclick='try{showMessage()}catch(ex){}'>
var btn = document.getElementById('myBtn')
②btn.onclick = function(){}
③btn.addEventListener('click',function(){},false)//false在冒泡阶段调用事件处理程序
IE：btn.attachEventListener('click',function(){},false)
1五、js中改变this指向的方法
call、apply、bind，this老是指向调用它的对象
new function01（），改变了构造函数this的指向，指向建立的对象
1六、用js代码完成，body里面生成100个div，内容是1-100自身序号，颜色按照红、黄、蓝、绿交替变色，10行10列
1七、不定宽高的img在固定宽高的容器内水平垂直居中，写出html和css
1八、清除浮动的原理和实现方法
1九、实现Parent类和Child类，并创建Parent和Child的继承关系
function Parent(){
this.surname = 'wan';
this.work = function(){console.log('i like work')}
}
function Child(){}
原型链继承：Child.prototype = new Parent()
实例化：let person = new Child();
console.log(person.surname);//wan
person.work();//i like work
构造函数继承：function Child(){Parent.call(this)}
组合继承：
function Child(){
Parent.call(this);//继承属性
}
Child.prototype = new Parent();//继承方法
原型式继承：
function object(obj){
function Func(){};
Func.prototype = obj;
return new Func();
}
var Child = object(Parent);
寄生式继承：
寄生组合式继承：
20、页面的三种弹窗
alert警告框；confirm确认框；prompt提示框
2一、rgba()和opacity的透明效果有什么不一样
代码上的不一样：
#out1{width: 10rem;height: 10rem;opacity: 0.2;background: #fda247;}
#out2{width: 10rem;height: 10rem;background: rgba(253,162,71,0.2);margin-top: 1rem;}
效果上的不一样：opacity方案，子元素文字内容同时透明；rgba方案，子元素内容不透明
2二、解释原型和原型链
原型：即对象原型，原型对象上定义方法和属性的目的是为了被子类继承和使用。原型链的造成真正是靠__proto__ 而非prototype
原型链：每一个对象都有原型，对象的原型指向原型对象，即子对象的原型指向父对象，父对象的原型指向爷爷对象，这种原型层层链接起来的就构成了原型链。
2三、ajax中get请求与post请求的区别
get请求会将参数跟在url后进行传递，而post请求则是做为http消息的实体内容发送给web服务器，可是这种区别对用户是不可见的;
使用Get请求发送数据量小,Post请求发送数据量大;
get安全性很是低，post安全性较高;
在如下状况中，请使用 POST 请求：没法使用缓存文件（更新服务器上的文件或数据库）；向服务器发送大量数据（POST 没有数据量限制）；发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
若符合下列任一状况，则用GET方法：请求是为了查找资源，HTML表单数据仅用来帮助搜索。请求结果无持续性的反作用。收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。
2四、下降页面加载时间的方法
参考个人文章《web页面性能优化方案汇总》
2五、jQuery为DOM元素绑定点击事件的方法和区别
.click(function(){})
.bind({'click mouseleave',function(){}},{'click mouseleave',function(){}}) //在.bind()绑定事件的时候，这些元素必须已经存在。
.on() //为动态绑定事件
.one("click", function() {alert("This will be displayed only once.");});//绑定一个事件，而且只运行一次，而后删除本身，
2六、使用原生js为如下li实现事件委托，点击后打印对应的node-type属性值
<ul id="test">
<li node-type="1">b</li>
<li node-type="2">a</li>
<li node-type="3">t</li>
</ul>
var ele = document.getElementById('test');
ele.addEventListener('click',function(e){
var value = e.target.attributes[0].nodeValue;
console.log(value);
},false)
2七、函数节流定义、做用、示例
函数节流：某些代码不能够在没有间断的状况下连续重复执行，不只消耗内存大、占用CPU时间长，同时还会形成不指望的后果，必须采起节流手段；
基本思想：第一次调用函数，建立一个定时器，在指定的时间间隔后运行代码；第二次调用，清除前一次的定时器并设置另外一个；
目的：只用在执行函数的请求中止了一段时间以后才执行；
var processor = {
timeoutId: null,
performProcessing: function(){
//执行的代码
},
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},500);
}
}
processor.process();
在微信小程序开发中，scroll-view标签用于建立可滚动的列表区域，这个属性能够绑定用户滚动到列表底部的事件，以下：<scroll-view scroll-y bindscrolltolower="bottom"></scroll-view>，可是，页面到达底部以前的临界点，这个事件会重复触发无数次，致使向后台请求分页数据无数次。此时，能够采用函数节流技术；
方案二：
var lastTime = Date.now();
if(Date.now() - lastTime > 20000)}{
lastTime = Date.now();
do something...
//时间间隔2s才能执行的方法
}
2八、开发过程当中如何调试抓包（http、https）
pc端：chrome浏览器-Network
手机的通讯包：Fiddler是一个http协议调试代理工具，它可以记录并检查全部你的电脑和互联网之间的http通信，设置断点，查看全部的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些均可以让你胡乱修改的意思）。 Fiddler 要比其余的网络调试器要更加简单，由于它不只仅暴露http通信还提供了一个用户友好的格式。
2九、http状态码
1信息，2成功，3重定向，4客户端错误，5服务器错误
302请求的资源被临时移动；303查看其余地址；304请求的资源未修改，读取缓存资源；403请求被服务器拒绝；404没法找到资源；500服务器内部错误；502无效请求
30、常见的兼容性问题，列举三种
所谓的浏览器兼容性问题，是指由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示效果不统一的状况。在大多数状况下，咱们的需求是，不管用户用什么浏览器来查看咱们的网站或者登录咱们的系统，都应该是统一的显示效果。因此浏览器的兼容性问题是前端开发人员常常会碰到和必需要解决的问题。
html，H5新标签低版本浏览器没法解析；img标签的alt属性不一样浏览器解析不一样
css，margin和padding属性不一样浏览器的初始值不一样；font-size在chrome浏览器中最小字体是12px
js，标准的时间绑定方法为addEventListener，IE下是attachEvent
3一、ajax的原生js过程
参考个人文章《AJAX-先后端开发的纽带》
3二、页面中如何响应鼠标点击并提取点击坐标
document.onclick = clickStat;
function clickStat() {
var e = arguments[0] || window.event,x = '',y = '';
if(e.clientX || e.clientY){
x = e.clientX;
y = e.clientY;
}else{//兼容ie
x = e.clientX + document.body.scrollLeft - document.body.clientLeft;
y = e.clientY + document.documentElement.scrollTop;
}
console.log(x,y)
}
3三、js捕获离开（刷新、关闭、后退）页面事件
onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面仍是离开当前页面。对话框默认的提示信息根据不一样的浏览器有所不一样，标准的信息相似 "肯定要离开此页吗？"。该信息不能删除。但你能够自定义一些消息提示与标准信息一块儿显示在对话框。
注意： 若是你没有在 <body> 元素上指定 onbeforeunload 事件，则须要在 window 对象上添加事件，并使用 returnValue 属性建立自定义信息。
window.onbeforeunload = function(){
setTimeout(function(){console.log('cancel');},1000);
return '肯定离开？'
}
3四、ajax请求时，如何解析JSON数据
eval();//此方法不推荐
eval( '(' + jsonDate + ')' );
JSON.parse();//推荐方法
JSON.parse( jsonDate );
eval();方法解析的时候不会去判断字符串是否合法，并且json对象中的js方法也会被执行，这是很是危险的；
3五、原生js实现get请求
//原生js实现ajaxget请求
function originAjax(){
var xhr;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200) {
//xhr.responseText:{isSuccess:1}
if(xhr.responseText.isSuccess == 1){
console.log('request success')
}else{
console.log('request err')
}
}
}
xhr.open("GET","http://192.166.65.131?code=10",true);//true 异步
xhr.send();//xhr.send(string);string仅用于 POST 请求
}
3六、css实现，鼠标放在一个div上时该元素在2s内旋转180°
#lamp{
width: 400px;
height: 40px;
background: #ff0000;
}
#lamp:hover{
animation: rotate 2s;
-webkit-animation: rotate 2s; /* Safari and Chrome */
}
@keyframes rotate
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}
@-webkit-keyframes rotate /* Safari and Chrome */
{
from {transform: rotate(0deg);}
to {transform: rotate(180deg);}
}
3七、定义一个类的私有属性和公有属性
function Person(){
var sex = 'man';//var 私有
this.surnname = 'wan';//this 公有
}
3八、