2018京东前端笔试题笔试题

最新推荐文章于 2024-04-14 08:26:47 发布

ilvseyinfu

最新推荐文章于 2024-04-14 08:26:47 发布

阅读量1.1w

点赞数

分类专栏： JavaScript 前端在线笔试总结

本文链接：https://blog.csdn.net/qq_31751569/article/details/77900791

版权

JavaScript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端在线笔试总结

5 篇文章 0 订阅

订阅专栏

14 + 16 单选+不定项

感觉选择考的还是比较基础的，cookie / 本地存储 / 网络协议 / CSS3新特性 / HTML5新元素剩下的记不起来了，对了还考了Vue和react

编程题2道，第二道没时间看了，刚开始还觉得时间很充裕，然后就卡到第一道编程题上了，第一道题考的就是原JavaScript操作DOM，好在可以用编译器调bug，不像下午考搜狗，写CSS样式，直接在考卷上写，完全不知道自己写出来的对不对，也无法调整，言归正传，具体说下这道题，很像之前写过的购物车页面，动态的增加删除，动态渲染页面，比如数量和总价，只是这道题不能用框架。创建和删除一个节点，这个好说，主要是卡在如何遍历一个table

1 . 首先通过题目给的table id 获得该对象

2. tableObj.rows.length; 获得行数

3. tableObj.rows[x].cells[y].innerText 可以获得x行y列的值

4.遍历table

function show(){
	var	tableRowInfo ="";
	tableObj = document.getElementById("jsTrolley");
	for(var i =0 ;i<tableObj.rows.length ; i++){
		
		for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){
			tableRowInfo  +=  tableObj.rows[i].cells[j].innerText + " ";
		}
		console.log(tableRowInfo); // 打印每行信息
		tableRowInfo ="";	
	}
}

接下来又卡到删除上了，

先说一个遇到的问题，

<body>
	
<a id='a1' href="javascript:void(0);">测试用1</a>

    <script type="text/javascript">
		function t(){
			var c= document.getElementById("a1");
			var b = 10;
			c.setAttribute("onclick","javascript:alert(b)");
			// 注意 ！ 此处有坑！ 此时无法获取b，要将b声明成全局变量后才可以访问！

		}
		t();
	</script>

</body>

就是卡到这里，每次给链接设置onclick 属性：javascript：src.removeChild(tar)，scr 和tar 都会报undefined，将他们改成全局变量就可以正常访问了。

接下来的就是小问题了，每次添加商品/删除商品后，记得重新渲染下总计(包括商品数量和总价)，还有就是用js操作dom如何获得祖先元素/父元素/同胞元素也需要好好再掌握下了，不经常写就是记不住。

最后，说下感受，刚考完还感觉十分可惜，感觉可以做出来时间就差一点，其实晚上静静的想想，把代码写完，发现要处理的细节还是蛮多的，每一个小点都能反应出对知识的掌握程度，总体来说还是很弱，不过还是想鼓励下自己，最近苦练JavaScript还是小有成效。

把完整代码贴上，有兴趣的可以直接黏贴拷贝查看效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
body,html{
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #000000;
}
table{
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
thead{
    background: #3d444c;
    color: #ffffff;
}
td,th{
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
	</style>
</head>
<body>
<table id="jsTrolley">
    <thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
    <tbody>
        <tr><td>产品1</td><td>10.00</td><td><a href="javascript:void(0);">删除</a></td></tr>
        <tr><td>产品2</td><td>30.20</td><td><a href="javascript:void(0);">删除</a></td></tr>
        <tr><td>产品3</td><td>20.50</td><td><a href="javascript:void(0);">删除</a></td></tr>
    </tbody>
    <tfoot><tr><th>总计</th><td colspan="2">60.70(3件商品)</td></tr></tfoot>
</table>

<script type="text/javascript">



function add(items) {
 
    sum = 60.70;
    for(var i =0 ;i<items.length ;i++){
        var add = document.createElement("tr");
        var src = document.getElementsByTagName("tbody");
        add.innerHTML = "<td>"+items[i].name+"</td><td>"+items[i].price+"</td><td><a href='javascript:void(0);'>删除</a></td>";
        src[0].appendChild(add);
        sum +=items[i].price;
    }
    //var num = 3 +items.length;
    var tableObj = document.getElementById("jsTrolley");
    var num = tableObj.rows.length -2;
    tableObj.rows[4+items.length].cells[1].innerText  =sum.toFixed(2)+"("+num+"件商品)";

}

function bind() {
 	
 	var arr = document.getElementsByTagName("a");
 	var src = document.getElementsByTagName("tbody");
 	s = src[0];
 	var len = arr.length;
 	for(var i =0 ;i<len ;i++)
 	{
		arr[i].setAttribute("onclick","foo(s,this)");
 	}


}

function foo(x,y){
	var tar = y.parentNode.parentNode;
	x.removeChild(tar);
	var v = y.parentNode.previousSibling.innerHTML;
	sum -=v;
	//console.log(sum);
	var tableObj = document.getElementById("jsTrolley");
	var num = tableObj.rows.length -2;
	//console.log(sum2.toFixed(2)+"---"+num2);
	tableObj.rows[tableObj.rows.length-1].cells[1].innerText = sum.toFixed(2)+"("+num+"件商品)";
	
}	

var items = [{name:'ilv',price:10.0},{name:'ilv2',price:10.0}];

add(items);
bind();


function show(){
	var	tableRowInfo ="";
	tableObj = document.getElementById("jsTrolley");
	for(var i =0 ;i<tableObj.rows.length ; i++){
		
		for(var j=0 ;j<tableObj.rows[i].cells.length ; j++){
			tableRowInfo  +=  tableObj.rows[i].cells[j].innerText + " ";
		}
		console.log(tableRowInfo); // 打印每行信息
		tableRowInfo ="";	
	}
}
show();


</script>


</body>
</html>

ilvseyinfu

关注

0
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
2018京东前端笔试题笔试题

14 + 16 单选+不定项感觉选择考的还是比较基础的，cookie / 本地存储 / 网络协议 / CSS3新特性 / HTML5新元素剩下的记不起来了，对了还考了Vue和react，这个没搞过，瞎蒙的，其它的记不起来了编程题2道，第二道没时间看了，刚开始还觉得时间很充裕，然后就卡到第一道编程题上了，第一道题考的就是原JavaScript操作DOM，好在可以用编译器调bug，不
复制链接

扫一扫