<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh" content="600;url=单行文本框.html" /> <meta name="description" content="jquery表单应用中的单行文本框应用" /> <meta name="keywords" content="jQuery,表单，单行文本框，多行文本框，滚动条的高度，复选框的应用，下拉框的应用，表单验证" /> <title>表单应用</title> <style type="text/css"> /*input:hover,textarea:hover{border:1px solid #f00; pink;} IE6不支持这样的伪类，因此使用一下jquery来实现* / .focus{border:1px solid #f00; pink;} < /span> .msg{border:1px solid #666;} .bigger,.smaller,.up,.down{cursor:pointer;} #msg{width:auto; height:150px;} #select1,#select2{width:100px; height:200px; float:left;} .arrow span{display:block; height:50px; line-height:50px; cursor:pointer;} </style> <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ //单行文本框应用 $("input:lt(2)").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass("focus"); }) //多行文本框应用 var $msg=$("#msg"); $(".bigger").click(function(){ if(!$msg.is(":animated")){ if($msg.height()<500){ $msg.animate({height:"+=50"},400); }; } }); $(".smaller").click(function(){ if(!$msg.is(":animated")){ if($msg.height()>50){ $msg.animate({height:"-=50"},400); } } }) //滚动条的高度 $(".up").click(function(){ if(!$msg.is(":animated")){ $msg.animate({scrollTop:"-=10"},400); } }); $(".down").click(function(){ if(!$msg.is(":animated")){ $msg.animate({scrollTop:"+=10"},400); } }) //复选框的应用 //全选 $("#checkedAll").click(function(){ $("[name=items]:checkbox:lt(4)").prop("checked",true); }); //全不选 $("#checkedNo").click(function(){ $("[name=items]:checkbox:lt(4)").prop("checked",false); }); //反选 $("#checkedRev").click(function(){ $("[name=items]:checkbox:lt(4)").each(function(){ /*$(this).attr("checked",!$(this).attr("checked"));//jquery方法显得有点复杂，下面是js方法*/ this.checked=!this.checked; }) }); //发送 $("#send").click(function(){ var str="你选中的是：\r\n";//\r\n是换行符 $("[name=items]:checkbox:checked").each(function(){ str+=$(this).val()+"\r\n"; }); alert(str); }); //用复选框来做全选与全部选 $("#selectedAll").click(function(){ /*if(this.checked){ $("[name=items]:checkbox:gt(3)").prop("checked",true); }else{ $("[name=items]:checkbox:gt(3)").prop("checked",false); }*/ //以上方法可以简写为： $("[name=items]:checkbox:gt(3)").prop("checked",this.checked); }); //是按钮复选框和其他复选框联动起来 $("[name=items]:checkbox:gt(3)").click(function(){ /*var flag=true; //联动方法一： $("[name=items]:checkbox").each(function(){ if(!this.checked){ flag=false; } }); $("#selectedAll").prop("checked",flag);*/ //联动方法二： var $tmp=$("[name=items]:checkbox:gt(3)");//定义一个临时变量 //使用filter()方法筛选出选中的复选框，并直接给selectedAll赋值 $("#selectedAll").prop("checked",$tmp.length==$tmp.filter(":checked").length); //判断复选框的总数是否与选中的复选框数量相等 }); //下拉菜单的应用 //左边到右边 $("#add1").click(function(){ /*var $options=$("#select1 option:selected");//获取到选中的相 var $remove=$options.remove(); //删除下拉列表中选中的相 $remove.appendTo("#select2"); //追加给右边的下拉列表*/ //删除和追加这两个步骤可以由appendTo直接完成，以上方法可以写为： var $options=$("#select1 option:selected"); $options.appendTo("#select2"); }); $("#add1_all").click(function(){ var $options=$("#select1 option");//获取所有选项 $options.appendTo("#select2"); }); $("#select1").dblclick(function(){//绑定双击事件 var $options=$("option:selected",this); $options.appendTo("#select2"); }); //右边到左边 $("#add2").click(function(){ var $options=$("#select2 option:selected"); $options.appendTo("#select1"); }); $("#add2_all").click(function(){ var $options=$("#select2 option"); $options.appendTo("#select1"); }); $("#select2").dblclick(function(){ var $options=$("option:selected",this); $options.appendTo("#select1"); }); //表单验证 $("input.required").each(function(){ var $required=$("<strong class='high'>*</strong>"); $(this).parent().append($required); }).blur(function(){ var $parent=$(this).parent(); $parent.find(".formtips").remove(); //验证用户名 if($(this).is("#username")){ if(this.style==""||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="请输入正确的email地址"; $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); }else{ var okMsg="输入正确"; $parent.append("<span class='formtips onSuccess'"+okMsg+"</span>"); }; }; }); }) </script> </head> <body> <form action="#" method="post" id="regForm"> <fieldset><!--该标签将表单内的相关元素分组--> <legend>个人基本信息</legend><!--该标签为<fieldset>/<figure>/<details>等标签定义标题--> <div id=""> <label for="username">名称：</label> <input type="text" id="name" /> </div> <div> <label for="pass">密码：</label> <!--for 属性规定 label 与哪个表单元素绑定。--> <input type="password" id="pass" /> </div> <div class="msg"> <div> <span class="bigger">放大</span> <span class="smaller">缩小</span> <span class="up">向上</span> <span class="down">向下</span> </div> <label for="msg">详细信息：</label> <textarea id="msg">多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。 多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。 </textarea> </div> </fieldset> <fieldset> <legend>你爱好的运动是？</legend> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <input type="checkbox" name="items" value="羽毛球" />羽毛球<br /> <input type="button" id="checkedAll" value="全 选" /> <input type="button" id="checkedNo" value="全不选" /> <input type="button" id="checkedRev" value="反 选" /> <input type="button" id="send" value="提 交" /> </fieldset> <fieldset> <legend>你喜爱的水果是？</legend> <input type="checkbox" name="items" value="苹果" />苹果 <input type="checkbox" name="items" value="香蕉" />香蕉 <input type="checkbox" name="items" value="葡萄" />葡萄 <input type="checkbox" name="items" value="橘子" />橘子<br /> <input type="checkbox" id="selectedAll" value="全选/全部选" />全选/全不选 <input type="button" id="send2" value="提 交" /> </fieldset> <fieldset> <legend>下拉框的应用</legend> <select multiple id="select1"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> <option>选项6</option> <option>选项7</option> <option>选项8</option> </select> <div class="arrow" style="float:left"> <span id="add1">选中添加到右边>></span> <span id="add1_all">全部添加到右边>></span> <span id="add2"><<选中添加到左边</span> <span id="add2_all"><<全部添加到左边</span> </div> <select multiple id="select2"> </select> </fieldset> <fieldset> <legend>表单验证</legend> <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" value="提交" id="send3" /><input type="reset" id="res" /> </div> </fieldset> </form> </body> </html>注意：1、<fieldset>标签是使表单相关元素分组；
2、<legend>标签是为<fieldset>、<figure>、<details>变浅定义标题用的；
3、<label>标签中的for 属性规定 label 与哪个表单元素绑定。
随时随地看视频
