jQuery小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#q1,#q2").hide();
//focus：当前对象获取焦点时
$(".yyq").focus(function(){
$(this).css("background-color","#cccccc");
});
//blur：当前对象获取到焦点又离开焦点之后
$(".yyq").blur(function(){
$(this).css("background-color","beige");
});
var login = document.getElementById("login");
login.addEventListener("submit",function(event){
var name = document.getElementsByName("name")[0];
var pwd = document.getElementsByName("pwd")[0];
if(name.value.length<=0){
//alert("请输入姓名！");
$("#q1").show();
event.preventDefault();
return false;
}else if(name.value.length>0){
$("#q1").hide();
}
if(pwd.value.length<=0){
//alert("请输入密码！");
$("#q2").show();
event.preventDefault();
return false;
}else if(pwd.value.length>0){
$("#q2").hide();
}
});
});
</script>
</head>
<body>
<form action="success.html" id="login" method="post">
姓名：<input class="yyq" type="text" name="name" /><span id="q1">请输入你的姓名</span><br>
密码：<input class="yyq" type="password" name="pwd" /><span id="q2">请输入你的密码</span><br />
<input type="submit" value="提交" /><!--<a href="success.html"></a>-->
</form>
</body>
</html>
当鼠标移动到input框中则会改变当前input的背景颜色，离开之后则会变成另一种颜色。
如果点击提交的时候姓名为空，则会提示“请输入你的姓名”，
如果密码为空则会提示“请输入你的密码”
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
