八十一.路由跳转的方式
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)