结合本章课学习到的知识完成了表单控制小案例

原创 2018-12-06 23:27:50 6
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{font-size: 11px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{font-size: 11px}

.form{width: 500px;height: 700px;border:3px solid #ccc;border-radius: 5px;margin:10px auto;}
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#agree").focus(function(){
$("#reg").removeAttr("disabled")
});
$("#refuse").focus(function(){
$("#reg").attr("disabled","")
})


$("#name").click(function(){
$("#name").css("background-color","#DD5246")
})
$(':selected').css('background','blue');
$(':enabled').css('background','yellow');
$(':selected').css('background','blue');

});
</script>


</head>
<body>
<!-- enabled 激活的input元素
disabled 禁用状态
selected 被选取的
checked  所有被选中的 -->

<div>
<h3 >会员注册登记</h3>
<hr>
<form action="" style="margin-left:100px;">
<label for="name">用户名:</label>
   <input type="text" name="sex" id="name" />
   <br/><br/>
   <label for="password">密&emsp;&nbsp;&nbsp;码:</label>
   <input type="password" name="sex" id="password" />
   <br/><br/>
   <label for="">性别:</label>&emsp;&emsp;
   <input type="radio" name="sex" id="sex1" value="男" checked /><label for="sex1">男</label>&emsp;&emsp;
   <input type="radio" name="sex" id="sex2" value="女" />
   <label for="sex2">女</label>
   <br/><br/>
   <label for="hobby">兴趣:</label>
   <input type="checkbox" name="hobby" id="hobby" />
<label for="hobby">足球</label>
   <input type="checkbox" name="hobby" id="hobby1" />
<label for="hobby1">蓝球</label>
   <input type="checkbox" name="hobby" id="hobby2" />
   <label for="hobby2">排球</label>&emsp;&emsp;
   <br/><br/>
   <label for="edu">学历:</label>
   <select name="" id="edu">
   <option>幼儿园</option>
<option>小学</option>
<option selected>初中</option>
<option>高中</option>
<option>大学</option>
   </select>
   <br/><br/>
   <label for="">注册协议:</label>
   <input type="radio" name="sex" id="agree" /> 
   <label for="agree">同意</label>
   <input type="radio" name="sex" id="refuse" checked/> 
   <label for="refuse">拒绝</label><br/><br/>   
   <input type="button" id="reg" value="注册" style="width:80px;height:30px" disabled/> &emsp;&emsp;
   <input type="reset" ="reset1" value="取消" style="width:80px;height:30px" />
   <br/><br/><br/><br/>
</form>
</div>
</body>
</html>

20181206232640.png

批改老师:Peter-Zhu批改时间:2018-12-07 08:55:45
老师总结:jQuery中的DOM操作,功能强大,也是最吸引人的地方

发布手记

热门词条