这次给大家带来如何用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'+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值的行 });});
登录后复制
以上就是如何用jQuery操作表单和表格的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2781128.html
