使用jQuery操作表单和表格

6.1.1表单标记

1、action属性
action属性是指指定处理表单提交数据的脚本文件。

<form action="URL">....<form>

url:表单的提交地址。
2、表单名称name属性
用于给表单命名，不是必须属性。

<form name="form_name">...<form>

form_name:表单名称
3、提交方式method属性
用来定义处理程序从表单中获得信息的方式，可以取值为get或post ，决定表单中已收集的数据用什么方式提交到服务器。

<form method="method">....<form>

method:提交方式，可以为get或post。
4、编码方式enctype属性
表单中的enctype参数用于设置表单信息提交的编码方式。

<form enctype="value">....<form>

value:取值如下。

取值	描述
test/plain	以纯文本的形式传送
application/x-www-form-urlencoded	默认编码方式
multipart/form-data	MIME编码，上传文件的表单必须选择项

6.2操作表单元素

6.2.1操作文本框
1、获取文本框的值：

var textCon = $("#id").val();
var textCon = $("#id").attr("value");

2、设置文本框的值，可以使用attr()方法：

$("#id").attr("value","要设定的值");

3、设置文本框不可编辑的方法

$("#id").attr("disabled","disabled");

4、设置文本框可编辑的方法：

$("#id").removeAttr("disabled");

【例 6-8】获取文本框的值以及切换编辑状态

  <input type="text" id="testInput"/>
  <input type="submit" value="提交" name="tj" id="tj"/>
  <input type="button" value="修改" name="xg" id="xg"/>
  <script type="text/javascript">
   $(document).ready(function(){
    $("#tj").click(function(){
     if($("#testInput").val() != ""){
      alert($("#testInput").val()); 
      $("#testInput").attr("disabled","disabled");
     }else{
      alert("请输入文本内容！")
      $("testInput").focus(); 
      return false;
     }
    });
    $("#xg").click(function(){
     if($("#testInput").attr("disabled") == "disabled"){
      $("#testInput").removeAttr("disabled"); 
     }
    });
   })
  </script>

6.2.3操作单选按钮和复选框
1、使用attr()方法可以设置选中的单选框和复选框：

 $("#id").attr("checked",true);

2、取消选中单选按钮和复选框：

 $("#id").removeAttr("checked");

3、判断选择状态

 if($("#id").attr("checked")=='checked'){
 }

【例 6-12】使用按钮控制单选框的选中状态

  <form>
   <h3 align="center">选择你喜欢的运动</h3>
   <input type="checkbox" name="hobby" value="游泳" />游泳
   <input type="checkbox" name="hobby" value="足球" />足球
   <input type="checkbox" name="hobby" value="篮球" />篮球
   <input type="checkbox" name="hobby" value="滑冰" />滑冰
   <input type="checkbox" name="hobby" value="滑雪" />滑雪
   <input type="checkbox" name="hobby" value="羽毛球" />羽毛球
   <input type="checkbox" name="hobby" value="乒乓球" />乒乓球<br /><br />
   <input type="button" id="checkAll" value="全选"/>&nbsp;
   <input type="button" id="unCheckAll" value="全不选" />&nbsp;
   <input type="button" id="revBtn" value="反选" />&nbsp;
   <input type="button" id="subBtn" value="提交" />&nbsp;
  </form>
 <script type="text/javascript">
  $(document).ready(function(){
   $("#checkAll").click(function(){
    $("input[type=checkbox]").attr("checked",true);
   })
   $("#unCheckAll").click(function(){
    $("input[type=checkbox]").removeAttr("checked");
   })
   
   $("#revBtn").click(function(){
    $("input[type=checkbox]").each(function(){
     this.checked = !this.checked;
    });
   })
   $("#subBtn").click(function(){
    var msg = "你最喜欢的运动是：\r\n";
    $("input[type=checkbox]:checked").each(function(){
     msg+=$(this).val()+"\r\n";
    });
    alert(msg);
   })
  })
 </script>

6.2.4操作下拉框
1、读取下拉框的值

 var selVal = $("#id").val();

2、设置下拉框的选中项

 $("#id").attr("value",选中项的值);

3、清空下拉菜单

 if($("#id")).empty();

4、向下拉菜单中添加菜单项

if($("#id").append("<option value='值'>文本</option>"));

【例 6-13】jQuery操作下拉框

  <div class="first">
   <select multiple name="hobby" id="hobby" class="sel">
    <option value="游泳">游泳</option>
    <option value="足球">足球</option>
    <option value="篮球">篮球</option>
    <option value="跑步">跑步</option>
    <option value="滑冰">滑冰</option>
    <option value="乒乓球">乒乓球</option>
    <option value="游泳">游泳</option>
    <option value="跳远">跳远</option>
    <option value="跳高">跳高</option>
   </select>
   <div class="sd">
    <button id="add">添加>></button><br /><br />
    <button id="add_all">添加全部>></button>
   </div>
  </div>
  <div class="second">
   <select multiple name="other" id="other" class="sel"></select>
   <div class="sd">
    <button id="to_left"><<删除</button><br /><br />
    <button id="all_to_left"><<全部删除</button>
   </div>
  </div>

 <style type="text/css">
  .first{
   float:left;
   font-size:12px;
  }
  .second{
   padding-left:110px;
   font-size:12px;
  }
  .sel{
   width:80px;
   height:150px;
  }
  .sd{
   padding-top:10px;
  }
 </style>
 <script type="text/javascript">
  $(document).ready(function(){
   $("#add").click(function(){
    var $options = $("#hobby option:selected"); 
    $options.appendTo("#other");    
   })
  $("#add_all").click(function(){
    var $options = $("#hobby option");   
    $options.appendTo("#other");    
   })
  $("#hobby").dblclick(function(){    
   var $options = $("option:selected",this);  
   $options.appendTo("#other");  
  })
  $("#to_left").click(function(){
   var $options = $("#other option:selected"); 
   $options.appendTo("#hobby");    
  })
  $("#all_to_left").click(function(){
   var $options = $("#other option");    
   $options.appendTo("#hobby");     
  })
  $("#other").click(function(){    
   var $options = $("option:selected",this);  
   $options.appendTo("#hobby");    
  })
  })
 </script>