JQuery表单表格的操作及更多应用.pptVIP

jQuery基础教程 第六章 表单、表格的操作 表单应用 — 单行文本框应用 — 多行文本框应用 — 复选框应用 — 下拉框应用 — 表单验证 表格应用 表格变色 表格展开与关闭 表格内容筛选 其他应用 网页字体大小 网页选项卡 网页换肤 1、表单应用 表单有3个基本组成部分 表单标签 包含处理表单数据所用的服务端程序URL(action)以及数据提交到服务器的方式(method) 表单域 包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和上传域 表单按钮 包含提交按钮、复位按钮、图片按钮和一般按钮 本节主要讲解jQuery在表单域中的应用 单行文本框应用 获取(focus)和失去(blur)焦点改变样式 $(:input).focus(function(){ $(this).addClass(focus); }).blur(function(){ $(this).removeClass(focus); }); 多行文本框应用 高度变化 当单击放大按钮后,如果评论框的高度小于500px则在原来的高度上增加50px if( $comment.height() 500 ){ $comment.animate({ height : +=50 },400); } 当单击缩小按钮后,如果评论框的高度大于50px则在原来的高度上减少50px if( $comment.height() 50 ){ $comment.animate({ height : -=50 },400); } 多行文本框应用(续) 滚动条高度变化 当单击向上按钮时,评论框的滚动条就向上滚动50px $comment.animate({ scrollTop : -=50 } , 400); 当单击向下按钮时,评论框的滚动条就向下滚动50px $comment.animate({ scrollTop : +=50 } , 400); 复选框应用 复选框基本应用:(控制元素的checked) 全选 $(:checkbox).attr(checked, true); 反选 $(:checkbox).each(function(){ //$(this).attr(checked, !$(this).attr(checked)); this.checked=!this.checked; }); 演示:使用checkbox实现 全不选 $(:checkbox).attr(checked, false); 获取选中的值 $(:checkbox).each(function(){ alert($(this).val()); }); 下拉框应用 双击某个选项时将其移到另一个下拉框 $(#select1).dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $(option:selected,this).appendTo(#select2); //追加给对方 }); 表单验证 以注册表单为例： 给需要填写的表单域元素后添加“*”标记 $(input.required).each(function(){ var $required = $(strong class=high */strong); $(this).parent().append($required); }); 当文本框失去焦点时验证表单 如：判断元素值的长度是否小于6，如果小于6则在父元素最后用红色字提醒用户输入不正确，反之则用绿色提醒用户输入正确 $(form :input).blur(function(){ // 为表单元素添加失去焦点事件 if( this.value== || this.value.length 6){ var errorMsg = 请输入至少6位的用户名.; $(this).parent()append(span class=color:red;+errorMsg+/span); }else{ var okMsg =输入正确.; $parent.append(span class=color:green;+okMsg+/span); } }); 表单验证(续) 每次失去焦点时都会创建一个新元素 出现了多次提示 可使用remove()将其删除 $(this).parent().find(.formtips).remove(); 输入即时验证 可给表单域绑定keyup与focus事件 $(form :input).keyup(function(){ $(this).triggerHandl