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