jQuery对表单的操作

表单应用

 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(