1、如何实现点击文字选中checkbox？
答案：
给文字设置label标签，用for属性关联复选框的id属性
2、cookie、session分别用来做什么的，有什么关系？
答案：
cookie是在客户端保存信息，常常用来验证用户的登录信息，保存购物网站的购物车信息等。
cookie用来在客户端存储用户信息，session用来在服务器端存储用户数据，均可用于户跟踪用户状态。
由于存放在服务器端，session较存放在客户端的cookie来说更为安全，用户验证等重要信息一般存放于session，但cookie也可以加密来提高安全性。
cookie在使用脚本或用户手动删除前永久保存，最大一般为4KB。session在会话期间保存，当访问增多会加重服务器负担。
session的实现需要cookie支持：session依赖session ID实现，而session ID存放于cookie，因此，禁用cookie之后session也会失效。但可使用其他方法实现，如：在URL中传递session ID。
session在服务器端可存放于文件（默认）、数据库或内存。
session支持各种类型对象，cookie只保存字符串。
3、如何实现一个img图片在指定容器中水平垂直居中？
答案：
img设置display：block
水平设置margin：0 auto；
垂直设置图片的height和容器的height一样
4、给出伪元素(::before, ::after)的几种使用场景？
答案：
尽量使用它们显示修饰性内容
#在某些元素前添加图标，如：
.phoneNumber::before {
content:'\260E';
font-size: 15px;
}
配合content属性来使用
#使用引号包一段字符串，如：
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
#通过attr()调用当前元素的属性，如：
a::after{
content: "(" attr(href) ")";
}
#用于引用媒体文件，如：
a::before{
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
等等等.....
5、针对如下 DOM 结构，编写 CSS ，实现三栏水平布局，其中 left 、 right 分别位于左右两边， left 宽度为 200px ， right 宽度为 300px ， main 处在中间，宽度自适应。要求：允许增加额外 DOM 节点，但不能修改现有节点顺序。
<divclass="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
答案：
.containter{
width: 100%;
height: 100%;
position: relative;
}
.main{
position: absolute;
left: 200px;
top: 0px;
width:auto;
}
.left{
width: 200px;
}
.right{
position: absolute;
right: 0px;
top: 0px;
width: 300px;
}
6、如下两个普通对象
var a={
foo:1,
methodA:function(){
console.log(this.foo);
}
};
var b={
bar:2,
methodB:function(){
console.log(this.bar);
}
}
可以不考虑执行环境的兼容性，实现如下要求：
- 执行 a.methodA() 输出 1
- 执行 a.methodB() 输出 2
- 执行 b.bar=3; a,method() 输出 3
答案：
a.methodA();
a.__proto__=b;
a.methodB();
b.bar=3;
a.methodB();
注意：此处是普通对象，要用__proto__属性，只有函数对象才有prototype属性。
7、实现一个定时输出函数，传入一个正整数参数 ’n’ ，从 1 开始每隔 1s 递增输出整数，直到等于 ’n’ 为止。
var output=function(n){
//code
}
output(3);
答案：
var output=function(n){
var i=1;
var timer=setInterval(function(){
if (i>n) {
clearInterval(timer);
}else{
console.log(i++);
}
},1000);
}
output(3);
8、鼠标悬停在某个元素上时，在这个位置出现一个tooltip文字提示。请给出主要实现代码或伪代码，包括DOM结构，CSS，JS等。
答案：
HTML：
<div id="box">鼠标快过来呀
<div id="tooltip">~\(≧▽≦)/~啦啦啦</div>
</div>
CSS：
#box{
position: relative;
cursor: pointer;
}
#tooltip{
z-index: 1000;
position: absolute;
top:0;
left:0;
display:none;
border: 2px solid red;
}
JS：
var box = document.getElementById('box');
var tooltip = document.getElementById('tooltip');
box.onmouseover = function(e){
e = e||window.event;
var x = e.clientX - box.offsetLeft;
var y = e.clientY - box.offsetTop;
tooltip.style.display = "block";
tooltip.style.left = x+"px";
tooltip.style.top = y+20+"px";
}
box.onmouseout = function () {
tooltip.style.display = "none";
}
9、解析指定 url 地址，返回其中的 query 参数对象，可以不考虑执行环境的兼容性。 如： http://www.wacai.com/login?a=1&b=2&a=3&c
返回：
{ a: [ '1', '3' ], b: '2', c: undefined }
答案:
var parseURL=function(url){
var parms=url.trim().split('?')[1].split('&');
var obj={};
if (parms) {
for(var item of parms){
var temp=item.split('=');
if (!obj[temp[0]]) {
obj[temp[0]]=temp[1];
}else{
obj[temp[0]]=[obj[temp[0]]];
obj[temp[0]].push(temp[1]);
}
}
}
return obj;
}