2018京东前端笔试题笔试题
14 + 16 单选+不定项感觉选择考的还是比较基础的，cookie / 本地存储 / 网络协议 / CSS3新特性 / HTML5新元素 剩下的记不起来了，对了还考了Vue和react，这个没搞过，瞎蒙的，其它的记不起来了编程题2道，第二道没时间看了，刚开始还觉得时间很充裕，然后就卡到第一道编程题上了，第一道题考的就是原JavaScript操作DOM，好在可以用编译器调bug，不
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>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)