JavaScript
1.自执行
//自执行,返回b (function b(){ if(a){ a(); }else{ alert("b"); function a(){ alert("a"); } } })()
2.this
//案例2,返回a var name = "a"; var object = { name: "b", getname: function() { return function() { return this.name; } } }; alert(object.getname()());
3.弹出当前点击的元素
<input type="button" value="test" onclick="test(this)" /> <button type="button" value="test" onclick="test(this)">我是按钮</button> <span type="button" value="test" onclick="test(this)">span</span> <script type="text/javascript"> //得到触发事件的标签 function test(obj) { //检测到底是哪个标签触发的事件的工具 alert(window.event.srcElement.tagName); //this和window.event.srcElement的使用区别是:如果要直接使用this.属性,此时的函数不能是被调用的而必须是响应函数,而window.event.srcElement则无此限制。 } </script>
4.前端框架,三分天下
Angular 2 依然保留以 HTML 为中心,Angular 2 将 “JS” 嵌入 HTML
React 以 JavaScript 为中心,将 “HTML” 嵌入 JS,把 HTML 和 CSS 全都整进 JavaScript 了,React跟MVVM半毛钱关系都没有,它既没有绑定的概念,又没有命令的概念。
Vue.js MVVM,实现了双向绑定
CSS
1.左右等高div
方法一:js判断
function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){ $("right").style.height=$("left").offsetHeight + "px"; } else{ $("left").style.height=$("right").offsetHeight + "px"; } } window.onload = function() { getHeight(); }
2.margin-bottom负值,为-padding-bottom值
.wrap{ width: 700px; overflow: hidden; margin: 0 auto; } .left,.right{ margin-bottom: -100000px; padding-bottom: 100000px; float: left; } .left{ width: 300px; background: red; } .right{ background: pink; }
3.dl, dt, dd三个标签浏览器默认margin值多少?是否有标签默认文字粗体?
dl{ display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } dd { display: block; -webkit-margin-start: 40px; }
无
4.
line-height:150%和line-height:1.5的区别是?
区别在于继承的问题。150%是根据父元素的字体大小计算出行高,并且子元素依然沿用这个计算后的行高。而1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。另,1.5em等也是按照150%的情况来算的。
前端概述
1.移动端和PC端的区别
(1)操作方式--------------Js事件
PC端使用鼠标操作,操作包含滑动、左击、右击、双击操作,操作相对来说单一,交互效果相对较少
移动端包含手指操作点击、滑动、双击、双指放大、双指缩小、五指收缩,除了手指操作外还可以配合传感器完成摇一摇、陀悬仪感应灯操作方式
(2) 屏幕尺寸
2.实现自适应布局的方法
- 百分比布局
- 浮动
- 绝对定位法
- flex弹性布局
3.移动端支持的HTM5新特性
- 离线缓存(Web Storage)
- 音频视频
- 地理定位
- canvas绘图
- 表单元素,浏览器中出现的html5表单元素与对应的键盘:Text正常输入内容标准键盘,Tel电话号码数字键盘,Email电子邮件地址文本框带有@和.的键盘
- 语义化标签,利于理解网页结构,搜索引擎优化
- CSS3,如字体嵌入,动画,排版等
4.移动端优化
加载优化
图片优化
CSS优化
渲染优化
5.浏览器内部工作原理
解析DOM树,render树构建,render树布局,render树绘制,动态变化
6.Http请求
请求方法,URI,协议版本
请求头(Request Header)
请求正文
7.前端模块化编程
CMD 通用模块定义 seaJs
AMD 异步加载 RequireJs
ES 6 导入导出, import,export