1、Div+css布局与table布局区别？
Table兼容性很好，IE下先加载表格后加载文字；table对老式浏览器兼容很好
Div+css是现在主流布局
2、数据类型
Undifined、number、nan、null、object、string、boolean、function
3、Iframe优缺点
原样展现网页，可以随意调用，方便内容修改，网页统一有致减少代码量，第三方加载快捷（框架结构，代码复杂移动端不能完全匹配）
模块化布局，百分百自适应；
4、Ajax加载（eval,parse）,提交
function Ajax(mode,Path,fnSucc) {
var xhr=null;
try{
xhr=new XMLHttpRequest();
}catch(e) {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(mode,Path);
if(mode=="get"){
xhr.send(null);
}
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
if(xhr.status==200){
fnSucc(xhr.responseText)
}
}
}
}
选项卡封装，事件监听
模态框
返回顶部；
// 吸顶盒
var tit = document.getElementById('nav_top');
//占位符的位置
var rect = tit.getBoundingClientRect();//获得页面导航条相对于浏览器视窗的位置
var inser = document.createElement('div');
tit.parentNode.replaceChild(inser,tit);
inser.appendChild(tit);
inser.style.height = rect.height + "px";
//获取距离页面顶端的距离
var titleTop = tit.offsetTop;
//滚动事件
document.onscroll = function(){
//获取当前滚动的距离
var btop = document.body.scrollTop||document.documentElement.scrollTop;
//如果滚动距离大于导航条据顶部的距离
if(btop>titleTop){
//为导航条设置fixed 固定定位
tit.className = 'nav_s fixed';
}else{
//移除fixed 恢复初始值
tit.className = 'nav_s';
}
};
Css和js延迟加载
匀速运动框架
正则匹配判断search
楼层跳跃
参数问题（实例）
数组问题
事件绑定事件
多个选项卡处理，循环嵌套
function tab_jf(c,d){
for(var i = 0; i < c.length; i++) {
c[i].index = i;
c[i].onclick = function(e) {
for(var j = 0; j < c.length; j++) {
c[j].className = "";
d[j].style.display = "none";
}
this.className = "on";
d[this.index].style.display= "block";
}
}
}
function jfq(a,b){
var oLi = document.getElementById(a).getElementsByTagName('a');
var oDiv = document.getElementById(b).getElementsByTagName('ul');
tab_jf(oLi,oDiv);
};
jfq('pil','tab_kk');
轮播切换（无缝，滑动，手风琴、电梯轮播、旋转木马、3D轮播）
无原理平滑过度，图片相接。三层盒子布局；
//今日游戏内活动 自动轮播
var lunbo=document.getElementById('lunbo');
var Prev=lunbo.children[0];
var Next=lunbo.children[1];
var oUter=lunbo.children[2];
var link=oUter.children[0];
var oA=link.children;
var index = 0;
var lock = true;//lock开关锁思想，防止动画打乱
Prev.onclick=function(){
if(lock){
lock = false;
index--;
if(index<0){
index = 5;
//判断：当图片动画运动到最后头部开始位置的时候，立马将图片不以动画的方式(闪现到尾部最后的位置。)
link.style.left = 6 * -430 + 'px';
}
var targetValue = index * -430;
var temp = index;
animate(link,{left:targetValue},10,function(){
lock = true;
});
}
}
Next.onclick=function(){
if(lock){
lock = false;
index++;
var targetValue = index * -430;
//用第三方变量temp接收index的值
var temp = index;
if(index==6){
index = 0;
}
animate(link,{left:targetValue},10,function(){
if(temp==6){
//判断：当图片动画运动到最后尾部的时候，立马将图片不以动画的方式(闪现到开始位置。)
link.style.left = 0 + 'px';
}
//最后一步：将lock赋值true；将锁打开
lock = true;
});
}
}
lunbo.onmouseenter = function(){
clearInterval(flag)
};
lunbo.onmouseleave = function(){
autoPlay();
};
var flag;//定时器部分
function autoPlay(){
flag = setInterval(function(){
Next.onclick();
},2000);
}
autoPlay();
//版本中心 单个轮播
var Vbox=document.getElementById('Vbox');
var Spre=Vbox.children[0];
var Snxt=Vbox.children[1];
var oUT= Vbox.children[3];
var Ver=oUT.children[0];
var A_v=Ver.children;
Ver.innerHTML += Ver.innerHTML;
var index = 0;
var fs = true;
Spre.onclick=function(){
if(fs){
fs = false;
index++;
var targetValue = index * -132;
var temp = index;
if(index==30){
index = 0;
}
animate(Ver,{left:targetValue},10,function(){
if(temp==30){
Ver.style.left = 0 + 'px';
}
fs = true;
});
}
};
Snxt.onclick=function(){
if(fs){
fs = false;
index--;
if(index<0){
index = 5;
Ver.style.left = 30 * -132 + 'px';
}
var targetValue = index * -132;
var temp = index;
animate(Ver,{left:targetValue},10,function(){
fs = true;
});
}
};
Css3效果的使用；图片放大（transition：scale（）），阴影效果（box-shaw:;）、渐变效果、hover效果、时间效果；animate.css使用；
随机数的使用（抽奖）
定位的使用；（子绝父相，固定定位）;绝对居中
（1）.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
（2）将内容块设置为position:fixed;并设置一个较大的z-index层叠属性值。
.Absolute-Center.is-Fixed {
position: fixed;
z-index: 999;
}
（3）响应式/自适应(Responsive)
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 200px;
max-width: 400px;
padding: 40px;
}
文件夹正规放置;
代码标注；
js返回上一步；
对于H5新标签的使用；
网页兼容问题；三目运算符。
代码调试；
服务器使用；
人事问题：服从工作调剂吗?对外派同意吗？工资期望？
Call,apply?
Call（this,1）apply(this,[1,2,3])
唯一区别是apply接受的是数组参数，call接受的是连续参数。
this引用，引用的是一个对象，对象不同或函数调用方式的不同，this引用会根据代码的上下文语境自动改变引用对象的特性。
引用规则
1，在最外层代码中，this引用引用的是全局对象（windows）
2，在函数内，this引用根据函数调用方式不同而不同
1）在构造函数中，this引用的对象是构造函数生成的对象
2）方法调用，this引用的是接受方对象
3）appl和call调用，引用的对象由两个函数的参数指定
4）其他方式调用，引用的是全局对象
面向对象this指向（面向对象三大特征继承、封装、多态）
① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！
② this指向的，永远只可能是对象，不可能是函数！！
③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。
new Tabswitch('parts');
function Tabswitch(id){
var _this=this;
var Pnew=document.getElementById(id);
var part_news=Pnew.children[1];
this.tab_A=part_news.getElementsByTagName('a');
this.ul_News=Pnew.getElementsByClassName('ul-news');
for(var i=0;i<this.tab_A.length;i++){
this.tab_A[i].index = i;
this.tab_A[i].onmouseover=function(){
_this.fnClick(this);
};
}
}
Tabswitch.prototype.fnClick=function(tab){
for(var i=0;i<this.tab_A.length;i++){
this.tab_A[i].className='';
this.ul_News[i].style.display='none'
}
tab.className='on';
this.ul_News[tab.index].style.display='block'
};
3.2this指向的规律(与函数的调用方式息息相关！)
① 通过函数名()调用的，this永远指向window
func(); // this--->window
//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。
② 通过对象.方法调用的，this指向这个对象
// 狭义对象
var obj = {
name:"obj",
func1 :func
};
obj.func1(); // this--->obj
//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。
// 广义对象
document.getElementById("div").onclick = function(){
this.style.backgroundColor = "red";
}; // this--->div
//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个div控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个div对象。
③ 函数作为数组的一个元素，用数组下标调用，this指向这个数组
var arr = [func,1,2,3];
arr[0](); // this--->arr
//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。
④ 函数作为window内置函数的回调函数使用，this指向window。比如setTimeout、setInterval等
setTimeout(func,1000);// this--->window
//setInterval(func,1000);
//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。
⑤ 函数作为构造函数，使用new关键字调用，this指向新new出的对象
var obj = new func(); //this--->new出的新obj
//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。
3.3关于this问题的面试题
var fullname = 'John Doe';var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname()); // 函数的最终调用者 obj.prop
var test = obj.prop.getFullname;
console.log(test()); // 函数的最终调用者 test() this-> window
obj.func = obj.prop.getFullname;
console.log(obj.func()); // 函数最终调用者是obj
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());// 函数最终调用者数组
重点说明this指向问题
最基础的谁绑定事件this指向谁
call和apply是Function对象的方法
方法的定义
call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
简单来说就是有如下不同
func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
回调函数（callback）
function a(callback){
alert('a');
callback();//或者是 callback（）, callback.apply(this)
}
function b(){
alert('b');
}
//调用
a(b);
但是多数时候回调函数是有参数的所以应该向下面这样来定义
function a(callback){
alert('a');
callback.call(this,'d');//或者是 callback（）, callback.apply(this)
}
//调用
c(function(e){ alert(e); });
模块化
web开发中将项目的实现划分为许多模块，
模块其实就是将功能相关的代码封装在一起，方便维护
，重用；模块之间通过API进行重组。
原型和原型链
原型（prototype允许您向对象添加属性和方法）也是一个对象，通过原型可以实现对象的属性继承
对于所有的对象，都有__proto__属性，这个属性对应该对象的原型.
对于函数对象，除了__proto__属性之外，还有prototype属性，当一个函数被用作构造函数来创建实例时，该函数的prototype属性值将被作为原型赋值给所有对象实例（也就是设置实例的__proto__属性）
因为每个对象和原型都有原型，对象的原型指向原型对象，而父的原型又指向父的父，这种原型层层连接起来的就构成了原型链。
当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止，到查找到达原型链的顶部（也就是 Object.prototype），如果仍然没有找到指定的属性，就会返回 undefined。
Spliit和join
split() 方法用于把一个字符串分割成字符串数组。
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
兼容网页(https://www.cnblogs.com/-5012/p/5634096.html)
第一种方法：使用Google的html5shiv包（推荐）
首先你要引用下面是引用Google的html5.js文件，好处就不说了：
1 <!--[if IE]>
2 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
3 < ![endif]-->
将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）
第二种方法：Coding JavaScript
1 <!--[if lt IE9]>
2 <script>
3 (function() {
4 if (!
5 /*@cc_on!@*/
6 0) return;
7 var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
8 var i= e.length;
9 while (i--){
10 document.createElement(e[i])
11 }
12 })()
13 </script>
14 <![endif]-->
但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局
1 /*html5*/
2 article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?
我们可以参照facebook的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
1 <!--[if lte IE 8]>
2 <noscript>
3 <style>.html5-wrappers{display:none!important;}</style>
4 <div class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
5 </div>
6 </noscript>
7 <![endif]-->
这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。
浏览器 事件机制（捕获冒泡）
CSS省略：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
项目的优化？
减少网站的HTTP请求数。优化图片(使用精灵图)、合并压缩脚本压缩js、css、使用CDN托管，DNS优化（减少域名解析时间增多域名提高并发）、缓存的使用。
null，undefined 的区别？
Json理解
利用正则表达式提取字符中的字母和数字？
str = str.replaceAll("[^a-z^A-Z^0-9]", "");
Ajax请求总共有八种Callback
onSucce
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onExceptio
JS中避免命名冲突（项目命名规则）：
使用匿名函数将包含脚本。让变量的作用域控制在匿名函数里面。
使用一个对象类型的变量作为全局变量。
使用命名空间+对象型全局变量
定义命名空间函数，在需要使用命名空间的匿名函数中调用
函数封装
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>全局变量GLOBAL中添加定义命名空间的函数</title>
<script>
//hash全局变量
var GLOBAL={};
// str :表示要生成的命名空间，例如: GLOBAL.A.name 或是 A.name
GLOBAL.namespace=function(str){
var arr=str.split(".");
var o=GLOBAL;
var i= (arr[0]=="GLOBAL"?1:0 ); //如果str中的第一部分为GLOBAL的话，命名空间从第二个开始计算
for( ;i<arr.length;i++){
o[arr[i]]=o[arr[i]]||{};
o=o[arr[i]];
}
}
</script>
<script>
( function(){
//程序员a写的代码
GLOBAL.namespace("A.person"); //程序员a定义了自己的命名空间A,并在Ａ下面定义了子命名空间person
GLOBAL.A.person.name="zy";
GLOBAL.A.person.age=22;
alert( GLOBAL.A.person.name +"\t"+ GLOBAL.A.person.age);
})();
</script>
</head>
<body>
<script>
( function(){
//程序员b写的代码:定义自己的命名空间
GLOBAL.namespace("B.student"); //程序员a定义了自己的命名空间B,并在B下面定义了子命名空间student
GLOBAL.B.student.name="lisi";
GLOBAL.B.student.age=33;
alert( GLOBAL.B.student.name +"\t"+ GLOBAL.B.student.age);
})();
</script>
<script>
( function(){
//程序员c写的代码
alert( "程序员c操作A命名空间下的变量:"+ GLOBAL.A.person.name +"\t"+ GLOBAL.A.person.age);
alert( "程序员c操作B命名空间下的变量:"+ GLOBAL.B.student.name +"\t"+ GLOBAL.B.student.age);
})();
</script>
以上体现的就是合理使用命名空间解决变量冲突的问题。
</body>
</html>
简述事件冒泡和事件捕获，如何阻止事件冒泡？
事件冒泡指的是当前的目标元素触发事件的发生，事件在一次向祖先元 素传播，在祖先元素上触发相同类型的事件。
事件捕获过程与事件的冒泡阶段是一个相反的阶段，即事件由祖先元素向子元素传播。
在IE浏览器中通过e.cancleBubble=true,阻止事件冒泡。
在除IE以外其他的浏览器中通过e.
()方式阻止事件的冒泡。在 支持该方法的浏览器中还有一个方法stopimmediatePropagation()，该方法不仅会组织事件向祖元素的冒泡，同时也会阻止同一个节点 上同一事件的其他的事件处理程序的执行，该方法比前者阻止的更彻底。
阻止事件的默认行为：
1、在IE浏览器中通过e.returnValue=false
2、在其他浏览器中调用方法e.preventDefault();
3、在jQuery中通过在事件回调利用return false（其实质利用了上面的两种方式）实现阻止事件的默认行为
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。
js有哪些内置对象
Object是所有JS中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Arguments、Math、Date、RegExp、Error