这次给大家带来如何用jQuery操作表单和表格以及一些其它应用，下面跟随小编，一起来看一下。

一.表单应用

一个表单有三个基本组成部分：

(1)表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。

(2)表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文本上传框等。

(3)表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

1.单行文本框应用

当文本框获取焦点后它的颜色需要变化，当它失去焦点后，则要恢复为原来的样式，可以使用css中的伪类选择符来实现以上的功能，css代码如下：input:focus ,textarea:focus{

border:1px solid #f00;

background:#fcc;}

但是IE6并不支持除超链接元素之外的:hover伪类选择符，此时可以利用jQuery弥补：.focus{

border:1px solid #f00;

background:#fcc;

}

$(function(){

$(":input").focus(function(){

$(this).addClass("focus");

}).blur(function(){

$(this).removeClass("focus");

});

});

2.多行文本框应用

高度变化：通过“放大”和“缩小”按钮绑定单击事件，相应文本框的高度也会放大或缩小。

滚动条高度变化：通过“向上”和“向下”按钮绑定单击事件

3.复选框应用$("#CheckedAll").click(function(){

$('[name=items]:checkbox').attr('checked',true); //复选框全选，全不选设置为false});$("#CheckedRev").click(function(){

$('[name=items]:checkbox').each(function(){

$(this).attr("checked", !$(this).attr("checked")); //反选

});

});

4.下拉框应用

将左边框的选项添加给右边框：('#add').click(function(){

var $options=$('#select1 options:selected'); //获取全部的选项

$options.appendTo('#select2'); //追加给对方})

5.表单验证

验证用户名：if($(this).is('#username')){

if(this.value==""||this.value.length<6){

var errorMsg='请输入至少6位的用户名'；

$parent.append(''+errorMsg+'');

}else{

var okMsg='输入正确'；

$parent.append(''+okMsg+'');

}

}

验证邮箱同理；

提交事件：$('#send').click(function(){

$("form.required:input").trigger('blur');

var numError=$('form.onError').length;

if(numError){

return false;

}

alert("注册成功，密码已发到你的邮箱，请查收");

});

二.表格应用

1.表格变色

普通的隔行变色：$(function(){

$("tbody>tr:odd").addClass("odd"); //给表格中奇数行添加样式

$("tbody>tr:even").addClass("even"); //给表格中偶数行添加样式})

单选框控制表格隔行高亮：$('tbody>tr').click(function(){

$(this)

.addClass('selected') //给单击的当前行添加高亮样式

.siblings().removeClass('selected') //将兄弟行的高亮模式去掉，执行完对象变为$(this).sibling()

.end() //返回$(this)对象

.find(':radio').attr('checked',true); //将此行所在的单选框也选中});

2.表格展开关闭$(function(){

$('tr.parent').click(function(){ //获取所谓的父行

$(this)

.toggleClass("selected") //添加/删除高亮

.siblings('.child_'+this.id).toggle(); //隐藏/显示所谓的子行

}).click(); //当用户刚进入界面时默认收缩起来})

3表格内容筛选$(function(){

$("#filterName").keyup(function(){ //给文本框绑定触发事件

$("table tbody tr").hide()

.filter(":contains('"+($(this).val())+"')").show(); //根据文本框的输入筛选出行中有val值的行

});

});