HTML及CSS代码段:
<body>
<style type="text/css">
input{
margin:5px; /*设置input元素的外边距为5像素*/
}
.input {
font-size: 12pt; /*设置文字大小*/
color: #333333; /*设置文字颜色*/
background-color:#cef; /*设置背景颜色*/
border: 1px solid #000000; /*设置边框*/
}
</style>
<form id="form1" name="form1" method="post" action="">
姓 名:<input type="text" name="name" id="name" />
<br />
籍 贯:<input name="native" type="text" id="native" />
<br />
生 日:<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>
</body>
JS代码段:
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){ //绑定"换肤"按钮的单击事件
$("form>input").addClass("input"); //为表单元素的直接子元素input添加样式
});
$("#default").click(function(){ //绑定“恢复默认”按钮的单击事件
$("form>input").removeClass("input"); //移除为表单元素的直接子元素input添加的样式
});
});
</script>