1.浮动的div怎么居中?
2.绝对定位div居中?
.test{
width:100px;height:100px;
position:absolute;
top:0; left:0;bottom:0;right:0
marign:auto;
}
3.使用原生js实现点击table切换不同内容
4.原生js实现轮播
大体思路: 先创建一个div,限定其宽度和高度,overflow:hidden,且设置其position为relative。然后创建一个装图片的div,宽度为所有图片的总宽度,且设置其position为absolute,并且使其中的内容浮动,这样所有的图片就处于一行中。然后为了实现无缝滚动,所以需要在首尾分别添加一张过渡图片。 先添加两个按钮, 使其可以手动轮播,然后只需要添加一个定时器使其朝一个方向自动轮播即可,因为用户有时需要查看详情,所以当鼠标进入时就clear定时器,滑出再定时播放。为了更好地用户体验,我们再下面添加了一排小圆点,用户可以清楚地知道现在所处的位置, 最后, 利用闭包使得用户可以直接通过点击小圆点切换图片。
5.h1与title的区别,b与strong的区别,i和em的区别?
h1突出文章主题,面对用户,更突出其视觉效果,突出网站标题或关键字用title。一篇文章,一个页面最好只用一个h1,多个h1会稀释主题。一个网站可以有多个title,最好一个单页用一个title,以便突出网站页面主体信息,从seo看,title权重比h1高,适用性比h1广。标记了h1的文字页面给予的权重会比页面内其他权重高很多。一个好的网站是h1和title并存,既突出h1文章主题,又突出网站主题和关键字。达到双重优化网站的效果。
strong与em是结构化标签,而b与i是表现化标签
6.lable的作用?常怎么用?
作用: 为 input 元素定义标注(标记)。
使用:
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
7.js回调函数的作用: js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数。
8.vue计算属性,什么情景使用
9.选择器优先级(笔试都会有)
10.typeof undefined //undefined
11.循环遍历加监听
12.mui实现底部加载更多时没有数据,显示底部图片
13.vue常用指令
14.vux怎么使用插件
15.vue中各生命周期钩子执行时机:
beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
16.dom事件阻塞:
event.stopPropagation(); //只会阻止事件传递,不会阻止事件的默认行为;
clike事件函数返回false, //即会阻止事件传递,不会阻止事件的默认行为;
17.vue操作数组哪个方法可以触发双向数据绑定:数组的变异操作方法都能触发
18.js中怎么处理浮点数相加不精确问题,如0.1+0.2=0.300000004;
使用阶乘
19.多终端多分辨率适配方案:
1.使用百分比自适应布局
2.使用rem单位适配网页,效果很好,浏览器的兼容性也不错只要一行代码就能适配多个分辨率终端
(function(doc,win){
var docEl =doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;
if (!clientWidth) {return};
docEl.style.fontSize = 100 * (clientWidth/750) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window)
3.响应式布局来做,用媒体查询,可以使用bootstrap框架
20.vue组件中data为什么必须是一个函数?
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响
当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。
21.js中的隐式转换和强制类型转换
两个不同类型比较时,会产生隐式类型转换,如false==1;//false, false先转换为数字0
js中的不同的数据类型之间的比较转换规则如下:
1. 对象和布尔值比较
对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字
[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1,所以为false
2. 对象和字符串比较
对象和字符串进行比较时,对象转换为字符串,然后两者进行比较。
[1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3',然后和'1,2,3', so结果为true;
3. 对象和数字比较
对象和数字进行比较时,对象先转换为字符串,然后转换为数字,再和数字进行比较。
[1] == 1; // true `对象先转换为字符串再转换为数字,二者再比较 [1] => '1' => 1 所以结果为true
4. 字符串和数字比较
字符串和数字进行比较时,字符串转换成数字,二者再比较。
'1' == 1 // true
5. 字符串和布尔值比较
字符串和布尔值进行比较时,二者全部转换成数值再比较。
'1' == true; // true
6. 布尔值和数字比较
布尔值和数字进行比较时,布尔转换为数字,二者比较。
true == 1 // true
强制类型转换:如let str = '123', let num = Number(str) //num = 123;
22.数组打乱
23.js的哪些操作会造成内存泄漏
1>. 闭包
2>.没有及时清理的定时器和回调函数
3>.意外的全局变量
24.vux的全局钩子:导航守卫怎么使用的
25.清除浮动的6种方式:如 父子两层div,子元素浮动
①父元素设置高度
②父元素设置overflow:hidden
③父元素开始绝对定位
④添加
空标签,并设置属性clear='all'
⑤添加空
会有最小高度问题,添加font-size:'0px';可以解决,但是还会遗留2px的高度
⑥终极解决方案
.clearfix{
/* 兼容IE6,7以下不支持伪元素,,可以开启HasLayout */
*zoom: 1;
}
.clearfix:after,
.clearfix:before{
content: "";
display: block;
clear: both;
}
26.三列等分布局实现,使用百分比布局
27.性能优化:
①减少http请求次数, 合并图片/合并多个css或多个js/图片懒加载
②控制资源文件加载优先级,优先加载css,最后加载javascript
③浏览器缓存
④减少重排, 尽量使用增加class属性,而不是通过style操作样式
⑤减少DOM操作
⑥图标使用IconFont替换
28.数组的变异方法有哪些?
29.display属性有几个值,分别什么含义?
30.异步和同步的区别
31.什么是事件委托
32.http状态码和含义: 404:找不到文件/500:服务器异常/200:成功
33.split()和join()方法是什么意思?
split:用于把一个字符串分割成字符串数组。
join:把数组中的所有元素放入一个字符串,元素通过指定的分隔符进行分隔
34.HTML5有哪些新增的表单元素(大多数浏览器都还不支持)
datalist: 元素规定输入域的选项列表
列表是通过 datalist 内的 option 元素创建的(option 元素永远都要设置 value 属性)。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
keygen:元素的作用是提供一种验证用户的可靠方法
output:用于不同类型的输出,比如计算或脚本输出
35.HTML5 input新增输入类型:
email, url, number, Date pickers (date, month, week, time, datetime, datetime-local),
color,search
35.选择器都有哪些?
类: .className;
id: #id
属性: [title]
子选择器: p > span
相邻兄弟选择器: p + p
后代选择器: div .className或 div p
36.vue组件间通信
37.自定义组件,插槽
38.行高line-height设置2和2em什么区别:
line-height:2; 行高是2倍的文字大小,均以相应的字体为基准。
line-htight:2em; 行高是2倍的文字大小,文字大小是指父元素中设定的字体大小。
39.marign百分比
40.loading和ready的区别
41.JSONP跨域时cookies是否有效