表单应用
1.单行文本框应用
初始化网页,样式如下:
<form>
<fieldset>
<legend>个人基本信息</legend>
<div class="col-line">
<label>名称:</label>
<input id="username" type="text">
</div>
<div class="col-line">
<label>名称:</label>
<input id="pwd" type="password">
</div>
<div class="col-line">
<label>名称:</label>
<textarea id="msg"></textarea>
</div>
</fieldset>
</form>
当文本框获取焦点后,它的颜色要有变化;当它失去焦点后 ,恢复原来的样式。
<style>
.col-line{
height:50px;
}
input,textarea{
border:1px solid #000000;
}
.focus{
border:1px solid red;
background-color: #DBDBDB;
}
</style>
<script>
$(function(){
//为文本添加获取和失焦事件
$(":input").focus(function(){
$(this).addClass("focus")
}).blur(function(){
$(this).removeClass(