<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
* {
background-color: #d4edda;
text-align: center;
font-size: 20px;
}
.form-control {
width: 500px;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.select {
width: 265px;
height: 47px;
}
</style>
</head>
<body>
<h2 class="title">注册</h2>
<form action="" onsubmit="return false;">
<!-- onsubmit="return false;可以不用提交 -->
<p>
账户:
<input type="text" class="form-control" id="account" />
<div id="ac" style="color: #28a745;font-size: 12px;display: none;">黑执事大人😊</div>
</p>
<p>
密码:
<input type="password" class="form-control" id="password" />
<div id="pw" style="color: #28a745;font-size: 12px;display: none;">黑执事大人好可爱(●'◡'●)</div>
</p>
<p>
省市:
<select id="prov" class="form-control select">
<option value="">请选择</option>
<option value="1">安徽</option>
<option value="2">江苏</option>
<option value="3">河南</option>
</select>
<select id="city" class="form-control select">
<option value="">请选择</option>
</select>
</p>
<button>注册</button>
<div id="xiaohonghua" style="margin-top:20px";color:red;font-size:18px;display:none;>原始玉尊</div>
</form>
</body>
<script>
// dom元素添加，修改，删除
// append,appendTO,prepend,prependTo
// after,before,insertAfter,insertBefore
// 选择器 第一个，最后一个，奇数，偶数
// 指定 eq,gt,lt
// 鼠标事件:click,dblclick,mouseenter,mouseleave,houer
// 表单事件
// 1.submit 当提交表单时，会触发事件
// $("form").submit(function(){
// // console.log("这是表单事件");
// let account = $("#account").val();
// alert(account);
// });
// $("button").submit(function(){
// // console.log("这是表单事件");
// let account = $("#account").val();
// alert(account);
// });
// // 2.change 当select元素发生变化时，触发的事件
// $("#prov").change(function () {
// let prov = $("#prov").val();
// let html = '<option value="">请选择</option>';
// if (prov == 2) {
// html += '<option value="11">黑执事大人1</option>';
// html += '<option value="12">黑执事大人2</option>';
// html += '<option value="13">黑执事大人3</option>';
// html += '<option value="14">黑执事大人4</option>';
// }
// $("#city").html(html);
// });
// // 3.focus 当元素获得焦点时，触发事件
// $("#accout").focus(function() {
// // alert("嘿嘿嘿");
// // console.log("请输入账户");
// // $("div").show();
// $("#ac").show();
// });
$("password").focus(function() {
// console.log("请输入密码");
$("#pw").show();
});
$("#account").focus(function () {
$("#ac").show();
});
$("#password").focus(function(){
$("#pw").show();
})
// 4.blur元素失去焦点时，触发事件
$("#account").blur(function(){
$("#ac").hide();
})
$("#password").blur(function(){
$("#pw").hide();
})
$("#account").blur(function(){
let account = $("#account").val();
console.log(account);
if(!account){
$(this).focus();
}else{
$("#ac").hide();
}
});
// this，代表本元素，也是选择器，比较常用
// 键盘事件
// 按一个键，它们三个方法的执行顺序是：keydown,keyup,keypress
// 1.keydown 键盘的键，按下就触发事件
// 键盘按下就触发，但是输入的文字是按下去，输入的文字比它晚执行
$("#account").keydoen(function(){
let account = $("#account").val();
$("#xiaohonghua").text(axxount);
console.log(1);
})
// // 3.keypress 键盘的键，松开就触发事件
// $("#account").keypress(function(){
// let account = $("#account").val();
// $("#xiaohonghua").text(axxount);
// console.log(1);
// })
// //2.keyup 键盘的键，松开就触发
// $("#account").keyup(function(){
// let account = $("#account").val();
// $("#xiaohonghua").text(axxount);
// console.log(1);
// })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
* {
background-color: #d4edda;
text-align: center;
font-size: 20px;
}
.form-control {
width: 500px;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
button {
width: 600px;
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.select {
width: 265px;
height: 47px;
}
</style>
</head>
<body>
<h2 class="title">注册</h2>
<form action="" onsubmit="return false;">
<!-- onsubmit="return false;可以不用提交 -->
<p>
账户:
<input type="text" class="form-control" id="account" />
<div id="ac" style="color: #28a745;font-size: 12px;display: none;">黑执事大人😊</div>
</p>
<p>
密码:
<input type="password" class="form-control" id="password" />
<div id="pw" style="color: #28a745;font-size: 12px;display: none;">黑执事大人好可爱(●'◡'●)</div>
</p>
<p>
省市:
<select id="prov" class="form-control select">
<option value="">请选择</option>
<option value="1">安徽</option>
<option value="2">江苏</option>
<option value="3">河南</option>
</select>
<select id="city" class="form-control select">
<option value="">请选择</option>
</select>
</p>
<button>注册</button>
<div id="xiaohonghua" style="margin-top:20px";color:red;font-size:18px;display:none;>原始玉尊</div>
</form>
</body>
<script>
$("form").submit(function(){
let account = $("#account").val();
if(!account){
// alert('请输入账号');
// $(xiaohonghua).text('请输入账号');
// $(xiaohonghua).show();
msg("请输入账号");
return false;
}
if(!account == 'admin' || account =="奖励一朵小红花"){
// alert('账户已存在');
// $(xiaohonghua).text('用户已存在');
// $(xiaohonghua).show();
msg('账户已存在')
return false;
}
let password = $("#password").val();
if(!password){
// alert('请输入密码');
// $(xiaohonghua).text('请输入密码');
// $(xiaohonghua).show();
msg('请输入密码');
return false;
}
if(password.length < 6){
// alert('请输入大于6位的密码');
// $(xiaohonghua).text('请输入大于6位的密码');
// $(xiaohonghua).show();
msg('请输入大于6位的密码');
return false;
}
alert('注册成功');
//
function msg(data){
$("#ac_input").text(data);
$("#ac_input").show();
}
$("#account").keydown(function(){
$("#ac_input").hide();
})
$("#password").keydown(function(){
$("#ac_input").hide();
})
$(document).ready(function(){
alert("欢迎您");
});
});
</script>
</html>
浙公网安备 33010602011771号