使用JQuery快速高效制作网页交互特效第九章所有课后

最新推荐文章于 2019-07-10 20:00:52 发布

不觉清倦

最新推荐文章于 2019-07-10 20:00:52 发布

阅读量1.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：计算机文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/weixin_44269168/article/details/95079109

计算机专栏收录该内容

47 篇文章

订阅专栏

本篇博客详细介绍了如何运用jQuery库创建多种网页交互效果，包括简答三、四、五三个部分，分别从样式设计和代码实现两个角度进行讲解，帮助读者提升网页动态效果的制作能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简答三
样式

*{padding:0; margin:0;font-size:12px;
    line-height:25px;}

.register{
    float:none;
    width: 503px;
    clear:both;
    margin: 0px auto;
}
.register dl{clear: both;}
.register dt{width:120px;
    text-align:right;
    padding-right:5px;
    float: left;
}
.inputs {
    border: 1px solid #333;
    width:120px;
    height: 20px;;
}

.register dl dd div{
    color:#ff0000;
    padding-left:5px;
    display: inline;
}
.btn{width: 60px; text-align: center; height: 26px; margin: 5px 5px 0 0;}

代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>百度注册页面</title>
	<link href="css/reg.css" rel="stylesheet">
</head>

<body>
<div class="register">
	<div class="center"><img src="images/header1.jpg" /></div>
  <form action="success.html" method="post" id="myform">
	  <dl>
		  <dt>用户名：</dt>
		  <dd><input id="user" type="text"  class="inputs"/><div id="userId"></div></dd>
	  </dl>
	  <dl>
		  <dt>密码：</dt>
		  <dd><input id="pwd" type="password"  class="inputs"/><div id="pwdId"></div></dd>
	  </dl>
	  <dl>
		  <dt>确认密码：</dt>
		  <dd><input id="repwd" type="password"  class="inputs"/><div id="repwdId"></div></dd>
	  </dl>
	  <dl>
		  <dt>性别：</dt>
		  <dd><input name="sex" type="radio" value="男" />男 <input name="sex" type="radio" value="女" />女
			  <div id="sexId"></div></dd>
	  </dl>
	  <dl>
		  <dt>电子邮件：</dt>
		  <dd><input id="email" type="text"  class="inputs"/><div id="emailId"></div></dd>
	  </dl>
	  <dl>
		  <dt>出生日期：</dt>
		  <dd><select id="year">
			  <script>
				  for(var i=1900;i<=2015;i++){
					  document.write("<option value="+i+">"+i+"</option>");
				  }
			  </script>
		  </select>年
			  <select id="month">
				  <script>
					  for(var i=1;i<=12;i++){
						  document.write("<option value="+i+">"+i+"</option>");
					  }
				  </script>
			  </select>月
			  <select id="day">
				  <script>
					  for(var i=1;i<=31;i++){
						  document.write("<option value="+i+">"+i+"</option>");
					  }
				  </script>
			  </select>日</dd>
	  </dl>
	  <dl>
		  <dt>&nbsp;</dt>
		  <dd><input name="sub" type="submit" value="注册" class="btn" /> <input name="cancel" type="reset" value="清除"  class="btn"/></dd>
	  </dl>
  </form>
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#email").blur(checkEmail);
		$("#pwd").blur(checkPass);
		$("#repwd").blur(checkRePass);
		$("#user").blur(checkName);
		$("#sexId").blur(checkSex);
		$("form").submit(function(){
			var flag=true;
			if(!checkEmail())flag=false;
			if(!checkPass())flag=false;
			if(!checkRePass())flag=false;
			if(!checkName())flag=false;
			if(!checkSex())flag=false;
			return flag;
		});
	});
	/*
	用户名
	 */
	function checkName(){
		var user = $("#user").val();
		var userId = $("#userId");
		var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
		if (user == "") {
			userId.html("用户名长度不能为空");
			return false;
		}
		else if (regUser.test(user) == false) {
			userId.html("用户名必须由字母、数字和下划线组成");
			return false;
		}
		userId.html("");
		return true;
	}
	/*
	密码
	 */
	function checkPass(){
		var pwd = $("#pwd").val();
		var pwdId = $("#pwdId");
		if (pwd == "") {
			pwdId.html("密码不能为空");
			return false;
		}
		else if (pwd.length < 6 || pwd.length > 12) {
			pwdId.html("密码长度为6-12字符");
			return false;
		}
		pwdId.html("");
		return true;
	}
	/*
	确认密码
	 */
    function checkRePass(){
		var pwd = $("#pwd").val();
		var repwd = $("#repwd").val();
		var repwdId = $("#repwdId");
		if (repwd != pwd) {
			repwdId.html("两次输入的密码不一致");
			return false;
		}
		repwdId.html("");
		return true;
	}
	/*
	邮箱
	 */
	function checkEmail(){
		var email = $("#email").val();
		var emailId = $("#emailId");
		var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
		if (email == "") {
			emailId.html("电子邮箱不能为空");
			return false;
		}
		else if (regEmail.test(email) == false) {
			emailId.html("邮箱不正确");
			return false;
		}
		emailId.html("");
		return true;
	}
	/*
	单选按钮
	 */
	function checkSex(){
		var sex = $("#myform :checked").val();
		var sexId = $("#sexId");
		if (sex != '男' && sex != '女') {
			sexId.html("请选择性别");
			return false;
		}
		return true;
	}
</script>
</body>
</html>

简答四
样式

*{
    margin:0;
    padding:0;
    font-size:14px;
    line-height:20px;
}
.main{
    width:900px;
    margin: 0 auto;
}
.main dl{clear: both; height: 30px;}
.main dl dt{
    text-align:right;
    float: left;
    width:180px;
    height:25px;
    padding-right:5px;
}
.inputs{
    width:130px;
    height:16px;
    border:solid 1px #666666;
    float:left;
    margin-right:5px;
}
.main dl dd div{
    display: inline;
    margin-left:10px;
    color:#F00;
}

代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>使用正则表达式验证表单内容</title>
	<link href="css/reg.css" rel="stylesheet">
</head>

<body>
<div class="main"><img src="images/logo.jpg" alt="logo"/>
	<form action="" id="myform" method="post">
		<dl>
			<dt>用户名：</dt>
			<dd><input id="user" type="text" class="inputs" onblur="checkName()" /><div id="user_prompt"></div></dd>
		</dl>
		<dl>
			<dt>Email地址：</dt>
			<dd><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt"></div></dd>
		</dl>
		<dl>
			<dt>手机号码：</dt>
			<dd><input id="mobile" type="text" class="inputs" onblur="checkPhone()" /><div id="mobile_prompt"></div></dd>
		</dl>
		<dl>
			<dt>登录密码：</dt>
			<dd><input id="pwd" type="password"  class="inputs" onblur="checkPass()" /><div id="pwd_prompt"></div></dd>
		</dl>
		<dl>
			<dt>密码确认：</dt>
			<dd><input id="repwd" type="password"  class="inputs" onblur="checkRePass()" /><div id="repwd_prompt"></div></dd>
		</dl>
		<dl>
			<dt>&nbsp;</dt>
			<dd><input name="" type="image" src="images/login.jpg" /></dd>
		</dl>
	</form>
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("form").submit(function(){
			var flag=true;
			if(!checkEmail())flag=false;
			if(!checkPass())flag=false;
			if(!checkRePass())flag=false;
			if(!checkName())flag=false;
			if(!checkPhone())flag=false;
 			return flag;
		});
	})
	function checkName(){
		var user=$("#user").val();
		var $userId=$("#user_prompt");
		var regUser=/^[a-zA-Z][a-zA-Z0-9]{4,16}$/;
		if(regUser.test(user)==false){
			$userId.html("用户名不正确,请重新输入!");
			return false;
		}
		return true;
	}
	function checkPass(){
		var pwd=$("#pwd").val();
		var $pwdId=$("#pwd_prompt");
		var regPwd=/^[a-zA-Z0-9]{4,10}$/;
		if(regPwd.test(pwd)==false){
			$pwdId.html("密码不正确,请重新输入!");
			return false;
		}
		return true;
	}
	function checkRePass(){
		var $pwd=$("#pwd");
		var $repwd=$("#repwd");
		var $divId=$("#repwd_prompt");
		$divId.html("");
		if($pwd.val()!=$repwd.val()){
			$divId.html("两次输入的密码不一样");
			return false;
		}
		return true;
	}
	function checkEmail(){
		var email=$("#email").val();
		var $emailId=$("#email_prompt");
		var regEmail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
		if(regEmail.test(email)==false){
			$emailId.html("邮箱不正确,请重新输入!");
			return false;
		}
		return true;
	}
	function checkPhone(){
		var mobile=$("#mobile").val();
		var $mobileId=$("#mobile_prompt");
		var regMobile=/^1\d{10}$/;
		if(regMobile.test(mobile)==false){
			$mobileId.html("手机号码不正确,请重新输入!");
			return false;
		}
		return true;
	}
</script>
</body>
</html>

简答五
样式

*{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:25px;
}
.main{
    width:470px;
    margin: 0 auto;
}

.main dl{clear: both; height: 30px;}
.main dl dt{
    text-align:right;
    float: left;
    width:100px;
    height:25px;
    padding-right:5px;
}
.inputs{
    width:100px;
    height:16px;
    border:solid 1px #666666;
    float:left;
    margin-right:5px;
}
.main dl dd div{
    display: inline;
    margin-left:10px;
    color:#F00;
}

代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>制作注册验证</title>
	<link href="css/reg.css" rel="stylesheet">
</head>

<body>
<div class="main"><img src="images/top.jpg"  alt="top"/>
	<form action="" method="post" id="myform">
		<dl>
			<dt class="left">用户名：</dt>
			<dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" /><div id="user_prompt" class="prompt"></div></dd>
		</dl>
		<dl>
			<dt class="left">密码：</dt>
			<dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" onfocus="showPwd()" /><div id="pwd_prompt" class="prompt"></div></dd>
		</dl>
		<dl>
			<dt class="left">&nbsp;</dt>
			<dd><input name="" type="image" src="images/sumbit_btn.jpg" /></dd>
		</dl>
	</form>
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("form").submit(function(){
			var flag=true;
			if(!checkPwd())flag=false;
			if(!checkUser())flag=false;
			return flag;
		});
		$("#user").focus(function(){
			var divId=$("#user_prompt");
			divId.html("首位为字母的4-16个字母,数字,下划线")
		})
		$("#pwd").focus(function(){
			var divId=$("#pwd_prompt");
			divId.html("4-10个字母和下划线")
		})
	})
	function checkUser() {
		var user = $("#user").val();
		var divId=$("#user_prompt");
		var regUser = /^[a-zA-Z]\w[a-zA-Z0-9]{4,16}$/;
		if (regUser.test(user) == false) {
			divId.html("用户名不正确")
			return false;
		}
		divId.html("")
		return true;
	}
	function checkPwd(){
		var pwd = $("#pwd").val();
		var divId=$("#pwd_prompt");
		var regPwd=/^[a-zA-Z]\w{4,10}$/;
		if (regPwd.test(pwd)==false) {
			divId.html("密码不正确")
			return false;
		}
		divId.html("")
		return true;
	}


</script>
</body>
</html>