八十一.路由跳转的方式
1.router-link
<router-link :to="{name:'home'}">//不带参数
<router-link :to="{name:'home', params: {id:1}}">//带参数
2.this.$router.push()
3.this.$router.replace()
4.this.$router.go(n) ()
八十二.页面之间是怎么传参数的？
纯html页面之间的传值可以通过url后面的参数进行比如：
b.html?teacher=xx&time=xxx
回到问题中，首先从a.html到b.html需要一个跳转方式，比方说在a.html页面里面你有一个链接：
<a href="b.html" id="toPageB">跳转到b页面</a>
剩下的就好办了，依次取得你需要的参数，然后修改页面url:
var dataFromLi=[$("#Teachername").text(),$("#Credit_hour").text()];
$("#toPageB").attr("href","b.html?data="+dataFromLi);
然后在b.html页面解析url，获取参数。
更新，如何根据url获取参数：
window.location.search 会返回所有地址栏从“?”开始的字符串。获取某个参数值可以通过正则，下面是一个简单的获取参数的函数：
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
如果你采用jQuery，你可以用更简单的办法：
$.url().param('data');
八十三.分析代码中最终生效的CSS样式(CSS样式权重计算)
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
最后把这些值加起来，再就是当前元素的权重了。
权重算出来了，但是某个元素到底用哪个样式，还有3个规则,：
1，如果样式上加有!important标记，例如：
p{ color: gray !important}
那么始终采用这个标记的样式。
2，匹配的内容按照CSS权重排序，权重大的优先；
3，如果权重也一样，按照它在CSS样式表里声明的顺序，后声明的优先，例如：
h1 {color: blue}
h1 {color: red}
最终胜出的是color: red。
八十四.手机号的正则表达式(以1开头的11位数字)
function checkPhone(){
var phone = document.getElementById('phone').value;
if(!(/^1[3456789]\d{9}$/.test(phone))){
alert("手机号码有误，请重填");
return false;
}
}
八十五.用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画
main .heart{
animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}
//margin-top会发生卡顿
@keyframes heart{
from{margin-top:0px;}
to{margin-top:-6px;}
}
或：
//用transform就流畅了
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,6px)}
}
八十六.列举两种清除浮动的方法(代码实现或者描述思路)
为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
当父元素不给高度的时候，
内部元素不浮动时会撑开
而浮动的时候，父元素变成一条线
清除浮动的方法（最常用的4种）
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
八十七.代码实现3栏效果，左右两栏固定宽度，中间栏随着浏览器宽度自适应变化
1. 基于传统的position和margin等属性进行布局
1).绝对定位法
(绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度)
<body>
<div id = “left”>我是左边</div>
<div id = “right”>我是右边</div>
<div id = “center”>我是中间</div>
</body>
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
2).使用自身浮动法
(对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流)
<div id = "left_self">我是左边</div>
<div id = "right_self">我是右边</div>
<div id = "center_self">我是中间</div>
#left_self {float: left;}
#right_self{float: right;}
#center_self{margin: 0 210px;height: 200px; background-color: #a0b3d6}
3). 圣杯布局
(margin负值法center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合)
<div id = “wrap”>
<div id = “center”></div>
</div>
<div id = “left_margin”></div>
<div id = “right_margin”></div>
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}
2 ， css3新特性
<div id = "box">
<div id = "left_box"></div>
<div id = "center_box"></div>
<div id = "right_box"></div>
</div>
#box{width:100%;display: flex; height: 100px;margin: 10px;}
八十八.<ol><li></li></ol>结构的html代码，写原生js实现点击某个li就弹出对应的索引值
1. 使用闭包
<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){
for(var i = 0, len = list.length; i < len; i++){
var that = list[i];
list[i].onclick = (function(k){
var info = that.innerHTML;
return function(){
alert(k + "----" + info);
};
})(i);
}
}
foo();
</script>
2.使用ES6中的新特性let来声明变量
<script type="text/javascript">
var myul = document.getElementsByTagName("ul")[0];
var list = myul.getElementsByTagName("li");
function foo(){'use strict'
for(let i = 0, len = list.length; i < len; i++){
list[i].onclick = function(){
alert(i + "----" + this.innerHTML);
}
}
}
foo();
</script>
3.事件委托
<script type="text/javascript">
var myul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
myul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});
</script>
4.引入jquery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）
<script type="text/javascript">
$("ul").delegate("li", "click", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
});
</script>
<script type="text/javascript">
$("ul").on("click", "li", function(){
var index = $(this).index();
var info = $(this).html();
alert(index + "----" + info);
});
</script>
八十九.对数组进行随机排序， 要求数组中的每个元素不能停留在原来的位置
随机下标：
可以采用这样的一种方式，每次随机生成一个下标，将下标对应的数组从原数组中取出来，推入到结果中，如此重复直到原数组为空。
function shuffle(arr) {
let temp = [...arr];
let result = [];
while (temp.length) {
const index = Math.floor(Math.random() * temp.length);
result.push(temp.splice(index, 1)[0]);
}
return result
}
九十、代码实现parse方法，将有效的JSON字符串转换成JavaScript对象
jQuery 代码:
var str = '{"name":"John"}';
var obj = jQuery.parseJSON(str);
alert( obj.name === "John" );
拓展更多面试题（100道前端面试题练手）：
1、前端近年面试题（1）
2、前端近年面试题（2）
3、前端近年面试题（3）
4、前端近年面试题（4）
5、前端近年面试题（5）
6、前端近年面试题（6）
7、前端近年面试题（7）
8、前端近年面试题（8）
9、前端近年面试题（9）
2620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
