生产实习Java_day4（JQuery练习）

最新推荐文章于 2022-06-28 19:34:53 发布

SmartDemo

最新推荐文章于 2022-06-28 19:34:53 发布

阅读量280

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/SmartDemo/article/details/104741462

版权

续：生产实习Java_day3(JS练习)

作业描述：将JS转化为JQuery

练习一：实现表单交互

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS-1</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".btn").click(function() {
					//获取两个操作数
					var number1 = document.calcForm.num1.value;
					var number2 = document.calcForm.num2.value;
					if(number1 == "" || number2 == "") {
						alert("购买数量或竞拍价格没有填写,请重新输入！")
					} else {
						var num1 = parseFloat(document.calcForm.num1.value);
						var num2 = parseFloat(document.calcForm.num2.value);
						var c = parseInt(document.calcForm.c.value);
						switch(c) {
							case 1:
								var result = num1 * num2 * 0.6
								break
							case 2:
								var result = num1 * num2 * 0.7
								break
							case 3:
								var result = num1 * num2 * 0.8;
								break
							case 4:
								var result = num1 * num2 * 0.9
								break
							case 0:
								alert("请重新选择支付方式！")
								break
						}
						document.calcForm.result.value = result;
					}
				})
			})
		</script>
	</head>

	<body>
		<form name="calcForm">
			<img src="img/logo.gif"><br />
			<h2 style="font-family: '宋体';">会说话的QQ竞拍喽！</h2>
			<img src="img/qie.jpg" style="size=30;" /><br /> 竞拍价格: <input type="text" name="num1" value=""><br> 购买数量: <input type="text" name="num2"><br> 支付方式：
			<select name="c">
				<option value=0>--请选择支付方式--</option>
				<option value=1>银行转账——打6折</option>
				<option value=2>电话支付——打7折</option>
				<option value=3>邮政支付——打8折</option>
				<option value=4>Q币支付——打9折</option>
			</select><br> 预计总价： <input type="text" name="result"><br />
			<input type="button" class="btn" value="计算看看">

		</form>
	</body>

</html>

练习二：焦点事件与document对象应用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JS02</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#username").blur(function() {
					var username = $("#username").val();
					if(username == "") {
						$("#nameMsg").html("<font color='red'>用户名不能为空!</font>");
					} else if(!/^\w{4,16}$/.test(username)) {
						$("#nameMsg").html("<font color='red'>用户名格式不正确!</font>");
					} else {
						$("#nameMsg").html("<img src='img/check.jpg' width='22px'/>");
					}
				})
				$("#password").blur(function() {
					var passowrd = $("#password").val();
					if(passowrd == "") {
						$("#passMsg").html("<font color='red'>密码不能为空!</font>");
					} else if(!/^\w{6,12}$/.test(passowrd)) {
						$("#passMsg").html("<font color='red'>密码格式不正确!</font>");
					} else {
						$("#passMsg").html("<img src='img/check.jpg' width='22px'/>");
					}
				})
				$("#verify").blur(function() {
					var pass = $("#password").val();
					var vertify = $("#verify").val();
					if(vertify == "") {
						$("#veriMsg").html("<font color='red'>确认密码不能为空!</font>"); 
					} else if(pass != vertify) {
						$("#veriMsg").html("<font color='red'>两次输入密码不一致！</font>");
					} else {
						$("#veriMsg").html("<img src='img/check.jpg' width='22px'/>");
					}
				})
			})
		</script>
	</head>

	<body>
		<img src="img/top.jpg">
		<form name="regForm" method="post">
			<table>
				<tr>
					<td>用户名:</td>
					<td><input type="text" id="username" name="username" onblur="userLostFocus()" /></td>
					<td>
						<div id="nameMsg" style="display: inline;font-size:15px;">只能输入字母或数字，4~16个字符</div>
					</td>
					<tr />
					<tr>
						<td>密码:</td>
						<td> <input type="password" id="password" name="password" onblur="passLostFocus()" /></td>
						<td>
							<div id="passMsg" style="display: inline;font-size:15px;">密码长度6-12位</div>
						</td>
						<tr />
						<tr>
							<td>确认密码:</td>
							<td> <input type="password" id="verify" name="verify" onblur="verifyLostFocus()" /></td>
							<td>
								<div id="veriMsg" style="display: inline;font-size:15px;"> </div>
							</td>
							<tr />
							<td colspan="3" align="center"><input type="reset" name="reset" value="重填">&nbsp;<input type="submit" name="submit" value="注册"></td>
			</table>
		</form>
	</body>

</html>

练习三：实现页面<“全选”按钮>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Jquery3</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#selectAll").change(function(){
					if($(this).is(":checked")){
						$(".choose").each(function(){
							$(this).prop("checked",true);
						})
					}
					else{
						$(".choose").each(function(){
							$(this).removeProp("checked");
						})
					}
				})
				
				$(".choose").change(function(){
					var count = 0;
					$(".choose").each(function(){
						if($(this).is(":checked")){
							count++;
						}
					})
					if(count != $(this).length)
						$("#selectAll").removeProp("checked");
					else
						$("#selectAll").prop("checked");
				})
			})
		</script>
	</head>
	<body>
		<table>
		
		<img src="img/task3/head.jpg" /><br>	
		<td><input type="checkbox" id="selectAll">全选</td> 
		<td><img src="img/task3/top.jpg"></td> 
		
		<form >
			<tr>
				<td><input type="checkbox" class="choose" id="one" /></td> 
				<td><img src="img/task3/one.jpg"></td> 
			</tr>
			<tr>
				<td><input type="checkbox" class="choose" id="two" /></td>
				<td><img src="img/task3/two.jpg"></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="choose" id="three" /></td> 
				<td><img src="img/task3/three.jpg"></td> 
			</tr>
			<tr>
			<td><input type="checkbox" class="choose" id="four" /></td> 
			<td><img src="img/task3/four.jpg"></td> 
			</tr>
		</table>
		</form>
	</body>
</html>

练习四：实现市区级连（市为自动加载）

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title>Jquery</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			var citys = new Array();
			citys['北京'] = ["朝阳区", "东城区", "西城区", "海淀区", "宣武区", "丰台区", "怀柔", "延庆", "房山"];
			citys['上海'] = ["宝山区", "长宁区", "丰贤区", "虹口区", "青浦区", "南汇区", "徐汇区", "卢湾区"];
			citys['广州'] = ["天河区", "海珠区", "南沙区", "白云区", "嘉湾区", "越秀区", "黄埔区", "罗岗区", "番寓区", "花都区"];
			citys['深圳'] = ["福田区", "罗湖区", "盐田区", "宝安区", "龙岗区", "南山区", "深圳周边"];
			citys['重庆'] = ["俞中区", "南岸区", "江北区", "沙坪坝区", "九龙坡区", "渝北区", "大渡口区", "北碚区", "巴南区", "万盛区", "涪凌", "江津"];
			citys['天津'] = ["和平区", "河西区", "南开区", "河北区", "河东区", "红桥区", "塘古区", "罗岗区", "开发区", "西青区", "东丽区"];
			
			$(document).ready(function(){
				//加载城市
				$("#city").append("<option value=''>"+"--请选择城市--"+"</option>");
				for(var i in citys){
					$("#city").append("<option value="+i+">"+i+"</option>")
				}
				
				//添加区域
				$("#city").change(function(){
					var city = $(this).val();
					//$("#district").find("option").remove();
					$("#district").empty();
					for(var i in citys[city]) {
						$("#district").append("<option value="+citys[city][i]+">"+citys[city][i]+"</option>");
					}
				})
				
			})
		</script>
	</head>

	<body >
		<form style="background-color: royalblue;align:center;">
			<font color="white">&nbsp;&nbsp;&nbsp;房源查询：</font>
			<select id="city" onchange="loadDistrict()"></select>
			<select id="district"></select>
			<select name="living">
				<option value=0>物业类型</option>
				<option value=1>普通住宅</option>
				<option value=2>公寓</option>
				<option value=3>别墅</option>
				<option value=4>经济适用房</option>
				<option value=5>商住楼</option>
				<option value=6>写字楼</option>
			</select>

			<input type="submit" value="查询" />
		</form>
	</body>

</html>