一个盒子的宽高为屏幕的一半，要垂直居中于屏幕
万能居中法 定位跟 CSS3 transform:translate(x,y) 结合
代码：http://js.jirengu.com/kirayumafu/1/edit?html,css,output
页面：http://js.jirengu.com/yimovemoho
图片水平垂直居中法
父级：position:relative;
子元素：
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
https://jsbin.com/betijaloke/2/edit?html,css,js,output
hover特效
http://js.jirengu.com/putarixiwu/2/edit
1、什么是盒模型
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
盒模型.png
W3C标准中padding、border所占的空间不在width,height范围内，IE的盒模型width,height包括content尺寸 + padding + border;
W3C标准 width = content尺寸
IE的盒模型 width = content尺寸 + padding + border;
2、什么是CSS Hack
https://www.w3cschool.cn/css3/question-10231625.html
以下是引自百度百科的定义
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
注意： 我们通常主要考虑的浏览器有IE6、IE7、IE8、谷歌浏览器（chrome）、火狐（Mozilla Firefox）即可，至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核，所以只需要兼容以上浏览器即可兼容TT傲游浏览器。
CSS Hack常见的有三种形式：
CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
1、属性级Hack：比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。
2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
CSS<wbr>Hack技术介绍及常用的Hack技巧集锦
3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
3、简述同步和异步的区别
1.从CPU方面
同步的代码, 在很多情况下, CPU其实是在等待中度过的, 比如等待一个网络连接, 等待MySQL服务器的数据返回
异步的代码, 就是把这些等待的时间给充分利用起来了, 把网络连接, 访问数据库这种耗时的工作时都在注册一个callback或者event之后切换出来, 让CPU先去干别的活(例如响应别的请求), 当网络连接,数据库返回结果时再回来执行刚才的callback中的代码
异步的代码可以大大的提升系统的容量上限, 因为充分利用了空闲的CPU时间, 但是对于单个的请求的性能提升帮助比较有限 (除非你的单个请求大量依赖这种IO操作)
2.javascript是单线程
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。于是就有一个概念——任务队列。如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。于是JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。
于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。
具体来说，异步运行机制如下：
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
4、js怎么添加、移除、移动、复制、创建和查找节点？
http://blog.csdn.net/qi1271199790/article/details/53869508
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
1.创建元素节点
document.createElement() 方法 用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点
1 var div = document.createElement("div"); //创建一个div元素
2 div.id = "myDiv"; //设置div的id
3 div.className = "box"; //设置div的class
创建元素后还要把元素添加到文档树中
2.添加元素节点
appendChild() 方法 用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点
1 var ul = document.getElementByIdx("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML = "项目四"; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾
appendChild() 方法还可以添加已经存在的元素，会将元素从原来的位置移到新的位置
1 var ul = document.getElementById("myList"); //获得ul
2 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
insertBefore() 方法，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点
1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.lastChild); //把li添加到ul的最后一个子节点（包括文本节点）之前
1 var ul = document.getElementById("myList"); //获得ul
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前
添加后:
3.移除元素节点
removeChild() 方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了
1 var ul = document.getElementById("myList"); //获得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
1 var ul = document.getElementById("myList"); //获得ul
2 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
3 ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异
4.替换元素节点
replaceChild() 方法，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点
1 var ul = document.getElementById("myList"); //获得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
1 var ul = document.getElementById("myList"); //获得ul;
2 var li = document.createElement("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5.复制节点
cloneNode() 方法，用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
1 var ul = document.getElementById("myList"); //获得ul
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制
5、如何消除一个数组里面重复的元素
1.遍历数组法
最简单的去重方法， 实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码，源码如下：
// 最简单数组去重法function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 if (n.indexOf(array[i]) == -1) n.push(array[i]); } return n;}
// 判断浏览器是否支持indexOf ，indexOf 为ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持if (!Array.prototype.indexOf){ // 新增indexOf方法 Array.prototype.indexOf = function(item){ var result = -1, a_item = null; if (this.length == 0){ return result; } for(var i = 0, len = this.length; i < len; i++){ a_item = this[i]; if (a_item === item){ result = i; break; } } return result; }}
2.对象键值对法
该方法执行的速度比其他任何方法都快， 就是占用的内存大一些；实现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增该键并放入新数组。注意点： 判断是否为js对象键时，会自动对传入的键执行“toString()”，不同的键可能会被误认为一样；例如： a[1]、a["1"] 。解决上述问题还是得调用“indexOf”。
// 速度最快， 占空间最多（空间换时间）function unique2(array){ var n = {}, r = [], len = array.length, val, type; for (var i = 0; i < array.length; i++) { val = array[i]; type = typeof val; if (!n[val]) { n[val] = [type]; r.push(val); } else if (n[val].indexOf(type) < 0) { n[val].push(type); r.push(val); } } return r;}
3.数组下标判断法
还是得调用“indexOf”性能跟方法1差不多，实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉。否则存入结果数组。
function unique3(array){ var n = [array[0]]; //结果数组 //从第二项开始遍历 for(var i = 1; i < array.length; i++) { //如果当前数组的第i项在当前数组中第一次出现的位置不是i， //那么表示第i项是重复的，忽略掉。否则存入结果数组 if (array.indexOf(array[i]) == i) n.push(array[i]); } return n;}
4.排序后相邻去除法
虽然原生数组的”sort”方法排序结果不怎么靠谱，但在不注重顺序的去重里该缺点毫无影响。实现思路：给传入数组排序，排序后相同值相邻，然后遍历时新数组只加入不与前一值重复的值。
// 将相同的值相邻，然后遍历去除重复值function unique4(array){ array.sort(); var re=[array[0]]; for(var i = 1; i < array.length; i++){ if( array[i] !== re[re.length-1]) { re.push(array[i]); } } return re;}
5.优化遍历数组法
源自外国博文，该方法的实现代码相当酷炫；实现思路：获取没重复的最右一值放入新数组。（检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）
// 思路：获取没重复的最右一值放入新数组function unique5(array){ var r = []; for(var i = 0, l = array.length; i < l; i++) { for(var j = i + 1; j < l; j++) if (array[i] === array[j]) j = ++i; r.push(array[i]); } return r;}
6、js中的callee和caller的作用
callee
callee是对象的一个属性，该属性是一个指针，指向参数arguments对象的函数
首先我们来写个阶成函数：
function chen(x){if (x<=1) {return 1;} else{return xchen(x-1);};};
从这个函数中可以看出来，用到了递归函数，要是改变了函数名，里面的函数名也要随着改变，这样很不方便所以我们用callee来试试
function chen(x){if (x<=1) {return 1;}else{return xarguments.callee(x-1);};};
我们来分析一下为什么这样写：根据callee的定义，可以看出来callee是arguments对象的一个属性，指向arguments对象的函数，这个函数就是chen（chen=arguments.callee）,这样解释应该可以理解了吧。
caller
caller是函数对象的一个属性，该属性保存着调用当前函数的函数的引用（指向当前函数的直接父函数）
先来个例子吧
function a(){b();};function b(){alert(b.caller);};a(); //结果就是弹出函数a和内容
我们来解释一下吧，首先函数b的属性caller调用当前函数b的函数引用a（就是指向当前函数b的父函数a），所以结果就是弹出 function a(){ b();};
那么了解了caller和callee，那么可以不可以将二者结合在一起来使用呢
function b(){alert(b.caller);};
从这个代码可以看出b函数中调用了b函数名，这样当函数名改变时就很不方便，我们需要替换里面的那个b
前面我们知道用什么方法可以指向当前对象,下面我们就来修改一下：
(function a(){b();})();function b(){alert(arguments.callee.caller);};
从代码中可以看出我们用arguments.callee代替了b函数，所以解决了一下麻烦。。。。。
7、希望获取到页面中所有的checkbox怎么做？
var domList = document.getElementsByTagName(‘input’) // checkbox属于input，所以通过getElementsByTagName即标签名获取所有的input数组，包含文本框text，单选按钮radio，复选框checkbox等等
var checkBoxList = []; // 定义一个存储checkbox的空数组
var len = domList.length; //缓存到局部变量 // 第一步获取的数组的长度
while (len--) { //使用while的效率会比for循环更高 // 开始循环判断
if (domList[len].type == ‘checkbox’) { // 如果类型为checkbox即为题目所需的复选框
checkBoxList.push(domList[len]); // 就把那个元素加入到上面定义的数组中
}
}
8、H5的新特性
- 用于绘画 canvas 元素。
- 用于媒介回放的 video 和 audio 元素。
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除。 - 语意化更好的内容元素，比如 article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search。
网友评论