Jquery对表单的常见操作
表单应用一个表单有3个基本组成部分
表单标签：包含处理表单数据应用的服务器端程序URL以及数据提交到后台服务器的方法；
表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框；
表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传输到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。单行文本框应用前提是引入jquery的包如：
<scripttype="text/javascript"src="../../../js/jquery-1.7.1.min.js"/>
<scripttype="text/javascript"src="../../../js/jquery-1.7.js"/>
获取或失去焦点改变样式
html代码
<formaction="#"method="post"id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<labelfor="username">名称：</label>
<inputid="username"type="text">
</div>
<div>
<labelfor="pass">密码：</label>
<inputid="pass"type="password">
</div>
<div>
<labelfor="msg">详细信息</label>
<textareaid="msg"rows="3"cols="20"></textarea>
</div>
</fieldset>
</form>
css代码
<styletype="text/css">
.focus{
border:1pxsolid#f00;
background:#fcc;
}
input:focus,textarea:focus{
border:1pssolid#f00;
background:#fcc;
}
</style>
jQeruy代码
<scripttype="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})
})
</script>
复选框应用对复选框进行全选反选全不选等操作html代码
html代码
<form>
你爱好的运动是？<br/>
<inputtype="checkbox"name="items"value="足球"/>足球
<inputtype="checkbox"name="items"value="篮球"/>蓝球
<inputtype="checkbox"name="items"value="羽毛球"/>羽毛球
<inputtype="checkbox"name="items"value="乒乓球"/>乒乓球<br>
<inputtype="button"id="CheckedAll"value="全选/全不选"/>
<inputtype="button"id="CheckedRev"value="反选"/>
<inputtype="button"id="send"value="提交"/>
</form>
jQuery代码
<scripttype="text/javascript">
$(function(){
//一个按钮控制全选/全不选（按钮id为CheckedAll）
$("#CheckedAll").toggle(function(){
$('[name=items]:checkbox').attr('checked',false);
},function(){
$('[name=items]:checkbox').attr('checked',true);
});
//全选按钮
$("#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).attr("checked",!$(this).attr("checked"));
});
});
//获取选中的复选框的值
$("#send").click(function(){
varstr="你选择的是：\r\n";
$('[name=items]:checkbox:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});
})
</script>
将选中的选项添加给对方将全部的选项添加给对方双击某个选项将其添加给对方
（这里仅做出了从左边添加到右边，其他的类似）
html代码
<divalign="left"style="margin-top:5px;position:absolute;">
<selectmultipleid="select1"style="width:150px;height:160px;">
<optionvalue="1">选项1</option>
<optionvalue="2">选项2</option>
<optionvalue="3">选项3</option>
<optionvalue="4">选项4</option>
<optionvalue="5">选项5</option>
<optionvalue="6">选项6</option>
<optionvalue="7">选项7</option>
<optionvalue="8">选项8</option>
</select><br>
<spanid="add">选中添加到右边>></span><br>
<spanid="add_all">全部添加到右边>></span>
</div>
<divstyle="margin-top:5px;margin-left:180px;position:absolute">
<selectmultipleid="select2"style="width:150px;height:160px;">
</select><br>
<spanid="remove">选中删除到左边<<</span><br>
<spanid="remove_all">全部删除到左边<<</span>
</div>
jQuery代码
<scripttype="text/javascript">
$(function(){
$("#add").click(function(){
var$options=$("#select1option:selected");//获取选中的选项
var$remove=$options.remove();//删除下拉列表中选中的选项
$remove.appendTo('#select2');//追加给对方
});
$("#add_all").click(function(){
var$options=$("#select1option");//获取全部的选项
$options.appendTo('#select2');//追加给对方
});
//双击选项添加给对方
$("#select1").dblclick(function(){
var$options=$("option:selected",this);//获取选中的选项
var$remove=$options.remove();//删除下拉列表中选中的选项
$remove.appendTo('#select2');//追加给对方
});
})
</script>
/*获得TEXT.AREATEXT的值*/
vartextval=$("#text_id").attr("value");
//或者
vartextval=$("#text_id").val();
/*获取下拉列表的值*/
varselectval=$('#select_id').val();
//文本框，文本区域：
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');//填充内容
//多选框checkbox：
$("#chk_id").attr("checked",'');//使其未勾选
$("#chk_id").attr("checked",true);//勾选
if($("#chk_id").attr('checked')==true)//判断是否已经选中
//下拉框select：
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项
$("<optionvalue='test'>test</option><option
value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty()；//清空下拉框