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("focus")
        })
    })
</script>

2. 多行文本框应用 

例如某网站的评论框，需要设置最大高度和最小高度：

<form>
   <div class="msg">
       <div class="msg_caption">
           <button class="bigger">放大</button>
           <button class="smaller">缩小</button>
       </div>
       <div>
           <textarea id="comment" rows="8" cols="20">
               现在前端技术发展飞快，前端都能做app了，那么项目中，也会遇到调用安卓手机基层的一些功能，比如调用摄像头，完成扫描二维码功能下面我就为大家讲解一下，我在项目中调用这功能的过程。
           </textarea>
       </div>
   </div>
</form>

功能：

当单击放大按钮，如果评论框小于500px,就在原有高度增加50px;

当单击放大按钮，如果评论框大于50px,就在原有高度减去50px;

 $(function(){
       //控制评论框的高度
        var $comment=$("#comment");//获取评论框
        $(".bigger").click(function(){
            if($comment.height()<500){
                $comment.height($comment.height()+50)
            }
        });
        $(".smaller").click(function(){
            if($comment.height()>50){
                $comment.height($comment.height()-50)
            }
        });
})

 //避免太生硬，缺乏缓冲效果，建议采用动画效果

$(function(){
    //控制评论框的高度
    var $comment=$("#comment");//获取评论框
    $(".bigger").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height()<500){
                $comment.animate({height:"+=50"},400)
            }
        }

    });
    $(".smaller").click(function(){
        if(!$comment.is(":animated")){
            if($comment.height()>50){
                $comment.animate({height:"-=50"},400)
            }
        }
    });
})

3.复选框 

对复选框的基本操作就是全选、反选、全不选等操作。

<form>
  你的爱好是什么？<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="网球"/>网球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <input type="checkbox" name="items" value="台球"/>台球
    <input type="checkbox" name="items" value="高尔夫"/>高尔夫<br/>
    <input type="button" id="checkedAll" value="全选">
    <input type="button" id="checkedNo" value="全不选">
    <input type="button" id="checkedRev" value="反选">
    <input type="button" id="send" value="提交">
</form>

$(function(){
       //全选
        $("#checkedAll").click(function(){
            $("[name=items]:checkbox").attr("checked",true)
        })
        //全不选
        $("#checkedNo").click(function(){
            $("[name=items]:checkbox").attr("checked",false)
        })
        //反选
        $("#checkedRev").click(function(){
            $("[name=items]:checkbox").each(function(){
               this.checked=!this.checked
            })
        })
        //提交
       $("#send").click(function(){
           var str='你选中的是：\r\n';
           $("[name=items]:checkbox:checked").each(function(){
               str +=$(this).val()+'\r\n'
           })
           alert(str)

       })
})

 4.下拉框

<div class="select" style="height:200px;width:300px;">
    <div class="content_select" style="float: left;">
        <select multiple id="select1" style="width:100px;height:160px">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
        </select>
        <div>
            <button id="add">选中添加到右边</button><br/>
            <button id="add_all">全部添加到右边</button>
        </div>
    </div>
    <div class="content_select" style="float: left;margin-left:30px;">
        <select multiple id="select2" style="width:100px;height:160px">
        </select>
    </div>
</div>

功能：

（1）将左边选中的选项添加给右边

（2）将左边全部添加给右边

（3）双击某个选项添加到右边

 $(function(){
      //将左边选中的选项添加给右边
        $("#add").click(function(){
            var $options=$("#select1 option:selected");
            var $remove=$options.remove();
            $remove.appendTo("#select2")
        })
        //将左边全部添加给右边
        $("#add_all").click(function(){
            var $options=$("#select1 option");
            var $remove=$options.remove();
            $remove.appendTo("#select2")
        })
        //双击某个选项添加到右边
        $("#select1").ondblclick(function(){
            var $options = $("option:selected",this);
            $options.appendTo("#select2")
        })
})

  5.表单验证

建议使用插件form.validate验证，这里就不叙述。