前端面试
http://www.cnblogs.com/bhan/p/6733890.html
1.以下代码,alert出来的值是多少?
alert(1&&2); // 2
alert(1||2); // 1
2.验证字符串的组成规则,第一个须为数字,后面可以是字母、数字、下划线,总长度为5-20位
/^\d{1}[\w|_|\d]{4,19}$/
3.以下代码,alert出来的值是多少。
4.以下代码alert 出来的值是多少
1: css选择符有class类选择符 还有另外2种是什么?按优先级排序?
id选择符和标签选择符
id选择符 > class选择符 > 标签选择符
2: 前端页面有行为层js和另外2个层是什么? 作用是什么?
结构层html和样式层css
行为层:主要指页面交互、动画效果
结构层:主要指DOM节点
样式层:主要是指页面渲染
3: 你做的页面在哪些内核浏览器测试过?
Trident内核代表产品Internet Explorer,又称其为IE内核。
Gecko内核代表作品Mozilla 使用它的浏览器有Firefox、Netscape6至9
WebKit内核代表作品Safari、Chromewebkit
Presto内核代表作品OperaPresto
4: 在JQuery中被誉为工厂函数的是( c )
(a) ready()
(b) function()
(c) $()
(d) factory()
5: setTimeout("buy", 2000) 表示的意思是( c )
(a) 间隔 2000 秒后, buy()函数被调用一次
(b) buy() 函数被持续调用 2000 次
(c) 间隔 2 秒后, buy()函数被调用一次
(d) 间隔 2 分钟后, buy()函数被调用一次
1. HTTP状态码及其含义
- 100-199 : 表示成功接收请求, 要求客户端继续提交下一次请求才能完成整个处理过程
- 200-299: 表示成果接收请求并已完成整个处理过程. 常用200
- 300-399: 为完成请求, 客户需进一步细化需求: 例如: 请求的资源已经移动一个新地址, 常用302(重定向), 307和304(拿缓存)
- 400-499: 客户端的请求有错误, 包含语法错误或者不能正确执行. 常用404(请求的资源在web服务器中没有) 403(服务器拒绝访问, 权限不够)
- 500-599: 服务器端出现错误常用:
- 200 正常 表示一切正常, 返回的是正常请求结果
- 302/307 临时重定向 指出请求的文档已被临时移动到别处, 此文档的新的url在location响应头中给出
- 304 未修改 表示客户机缓存的版本是最新的, 客户机应该继续使用它
- 403 禁止 服务器理解客户端请求, 但拒绝处理它, 通常用于服务器上文件或目录的权限设置所致
- 404 找不到 服务器上不存在客户机所请求的资源
- 500 服务器内部错误 服务器端的cgi, asp, jsp等程序发生错误
2. 设置元素浮动后,该元素的display值是多少?
block
设置position:absolute/fixed、float:left/right的时候,行内元素会变成了块级元素,他们本身的display属性被忽略了。
3. 请描述cookies、sessionStorage 和 localStorage 的区别?
共同点:都是保存在浏览器端
区别:cookies缓存 sessionStorage会话存储 localStorage本地存储
1.cookies存储在http信息的实体中,http每次请求都会携带cookie, cookie在浏览器和服务器间来回传递, 后两者仅在本地保存
2.存储大小:cookie数据不能超过4k; 后两者要大很多,可以达到5M;
3.有效期:cookie在设置的cookie有效期之前有效,即使浏览器或窗口关闭;sessionStorage仅在当前浏览器窗口关闭前有效,不可持久保存;localSorage始终有效,窗口或浏览器关闭也一直保存,可做持久数据;
4.作用域:cookie、localStorage在所有的同源窗口中都是共享的;sessionStorage只能在当前页面使用。
4. 请你解释你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局?
盒模型:文档中的每个元素被描绘为矩形盒子,渲染引擎的目的就是判定大小,属性——比如它的颜色、背景、边框方面——及这些盒子的位置。
在CSS中,这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界margin edge,边框边界border edge,内边距边界padding edge和内容边界content edge。
盒子模型分为两类:W3C标准盒子模型和IE盒子模型
这两者的关键差别就在于:
1.W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(padding)和边框(border) box-sizing:content-box
2.IE盒子模型——属性高(height)和属性宽(width)这两个值包含 填充(padding)和边框(border) box-sizing:border-box
我们在编写页面代码的时候应该尽量使用标准的W3C盒子模型(需要在页面中声明DOCTYPE类型)。
5. 下面的语句的返回值是什么?
弹出66
6. 下面两个alert的结果是什么?
1 var foo = "Hello"; 2 (function() { 3 var bar = "world"; 4 alert(foo + bar); 5 })(); 6 alert(foo + bar);
考察闭包
第一个弹出Hello world 第二个bar没有定义会报错
7. 下面foo.x的值是什么?
1 var foo = {n: 1}; 2 var bar = foo; 3 foo.x = foo = {n: 2};
undefined
参考https://segmentfault.com/a/1190000002965140
https://segmentfault.com/a/1190000004224719
8. 下面代码的输出是什么?
1 console.log('one'); 2 setTimeout(function() { 3 console.log('two'); 4 }, 0); 5 console.log('three');
9. 对ES6的了解?
箭头操作符、let和const关键字、支持类、字符串模板、for of 遍历、模块、 Promises等
题目1:CSS实现垂直水平居中
1.弹性盒子方法
给父容器设置dispaly: flex; justify-content: center; align-items: center
2.绝对定位居中
1 .box2 { 2 position: relative; 3 } 4 .con2 { 5 margin: auto; 6 position: absolute; 7 top: 0; 8 right: 0; 9 bottom: 0; 10 left: 0; 11 }
3负边距居中
设外盒子100px宽高,内盒子50px宽高
1 .box3 { 2 position: relative; 3 } 4 .con3 { 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 margin-left: -25px; 9 margin-top: -25px; 10 }
4变形
原理同3,把margin换成transform: translate(-50%, -50%)
题目2.写出原生js 或者 JQ框架循环出下面的li内容
1 <ul> 2 <li>text1</li> 3 <li>text2</li> 4 <li>text3</li> 5 <li>text4</li> 6 <li>text5</li> 7 <li>text6</li> 8 </ul>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>题目2.写出原生js 或者 JQ框架循环出下面的li内容</title> 8 </head> 9 <body> 10 <h3>题目2. 写出原生js 或者 JQ框架循环出下面的li内容</h3> 11 <ul></ul> 12 <script type="text/javascript"> 13 var oUl = document.querySelector('ul'); 14 for (var i = 0; i < 5; i++) { 15 var oLi = document.createElement('li'); 16 oLi.innerHTML = 'test' + (i+1); 17 oUl.appendChild(oLi); 18 } 19 </script> 20 </body> 21 </html>
题目3.get和post请求区别
1.GET请求将参数跟在url后进行传递, 而POST请求则是作为HTTP消息的实体内容发送给web服务器。当然在ajax请求中,这种区别对用户不可见;
2.GET方式对传输的数据大小有限制,通常不能大于2KB, 而POST方式传递的数据量要比GET方式大得多,理论上不受限制
3.GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下get会带来严重的安全问题,而post方式相对来说可以避免这些问题。
4.GET方式和POST方式传递的数据在服务器端的获取也不同
题目4.js中的函数 split() join() 的区别
1.split方法能把字符串反序列化为数组
2.split两个参数 以第一个参数进行分割,第2个参数用来限制数组的大小
3.join方法能把数组序列化为字符串, join方法后面可以跟match方法进行模式匹配
题目5.dom结点的深度优先遍历和广度优先搜索
1、深度优先遍历的递归写法
1 function deepTraversal(node) { 2 var nodes = []; 3 if (node != null) { 4 nodes.push(node); 5 var children = node.children; 6 for (var i = 0; i < children.length; i++) 7 deepTraversal(children[i]); 8 } 9 return nodes; 10 }
2、深度优先遍历的非递归写法
1 function deepTraversal(node) { 2 var nodes = []; 3 if (node != null) { 4 var stack = []; 5 stack.push(node); 6 while (stack.length != 0) { 7 var item = stack.pop(); 8 nodes.push(item); 9 var children = item.children; 10 for (var i = children.length - 1; i >= 0; i--) 11 stack.push(children[i]); 12 } 13 } 14 return nodes; 15 }
3、广度优先遍历的递归写法:
1 function wideTraversal(node) { 2 var nodes = []; 3 var i = 0; 4 if (!(node == null)) { 5 nodes.push(node); 6 wideTraversal(node.nextElementSibling); 7 node = nodes[i++]; 8 wideTraversal(node.firstElementChild); 9 } 10 return nodes; 11 }
4、广度优先遍历的非递归写法
1 function wideTraversal(selectNode) { 2 var nodes = []; 3 if (selectNode != null) { 4 var queue = []; 5 queue.unshift(selectNode); 6 while (queue.length != 0) { 7 var item = queue.shift(); 8 nodes.push(item); 9 var children = item.children; 10 for (var i = 0; i < children.length; i++) 11 queue.push(children[i]); 12 } 13 } 14 return nodes; 15 }