《专业二》第十三单元日考技能试题

优秀的磊少

于 2021-08-26 09:49:09 发布

阅读量359

点赞数

文章标签： jquery

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

版权

一	总分	批卷人	审核人
得分

评分标准：（以下操作中的所有DOM根据题目要求节点自拟）

jQuery表单验证（50分）
- 写一个用户名文本框、密码文本框、手机号文本框（10分）
- 绑定失焦事件，触发获取输入的值（10分）
- 验证用户名必须是2-3位的汉字，否则在文本框后面给出提示（10分）
- 验证密码必须在6位以上，否则在文本框后面给出提示（10分）
- 验证手机号必须是11位纯数字，且13、15、17、18开头，否则在文本框后面给出提示（10分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	</head>
	<body>
	<form action="http:\\baidu.com" method="post">
	用户名：<input type="text" id="name"><span></span><br>
	密码：<input type="password" id="pad"><span></span><br>
	手机号码：<input type="text" id="mobile"><span></span><br>
	</form>
	</body>
	</html>
	<script src="js/jQuery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$('#name').blur(function(){
	var name = $(this).val();
	if(name==""){
	$(this).next().text('用户名不能为空');
	$(this).next().css('color','red');
	return false;
	}
	var reg_name = /^[\u4e00-\u9fa5]{2,3}$/;
	if(!reg_name.test(name)){
	$(this).next().text('用户名格式不正确');
	$(this).next().css('color','red');
	return false;
	}
	$(this).next().text('ok');
	$(this).next().css('color','green');
	})
	$('#pad').blur(function(){
	var pad = $(this).val();
	if(pad==""){
	$(this).next().text('密码不能为空');
	$(this).next().css('color','red');
	return false;
	}
	var reg_pad = /^\w{6,}$/;
	if(!reg_pad.test(pad)){
	$(this).next().text('密码格式不正确');
	$(this).next().css('color','red');
	return false;
	}
	$(this).next().text('ok');
	$(this).next().css('color','green');
	})
	$('#mobile').blur(function(){
	var mobile = $(this).val();
	if(mobile==""){
	$(this).next().text('手机号不能为空');
	$(this).next().css('color','red');
	return false;
	}
	var reg_mobile = /^1[3578]\d{9}$/;
	if(!reg_mobile.test(mobile)){
	$(this).next().text('手机号格式不正确');
	$(this).next().css('color','red');
	return false;
	}
	$(this).next().text('ok');
	$(this).next().css('color','green');
	})
	</script>

jQuery操作DOM（30分）
- 删除所有class为test的p标签（10分）
- 在页面每个h标签后内部的尾部追加一个span节点（10分）
- 获取页面上选中的复选框对象，打印在控制台上（10分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<p class="test">class为test 的p标签</p>
	<p class="test">class为test 的p标签</p>
	<p class="test">class为test 的p标签</p>
	<h1><p>H1标签</p><p></p></h1>
	<h1><p>H1标签</p><p></p></h1>
	<h1><p>H1标签</p><p></p></h1>
	<h1><p>H1标签</p><p></p></h1>
	<input type="checkbox" value="敲代码" checked="checked">
	<input type="checkbox" value="打游戏" checked="checked">
	<input type="checkbox" value="刷抖音" >
	</body>
	</html>
	<script src="js/jQuery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$('.test').remove();
	$('h1').find('p').next().html('<span>span标签</span>');
	var ck = $("input[type='checkbox']");
	for(var i=0;i<ck.length;i++){
	if($(ck[i]).prop('checked')==true){
	console.log(ck[i]);
	}
	}

	</script>

jQuery操作table（20分）
- 将所有的偶数行背景颜色设为红色（10分）
- 每行的最后一个单元格里存放一个删除按钮，点击此按钮可以将这一行删掉（10分）

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<table border="1" width="500px" height="300px">
	<tr>
	<td>1</td>
	<td>1</td>
	<td>1</td>
	<td><button style="background-color:red;">删除</button></td>
	</tr>
	<tr>
	<td>22</td>
	<td>22</td>
	<td>22</td>
	<td><button style="background-color:red;">删除</button></td>
	</tr>
	<tr>
	<td>333</td>
	<td>333</td>
	<td>333</td>
	<td><button style="background-color:red;">删除</button></td>
	</tr>
	<tr>
	<td>4444</td>
	<td>4444</td>
	<td>4444</td>
	<td><button style="background-color:red;">删除</button></td>
	</tr>
	<tr>
	<td>55555</td>
	<td>55555</td>
	<td>55555</td>
	<td><button style="background-color:red;">删除</button></td>
	</tr>
	<tr>
	<td>666666</td>
	<td>666666</td>
	<td>666666</td>
	<td><button style="background-color:red;">删除</button></td>
	</tr>
	</table>
	</body>
	</html>
	<script src="js/jQuery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$('tr').odd().css('background-color','red');
	$('button').click(function(){
	$(this).parent().parent().remove();
	})
	</script>

优秀的磊少

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《专业二》第十三单元日考技能试题

一总分批卷人审核人得分评分标准：（以下操作中的所有DOM根据题目要求节点自拟）jQuery表单验证（50分）写一个用户名文本框、密码文本框、手机号文本框（10分）绑定失焦事件，触发获取输入的值（10分）验证用户名必须是2-3位的...
复制链接

扫一扫