标签：
表单由表单标签、表单域和表单按钮组成。
例：获取和失去焦点改变样式
首先，在网页中创建一个表单，HTML代码如下
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" />
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20"></textarea>
</div>
</fieldset>
</form>当文本框获取焦点后，它的颜色需要有变化;当它失去焦点后，则要恢复原来的样式。此功能极大地提升用户体验，使用户的操作可以得到及时的反馈。
可以使用CSS中的伪类选择符来实现以上的功能
CSS代码如下
input:focus , textarea:focus{
boreder: 1px solid #f00
background: #fcc;
}但是IE6并不支持除超链接元素之外的:hover伪类选择符，此时可以用jquery来弥补ie6对css支持的不足
首先在CSS中添加一个类名为focus的样式。
.focus {
border: 1px solid #f00;
background: #fcc;
} 然后再添加获取焦点和失去焦点事件
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})首先创建一个表单，其中包含评论框
<form>
<div class = "msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" clos="20">
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化
多行文本框高度变化多行文本框高度变化多行文本框高度变化
</div>
</div>
</form>
<style type="text/css">
/*定义全局属性*/
* {
margin:0; /*外边距0px*/
padding:0;/*内边距0px*/
font:normal 12px/17px Arial; /*字体颜色，默认，字体大小，字体*/
}
/*定义消息显示区*/
.msg {
width:300px; /*宽度300px*/
margin:100px; /*定义外边距100px*/
}
/*定义消息中的标题*/
.msg_caption {
width:100%; /*宽度100%，此处就是300px*/
overflow:hidden; /*溢出范围就会自动裁剪*/
margin-bottom:1px;/*内底边距1px*/
}
/*定义消息菜单选项*/
.msg_caption span {
display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
float:left; /*浮动在左边*/
margin:0 2px; /*外边距上下为0左右2px*/
padding:4px 10px; /*内边距上下为4px左右10px*/
background:#898989; /*背景颜色*/
cursor:pointer;/*鼠标的形状，手形*/
color:white; /*字体颜色*/
}
/*定义消息文本域*/
.msg textarea{
width:300px; /*宽度300px*/
height:80px;/*高80px*/
border:1px solid #000;/*边框大小1px，边框粗细 solid 边框颜色 黑色*/
}
</style>然后，需要思考以下两种情况
(1)当单击放大按钮后，如果评论框的高度小于500px，则在原有高度的基础上增加50px。
(2)当单击”缩小”按钮后，如果评论框的高度大于50px，则在原有高度的基础上减去50px。
$(function(){
var $comment = $("#comment");//获取评论宽
$(".bigger").click(function(){//放大按钮
var height = $comment.height();//当前评论框高度
var number = 50;//增量
if( height < 500){
//重新设置高度
$comment.height(height + number);
}
});
$(".smaller").click(function(){//缩小按钮
var height = $comment.height();//当前评论框高度
var number = 50;//减量
if( height > 50){
//重新设置高度
$comment.height(height - number);
}
});
});但是，此时评论框显得很呆板，缺乏缓冲效果。改用自定义动画animate来实现。
$(function(){
var $comment = $("#comment");//获取评论宽
$(".bigger").click(function(){//放大按钮
var height = $comment.height();//当前评论框高度
var number = 50;//增量
if(!$comment.is(":animated")){//判断是否处于动画
if( height < 500){
//重新设置高度
//$comment.height(height + number);
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({height: height + number},300);
}
}
});
$(".smaller").click(function(){//缩小按钮
var height = $comment.height();//当前评论框高度
var number = 50;//减量
if(!$comment.is(":animated")){//判断是否处于动画
if( height > 50){
//重新设置高度
//$comment.height(height - number);
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({height: height - number},300);
}
}
});
});通过控制多行文本框的滚动条的变化，使文本框里的内容滚动。
与控制高度的方法相同，只不过此处需要控制的是另一个属性，scrollTop。
$(".up").click(function(){//向上翻一页
var height = $comment.height();//当前评论框高度
if(!$comment.is(":animated")){//判断是否处于动画
if( height > 50){
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({scrollTop: "-="+height},300);
}
}
});
$(".down1").click(function(){//向下翻一页
var height = $comment.height();//当前评论框高度
if(!$comment.is(":animated")){//判断是否处于动画
//清空当前正在执行动画，然后在加入动画
$comment.stop(true).animate({scrollTop: "+="+height},300);
}
});
对复选框最基本的应用，就是对复选框进行全选、反选和全不选等操作。复杂的操作要与选项挂钩，来达到各种级联反应效果。
首先在空白网页中创建一个表单，其中放入一组复选框，HTML代码如下：
<form action="" method="post" id="regForm">
你爱好的运动是？<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="button" id="CheckedAll" value="全选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反选"/>
<input type="button" id="send" value="提交"/>
</form>如果需要使复选框处于选中或者不选状态，必须通过控制元素的checked属性来达到目的。
如果属性checked的值为true，说明被选中；如果值为false，说明没被选中。因此可以基于这个属性来完成需求。
<script type="text/javascript">
$(function(){
//全选
$("#CheckedAll").click(function(){
$(‘[name=items]:checkbox‘).prop(‘checked‘, true);
});
//全不选
$("#CheckedNo").click(function(){
$(‘[type=checkbox]:checkbox‘).prop(‘checked‘, false);
});
//反选
$("#CheckedRev").click(function(){
$(‘[name=items]:checkbox‘).each(function(){
//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
//$(this).attr("checked", !$(this).prop("checked"));
//$(this).prop("checked", !$(this).prop("checked"));
//直接使用JS原生代码，简单实用
this.checked=!this.checked;
});
});
//输出值
$("#send").click(function(){
var str="你选中的是：\r\n";
$(‘[name=items]:checkbox:checked‘).each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});
})如果我们要实现，用一个checkbox选项，代替全选和全不选操作。将如何实现呢？
//全选/全不选
$("#CheckedAll").click(function(){
if(this.checked){//如果当前单击的复选框被选中
$(‘[name=items]:checkbox‘).prop(‘checked‘, true);
}else{
$(‘[name=items]:checkbox‘).prop(‘checked‘, false);
}
});进一步观察思考后发现，所有复选框的checked属性的值和控制全选的复选框的checked属性的值是相同的，因此可以省略if判断，直接赋值。
//全选/全不选
$("#CheckedAll").click(function(){//
$(‘[name=items]:checkbox‘).prop(‘checked‘, this.checked);
});当单击id为CheckedAll的复选框后，复选框组将被选中。当在复选框组里取消某一个选项的选中状态时，id为“CheckedAll”的复选框并没有被取消选中状态，而此时需要它和复选框组能够联系起来，即复选框组里如果有一个或者更多没选中时，则取消id为CheckedAll复选框的选中状态；如果复选框组都被选中时，则id为CheckedAll的复选框也自动被选中。
因此需要对复选框组进行操作，以通过它们来控制id为CheckedAll的复选框。具体实现思路如下：
(1)对复选框组绑定单击事件。
(2)定义一个flag变量，默认为true
(3)循环复选框组，当有没被选中的项时，则把变量flag的值设置为false。
(4)根据变量flag的值来设置id为CheckedAll的复选框是否选中
①如果flag为true，说明复选框组都被选中
②如果flag为false，说明复选框组至少有一个未被选中。
根据以上思路，可以写出如下jquery代码：
$(function(){//网页加载时
$("[name=items]:checkbox").click(function(){
var flag = true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag = false;
}
});
$("#CheckedAll").prop("checked",flag);
});
$("#CheckedAll").click(function(){
$(‘[name=items]:checkbox‘).prop(‘checked‘, this.checked);
});
})此时id为CheckedAll的复选框和复选框组就可以联动起来了。
思路二：
(1)对复选框组绑定单击事件
判断复选框的总数是否与选中的复选框数量相等。
如果相等，则说明全选中了，id为CheckedAll的复选框应当处于选中状态。否则不选中。
$("[name=items]:checkbox").click(function(){
//定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
var $tmp = $("[name=items]:checkbox");
//用filter()方法筛选出选中的复选框，并直接给checkedall赋值
$("#CheckedAll").attr("checked",$tmp.length==$tmp.filter(":checked").length);
});以一个简单的用户注册为例。
首先新建一个表单。html代码如下：
<form>
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料：</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res">
</div>
</form>在表单内class属性为required的文本框式必填项，因此要与非必填表单元素加以区别。可以用append()来完成
//为必填选项添加红星
$("form :input.required").each(function(){
var $required = $("<strong class=‘high‘>*</strong>");//创建元素
$(this).parent().append($required);//将他追加到文档中
})当用户名文本框中填写完信息后，将光标的焦点从用户名移出时，需要判断用户名是否符合验证规则。当光标的焦点从邮箱文本框移出时，需要即时判断邮箱填写是否正确，因此需要给表单元素添加失去焦点事件，即blur。
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();//选取含有子元素和文本的节点
//验证用户名
if($(this).is("#username")){
if(this.value == "" || this.value.length < 6){
var errorMsg = "请输入至少6位的用户名.";
$parent.append(‘<span class="formtips onError">‘ + errorMsg + ‘</span>‘);
}else{
var okMsg = "输入正确.";
$parent.append(‘<span class="formtips onSuccess">‘ + okMsg + ‘</span>‘);
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value=="" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg = "请输入正确的E-mail地址.";
$parent.append(‘<span class="formtips onError">‘ + errorMsg + ‘</span>‘);
}else{
var okMsg = "输入正确.";
$parent.append(‘<span class="formtips onSuccess">‘ + okMsg + ‘</span>‘);
}
}
})由于每次在元素失去焦点后，都会创建一个新的提醒元素，然后将它追加到文档中，最后出现了多次的提醒信息。因此，需要在创建提醒元素之前，将当前元素以前的提醒元素都删除。可以使用remove()方法来完成。
$parent.find(".formtips").remove();//删除以前的节点当鼠标在表单元素中多次失去焦点时，都可以提醒用户填写是否正确。但是，如果用户无视错误提醒，执意要单击提交按钮时，为了使表单那填写元素进行一次整体的验证。可以使用trigger()方法来触发blur事件，从而达到验证效果。如果填写错误，就会以红色提醒用户；如果用户名和邮箱都不符合规则，那么就有两处错误，即有两个class为onError的元素，因此可以根据class为onError 元素的长度来判断是否可以提交。
如果长度为0，即true，说明可以提交了，如果长度大于0，则false，说明有错误，需要阻止表单提交。
阻止表单提交用return false；
$("#send").click(function(){
$("form .required:input").trigger("blur");
var numError = $(‘form .onError‘).length;
if(numError){
return false;
}
alert("注册成功，密码已经发到你的邮箱，请查收。");
})用户也许会提出：为什么每次要等字段元素失去焦点后，才提醒输入是否正确？如果输入时就可以提醒，这样就可以更加即时了。
为了达到用户提出的需求，需要给表单元素绑定keyup事件和focus事件，keyup事件能在用户每次松开按键时触发，实现即时提醒；focus事件能在元素得到焦点的时候触发，也可以实现即时提醒。
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();//选取含有子元素和文本的节点
$parent.find(".formtips").remove();//删除以前的节点
//验证用户名
if($(this).is("#username")){
if(this.value == "" || this.value.length < 6){
var errorMsg = "请输入至少6位的用户名.";
$parent.append(‘<span class="formtips onError">‘ + errorMsg + ‘</span>‘);
}else{
var okMsg = "输入正确.";
$parent.append(‘<span class="formtips onSuccess">‘ + okMsg + ‘</span>‘);
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value=="" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg = "请输入正确的E-mail地址.";
$parent.append(‘<span class="formtips onError">‘ + errorMsg + ‘</span>‘);
}else{
var okMsg = "输入正确.";
$parent.append(‘<span class="formtips onSuccess">‘ + okMsg + ‘</span>‘);
}
}
}).keyup(function(){
$(this).triggerHandler("blur");//trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。而triggerHandler方法只会触发为元素绑定的blur事件，而不触发浏览器默认的blur事件。
}).focus(function(){
$(this).triggerHandler("blur");
})客户端校验只是用户提升用户操作体验，服务器端仍需对用户输入的数据进行合法性验证
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>男</td><td>湖南永州</td></tr>
<tr><td>李四</td><td>女</td><td>湖南郴州</td></tr>
<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
</tbody>
</table>首先定义两个CSS样式
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
注意$("tr:odd")和$("tr:even")选择器中索引是从0开始，因此第一行是偶数
然后选择表格奇数行和偶数行分别添加样式，可以使用选择器来完成。
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
如果需要某一行高亮显示状态，可以使用contains选择器来实现
$("tr:contains(‘王五‘)").addClass("selected");
2.单选框控制表格行高亮
//为表格行添加单击事件
$("tbody>tr").click(function(){
$(this)
.addClass("selected")
.siblings().removeClass("selected")
.end()
.find(":radio").prop("checked",true);
});这样，就可以通过单击每行来实现表格行高亮，同时此行所在的单选框也被选中。
上面代码中使用了end()方法。当前对象是$(this),当进行addClass(“selected”)操作时，对象并未发生改变，当执行
//初始化表格的时候，如果默认已经有单选框被选中，那么也需要被处理
$("table :radio:checked").parent().parent().addClass("selected");
注意：$("table :radio:checked").parent().parent().addClass("selected");是通过parent方法逐步向父节点获取相应的元素的，也可以通过parents方法直接获取
$("table :radio:checked").parents().addClass("selected");
此外，如果通过has选择器也可以进一步简化，表示含有选中的单选框的tr行将被高亮显示
$("tbody>tr:has(:checked)").addClass("selected");最后代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<script src="jquery-1.11.3.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){//网页加载时
$("tbody>tr:odd").addClass("odd");//先排除第一行，然后给奇数行添加样式
$("tbody>tr:even").addClass("even");//先排除第二行，然后给偶数行添加样式
//为表格行添加单击事件
$("tbody>tr").click(function(){
$(this)
.addClass("selected")
.siblings().removeClass("selected")
.end()
.find(":radio").prop("checked",true);//这里为什么不用attr来设置属性呢。因为jquery版本升级到1.6以后，对于checked，true和false之类的对象，必须用prop方法来设置和修改。
});
//初始化表格的时候，如果默认已经有单选框被选中，那么也需要被处理
//$("table :radio:checked").parent().parent().addClass("selected");
//简化
//$("table :radio:checked").parents().addClass("selected");
//再简化
$("tbody>tr:has(:checked)").addClass("selected");
})
</script>
<style type="text/css">
table {
border:0;
border-collapse:collapse;
}
td {
font:normal 12px/17px Arial;
padding:2px;
width:100px;
}
th {
font:bold 12px/17px Arial;
text-align:left;
padding:4px;
border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected {
background:#FF6500;
color:#fff;
}
</style>
</head>
<body>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input type="radio" name="choice" /></td><td>张三</td><td>男</td><td>湖南永州</td></tr>
<tr><td><input type="radio" name="choice" /></td><td>李四</td><td>女</td><td>湖南郴州</td></tr>
<tr><td><input type="radio" name="choice" checked="checked" /></td><td>王五</td><td>男</td><td>湖南长沙</td></