《表单表格的操作及更多应用ppt培训课件》由会员分享，可在线阅读，更多相关《表单表格的操作及更多应用ppt培训课件（19页珍藏版）》请在金锄头文库上搜索。
1、jQuery基础教程_一第六章表单、表格的操作。表单应用一单行文本框应用一多行文本框应用一复选框应用一下拉框应用一表单验证。表格应用一表格变色一表格展开与关闭一表格内容筛选-*关他应用一网页字体大小一网页选项卡一网页换肤*表单1、表单应用有3个基本组成部分-表单标签*包含处理表单数据所用的服务端程序URL(action)以及数据提交到服务器的方式(method)-表单域*包含文本框、宥码惯、隐蕊域、多行文本框、复选框、单选框、下拉选择框和上传域-表单按钮*包含提交按钮、复位按钮、图片按钮和一般*本节主要讲解jQuery在表单域挠钮h的应_一单行文本框应用*获取(focus)和失去(blur)焦
2、点改变样式-$(cinput.focus(function()一$(this).addClass(rfocusm;-blur(functicn(f一$(thisjremoveCiass(“focus“);一_一多行文本框应用*高度变化-当单击“放大“按钮后,如果评论框的高度小于500px则在原来的高度上增加50pxif($comment.height(50)$comment.animate(fheight:“-=50“,400);_一多行文本框应用(续)*滚动条高度变化-当单击“向上“按钮时,评论框的滚动条就向上滚动50px$comment.animate(fscrollTop:“-=50“,
3、400);-当单击“向下“掉钮时,评论框的液动条戚向下滚动50px$comment.animate(fscrollTop:“+=50“,400);_一复选框应用。复选框基本应用:(控制元素的checked)=-全选$C:checkboxj.attr(checkedtruej-反选S(:checkboxj.eachtfunction(if/8(thisjatrtchecked,I6(thisj.attrtchecked);thischecked=ithischecked:动演示:使用checkbox定现=全不选8(icheckboxj.attr(checkedfalse);一获取选中的值8C:c
4、heckboxjeachtfunction(ifalert($(thisjval0);此_一下拉框应用*双击桅个选项时将其移到另一个下拉框$(#select1).dblclick(function()/绑定双击事件/获取全部的选项,删除并追加给对方$(“opticn:selected“this).appendTo(#select2);/迭加给对方河_一表单验证*以注册表单为例:一给需要填写的表单域元素后添加“标记Sinputrequired).eachiunction0tvarSrequired=Sfr“clstrong“;$lthisjparent(append(Srequired;育一当文
5、本桂失去焦点时验证表单罡娩判妻霆癜值约彗魔是否卜于s，如栗小于6则在父元醌最后用红色字提醒用户输入不$(fomminputyblutiuactonu(/】袅单元豪深加失去焦点事件论thiswalue=“thisvalueJength6)(varerrorMsg=请输入至少6位的用户名.$(thisjparent0append(ierrorMsg+lspanz|varkMsg=锴入正确Sparentappend(+oKMsg+clspanTjelsef_一表单验证(续)。每次失去焦点时都会创建一个新元素-出现了多次提示-可使用remove()将其删除$(this).parent().find(“formtips“).remove();。输入即时验证-可给表单基绑定keyup与focus事件$(form:inputJ.keyup(function)$(thisj.triggerHandler(blur;).focus(function()$(this).triggerHandler(“blur“);/不用使用trigger(“blur)
