上海全栈开发学院8月《专业二》第三周周考技能

最新推荐文章于 2022-05-30 11:08:48 发布

优秀的磊少

最新推荐文章于 2022-05-30 11:08:48 发布

阅读量170

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_53762175/article/details/120012638

版权

题号	一	二	总分	批卷人	审核人
得分

考试时间：2小时30分
题目要求：

必须有录屏，无录屏者一律0分处理，必须是完整的考试录屏(只有单独录效果录屏按0分处理)，录屏过程中不允许有暂停行为，若是发现，按考试作弊处理，桌面必须有自己的学院、班级、姓名
上交U盘时，U盘中只允许有自己考试的项目，否则按零分处理
考试期间允许翻阅在线手册和菜鸟教程，如涉及到jQuery、VUE，可以使用CDN方式引入，不得使用百度搜索试题答案，只允许查看手册，否则视为作弊

案例效果图：

（图一）

（图二）

（图三）

接口地址：

http://api.k780.com/?app=weather.future&weaId=1&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json

评分标准：(注：以下涉及到命名的，必须符合规范，编写注释，若命名不规范或者没有注释，则该小题项无分)

案例一：评论功能（30分）

布局如图一页面，内容和其保持一致，样式忽略不计（5分）
发表评论按钮绑定点击事件（5分）
发表评论时对评论内容做非空判断（5分）
发表的评论信息需要清除前后的空格（5分）
将发表的评论正常添加至下方内容区域（5分）
正常展示发表信息（5分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<style type="text/css">

	p button{
	border: none;
	color: aliceblue;
	background-color: red;
	}
	</style>
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<title></title>
	</head>
	<body>
	<!-- p标签 -->
	<p>
	<textarea rows="10" cols="20" id="content"></textarea>
	</p>
	<!-- 发布按钮 -->
	<p><button id="btn">发表评论</button></p>
	<!-- 标签 -->
	<ul id="box">
	<li></li>
	</ul>
	</body>
	</html>
	<script src="js/jQuery-3.6.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	// 绑定事件
	$("#btn").click(function(){
	var content = $("#content").val();
	if(content==''){
	// 弹框
	alert('请输入评论区内容');
	return false;
	}
	//添加内容
	var newStr = $.trim(content);
	$("#box").append("<li>"+newStr+"</li>");
	});
	</script>

案例二：菜单收缩(20分)

布局如(图二)页面，内容自拟，但布局要一致，样式自行设计（5分）
给父级菜单绑定相对应事件。（5分）
点击可展示子级分类内容。（5分）
再次点击隐藏子级分类内容。（5分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title></title>
	</head>
	<body>
	<dl>
	<td>工业产品</td>
	<dd>工业产品品牌商城入驻</dd>
	<dd>工业产品品牌商城入驻</dd>
	<dd>工业产品品牌商城入驻</dd>
	<dd>工业产品品牌商城入驻</dd>
	</dl>
	</body>
	</html>
	<script src="js/jQuery-3.6.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

	$("dl").click(function(){
	$("dd").toggle();
	});
	</script>

案例三：列表展示功能（50分）

布局如图三页面，样式忽略不计（5分）
引入前端技术实现页面无刷新操作（2分）
当页面加载完成后触发事件，执行请求接口函数（3分）
实现异步调用接口数据(10分)

发送一个get请求，异步请求后端接口数据（4分）
接口success返回值为1，则提示“请求成功”（3分）
接口success返回值为其它，则提示“请求失败”（3分）

请求成功后将获取到的数据做循环处理（5分）
使用字符串进行处理后的数据进行拼接（5分）
正常展示列表数据（如图三）（5分）
实现隔行变色功能(5分)

把奇数的行背景色设置为蓝色(2.5分)
把偶数的行背景色设置为红色(2.5分)


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">

	</style>
	<title></title>
	</head>
	<body>
	<div id="app">

	</div>
	</body>
	</html>
	<script src="js/jQuery-3.6.js" type="text/javascript" charset="utf-8"></script>
	<script>
	$(function(){
	$.ajax({
	type:"get",
	url:'http://api.k780.com/?app=weather.future&weaId=1&&appkey=57571&sign=67e49330c146230a0b23e5433c9427c6&format=json',
	dataType:"json",
	success:function(res){
	if(res.success == 1){
	var data = res.result;
	var str="<table>";
	str += "<th>城市名字</th>";
	str += "<th>温度</th>";
	str += "<th>风向</th>";
	str += "<th>操作</th>";
	for(var i=0;i<data.length;i++){
	str+= "<tr><td>"+data[i]['citynm']+"</td><td>"+data[i]['temperature']+"</td><td>"+data[i]['wind']+"</td><td><button class='del'>删除</button></td></tr>";
	}
	str += "</table>";
	$("#app").html(str);
	$("tr:odd").css('background-color','red');
	$("tr:even").css('background-color',' blue');
	$("tr:eq(0)").css('background-color','#fff');
	}else{
	alert('接口调用失败');
	}
	}
	});
	$("#app").on("click",'.del',function(){
	var res = confirm('您确定要删除么?');
	if(res){
	$(this).parent().parent().remove();
	}
	});
	});
	</script>

实现删除功能(10分)

给当前操作的删除按钮绑定事件（2分）
删除前，给出提示“确定删除当前数据吗？”(3分)
确定后移除该行数据（5分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	* {
	margin: 0 auto;
	padding: 0;
	}

	.box {
	width: 1200px;
	height: 130px;
	background-color: aliceblue;
	}
	button{
	border: none;
	}
	</style>
	<!-- 新 Bootstrap4 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<title></title>
	</head>
	<body>
	<!-- 表单 -->
	<div class="box">
	<table border="1" height="30px" width="1200px" cellpadding="1" cellspacing="0">
	<tr style="text-align: center;">
	<th><input type="checkbox"></th>
	<th>城市</th>
	<th>日期</th>
	<th>温度</th>
	<th>天气情况</th>
	<th>风向</th>
	<th>操作</th>
	</tr>
	<tr style="text-align: center;">
	<td><input type="checkbox"></td>
	<td>上海</td>
	<td>2021-8-27</td>
	<td>26°</td>
	<td>晴天</td>
	<td>南风</td> <!-- 删除按钮 -->
	<td><button type="button">删除</button></td>
	</tr>
	<tr style="text-align: center;">
	<td><input type="checkbox"></td>
	<td>上海</td>
	<td>2021-8-27</td>
	<td>26°</td>
	<td>晴天</td>
	<td>南风</td>
	<td><button type="button">删除</button></td>
	</tr>
	<tr style="text-align: center;">
	<td><input type="checkbox"></td>
	<td>上海</td>
	<td>2021-8-27</td>
	<td>26°</td>
	<td>晴天</td>
	<td>南风</td>
	<td><button type="button">删除</button></td>
	</tr>
	<tr style="text-align: center;">
	<td><input type="checkbox"></td>
	<td>上海</td>
	<td>2021-8-27</td>
	<td>26°</td>
	<td>晴天</td>
	<td>南风</td>
	<td><button type="button">删除</button></td>
	</tr>
	</table>
	</div>
	</bodyh
	</html>
	<script src="js/jQuery-3.6.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

	$(document).ready(function(){
	// 给当前操作的删除按钮绑定事件
	$("button").click(function(){
	// 删除前，给出提示“确定删除当前数据吗？
	confirm('确定要删除吗？');
	$("td").remove();
	});
	});
	</script>