parent child选择器

最新推荐文章于 2019-10-27 20:55:46 发布

原创最新推荐文章于 2019-10-27 20:55:46 发布 · 178 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML创建表单并利用jQuery和CSS进行界面美化的小案例。通过简单的表单元素，如输入框和按钮，结合jQuery的事件监听，实现了一键换肤的功能，展示了如何动态改变表单样式的技巧。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script language="javascript"src="js/jquery-1.11.1.min.js"></script>
		<title></title>
	</head>
	<body>
		<form id="form1"name="form1"method="post"action="">
			姓&nbsp;&nbsp;名:<input type="text"name="name"id="name"/>
			<br/>
			籍&nbsp;&nbsp;贯:<input name="native"type="text"id="native"/>
			<br/>
			生&nbsp;&nbsp;日:<input type="text"name="birthday"id="birthday"/>
			<br/>
			E-mail:<input type="text"name="email"id="email"/>
			<br/>
			<span>
				<input type="button"name="change"id="change"value="换肤"/>
			</span>
			<input type="button"name="default"id="default"value="恢复默认"/>
			<br/>
		</form>
		<style type="text/css">
			input{
				margin:5px;
			}
			.input{
				font-size:12pt;
				color:#333333;
				background-color:#cef;
				border:1px solid #000000;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#change").click(function(){
					$("form>input").addClass("input");
				});
			});
		</script>
	</body>
</html>