行业资讯

综合jQuery在表单中的应用

发布时间：2020-04-07 16:14:39 作者：lflianglan
来源：网络 阅读：449

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <meta http-equiv="refresh" content="600;url=单行文本框.html" /> 
  6. <meta name="description" content="jquery表单应用中的单行文本框应用" /> 
  7. <meta name="keywords" content="jQuery,表单，单行文本框，多行文本框，滚动条的高度，复选框的应用，下拉框的应用，表单验证" /> 
  8. <title>表单应用</title> 
  9. <style type="text/css"> 
  10.     /*input:hover,textarea:hover{border:1px solid #f00; pink;} IE6不支持这样的伪类，因此使用一下jquery来实现* / 
  11.     .focus{border:1px solid #f00; pink;} < /span>
  12.     .msg{border:1px solid #666;} 
  13.     .bigger,.smaller,.up,.down{cursor:pointer;} 
  14.     #msg{width:auto; height:150px;} 
  15.     #select1,#select2{width:100px; height:200px; float:left;} 
  16.     .arrow span{display:block; height:50px; line-height:50px; cursor:pointer;} 
  17. </style> 
  18. <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
  19. <script type="text/javascript"> 
  20.     $(function(){ 
  21.         //单行文本框应用 
  22.         $("input:lt(2)").focus(function(){ 
  23.             $(this).addClass("focus"); 
  24.         }).blur(function(){ 
  25.             $(this).removeClass("focus"); 
  26.         }) 
  27.          
  28.         //多行文本框应用 
  29.         var $msg=$("#msg"); 
  30.         $(".bigger").click(function(){ 
  31.             if(!$msg.is(":animated")){ 
  32.                 if($msg.height()<500){ 
  33.                     $msg.animate({height:"+=50"},400); 
  34.                 }; 
  35.             } 
  36.         }); 
  37.         $(".smaller").click(function(){ 
  38.             if(!$msg.is(":animated")){ 
  39.                 if($msg.height()>50){ 
  40.                     $msg.animate({height:"-=50"},400); 
  41.                 } 
  42.             } 
  43.         }) 
  44.          
  45.         //滚动条的高度 
  46.         $(".up").click(function(){ 
  47.             if(!$msg.is(":animated")){ 
  48.                 $msg.animate({scrollTop:"-=10"},400); 
  49.             } 
  50.         }); 
  51.         $(".down").click(function(){ 
  52.             if(!$msg.is(":animated")){ 
  53.                 $msg.animate({scrollTop:"+=10"},400); 
  54.             } 
  55.         }) 
  56.          
  57.         //复选框的应用 
  58.         //全选 
  59.         $("#checkedAll").click(function(){ 
  60.             $("[name=items]:checkbox:lt(4)").prop("checked",true); 
  61.         }); 
  62.         //全不选 
  63.         $("#checkedNo").click(function(){ 
  64.             $("[name=items]:checkbox:lt(4)").prop("checked",false); 
  65.         }); 
  66.         //反选 
  67.         $("#checkedRev").click(function(){ 
  68.             $("[name=items]:checkbox:lt(4)").each(function(){ 
  69.                 /*$(this).attr("checked",!$(this).attr("checked"));//jquery方法显得有点复杂，下面是js方法*/ 
  70.                 this.checked=!this.checked; 
  71.             }) 
  72.         }); 
  73.         //发送 
  74.         $("#send").click(function(){ 
  75.             var str="你选中的是：\r\n";//\r\n是换行符 
  76.             $("[name=items]:checkbox:checked").each(function(){ 
  77.                 str+=$(this).val()+"\r\n"; 
  78.             }); 
  79.             alert(str); 
  80.         }); 
  81.         //用复选框来做全选与全部选 
  82.         $("#selectedAll").click(function(){ 
  83.             /*if(this.checked){ 
  84.                 $("[name=items]:checkbox:gt(3)").prop("checked",true); 
  85.             }else{ 
  86.                 $("[name=items]:checkbox:gt(3)").prop("checked",false); 
  87.             }*/ 
  88.             //以上方法可以简写为： 
  89.             $("[name=items]:checkbox:gt(3)").prop("checked",this.checked); 
  90.         }); 
  91.         //是按钮复选框和其他复选框联动起来 
  92.         $("[name=items]:checkbox:gt(3)").click(function(){ 
  93.             /*var flag=true;   //联动方法一： 
  94.             $("[name=items]:checkbox").each(function(){ 
  95.                 if(!this.checked){ 
  96.                     flag=false; 
  97.                 } 
  98.             }); 
  99.             $("#selectedAll").prop("checked",flag);*/ 
  100.             //联动方法二： 
  101.             var $tmp=$("[name=items]:checkbox:gt(3)");//定义一个临时变量 
  102.             //使用filter()方法筛选出选中的复选框，并直接给selectedAll赋值 
  103.             $("#selectedAll").prop("checked",$tmp.length==$tmp.filter(":checked").length); 
  104.             //判断复选框的总数是否与选中的复选框数量相等 
  105.              
  106.         }); 
  107.          
  108.         //下拉菜单的应用 
  109.         //左边到右边 
  110.         $("#add1").click(function(){ 
  111.             /*var $options=$("#select1 option:selected");//获取到选中的相 
  112.             var $remove=$options.remove();  //删除下拉列表中选中的相 
  113.             $remove.appendTo("#select2");   //追加给右边的下拉列表*/ 
  114.             //删除和追加这两个步骤可以由appendTo直接完成，以上方法可以写为： 
  115.             var $options=$("#select1 option:selected"); 
  116.             $options.appendTo("#select2"); 
  117.         }); 
  118.         $("#add1_all").click(function(){ 
  119.             var $options=$("#select1 option");//获取所有选项 
  120.             $options.appendTo("#select2"); 
  121.         }); 
  122.         $("#select1").dblclick(function(){//绑定双击事件 
  123.             var $options=$("option:selected",this); 
  124.             $options.appendTo("#select2"); 
  125.         }); 
  126.         //右边到左边 
  127.         $("#add2").click(function(){ 
  128.             var $options=$("#select2 option:selected"); 
  129.             $options.appendTo("#select1"); 
  130.         }); 
  131.         $("#add2_all").click(function(){ 
  132.             var $options=$("#select2 option"); 
  133.             $options.appendTo("#select1"); 
  134.         }); 
  135.         $("#select2").dblclick(function(){ 
  136.             var $options=$("option:selected",this); 
  137.             $options.appendTo("#select1"); 
  138.         }); 
  139.          
  140.         //表单验证 
  141.         $("input.required").each(function(){ 
  142.             var $required=$("<strong class='high'>*</strong>"); 
  143.             $(this).parent().append($required); 
  144.         }).blur(function(){ 
  145.             var $parent=$(this).parent(); 
  146.             $parent.find(".formtips").remove(); 
  147.             //验证用户名 
  148.             if($(this).is("#username")){ 
  149.                 if(this.style==""||this.value.length<6){ 
  150.                     var errorMsg="请输入至少6位的用户名"; 
  151.                     $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); 
  152.                 }else{ 
  153.                     var okMsg="输入正确"; 
  154.                     $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>"); 
  155.                 } 
  156.             }; 
  157.             //验证邮箱 
  158.             if($(this).is("#email")){ 
  159.                 if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ 
  160.                     var errorMsg="请输入正确的email地址"; 
  161.                     $parent.append("<span class='formtips onError'>"+errorMsg+"</span>"); 
  162.                 }else{ 
  163.                     var okMsg="输入正确"; 
  164.                     $parent.append("<span class='formtips onSuccess'"+okMsg+"</span>"); 
  165.                 }; 
  166.             }; 
  167.         }); 
  168.     }) 
  169. </script> 
  170. </head> 
  171.  
  172. <body> 
  173.     <form action="#" method="post" id="regForm"> 
  174.         <fieldset><!--该标签将表单内的相关元素分组--> 
  175.             <legend>个人基本信息</legend><!--该标签为<fieldset>/<figure>/<details>等标签定义标题--> 
  176.             <div id=""> 
  177.                 <label for="username">名称：</label> 
  178.                 <input type="text" id="name" /> 
  179.             </div> 
  180.             <div> 
  181.                 <label for="pass">密码：</label> <!--for 属性规定 label 与哪个表单元素绑定。--> 
  182.                 <input type="password" id="pass" /> 
  183.             </div> 
  184.             <div class="msg"> 
  185.                 <div> 
  186.                     <span class="bigger">放大</span> 
  187.                     <span class="smaller">缩小</span> 
  188.                     <span class="up">向上</span> 
  189.                     <span class="down">向下</span> 
  190.                 </div> 
  191.                 <label for="msg">详细信息：</label> 
  192.                 <textarea id="msg">多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。   多行文本框应用，多行文本框高度变化。多行文本框应用，多行文本框高度变化。 
  193.                 </textarea> 
  194.             </div> 
  195.         </fieldset>  
  196.         <fieldset> 
  197.             <legend>你爱好的运动是？</legend> 
  198.             <input type="checkbox" name="items" value="足球" />足球 
  199.             <input type="checkbox" name="items" value="篮球" />篮球 
  200.             <input type="checkbox" name="items" value="乒乓球" />乒乓球 
  201.             <input type="checkbox" name="items" value="羽毛球" />羽毛球<br /> 
  202.             <input type="button" id="checkedAll" value="全  选" /> 
  203.             <input type="button" id="checkedNo" value="全不选" /> 
  204.             <input type="button" id="checkedRev" value="反  选" /> 
  205.             <input type="button" id="send" value="提  交" /> 
  206.         </fieldset> 
  207.         <fieldset> 
  208.             <legend>你喜爱的水果是？</legend> 
  209.             <input type="checkbox" name="items" value="苹果" />苹果 
  210.             <input type="checkbox" name="items" value="香蕉" />香蕉 
  211.             <input type="checkbox" name="items" value="葡萄" />葡萄 
  212.             <input type="checkbox" name="items" value="橘子" />橘子<br /> 
  213.             <input type="checkbox" id="selectedAll" value="全选/全部选" />全选/全不选 
  214.             <input type="button" id="send2" value="提  交" /> 
  215.         </fieldset> 
  216.         <fieldset> 
  217.             <legend>下拉框的应用</legend> 
  218.             <select multiple id="select1"> 
  219.                 <option>选项1</option> 
  220.                 <option>选项2</option> 
  221.                 <option>选项3</option> 
  222.                 <option>选项4</option> 
  223.                 <option>选项5</option> 
  224.                 <option>选项6</option> 
  225.                 <option>选项7</option> 
  226.                 <option>选项8</option> 
  227.             </select> 
  228.             <div class="arrow" style="float:left"> 
  229.                 <span id="add1">选中添加到右边>></span> 
  230.                 <span id="add1_all">全部添加到右边>></span> 
  231.                 <span id="add2"><<选中添加到左边</span> 
  232.                 <span id="add2_all"><<全部添加到左边</span> 
  233.             </div> 
  234.             <select multiple id="select2"> 
  235.             </select> 
  236.         </fieldset> 
  237.         <fieldset> 
  238.             <legend>表单验证</legend> 
  239.             <div class="int"> 
  240.                 <label for="username">用户名：</label> 
  241.                 <input type="text" id="username" class="required" /> 
  242.             </div> 
  243.             <div class="int"> 
  244.                 <label for="email">邮箱：</label> 
  245.                 <input type="text" id="email" class="required" /> 
  246.             </div> 
  247.             <div class="int"> 
  248.                 <label for="personinfo">个人资料：</label> 
  249.                 <input type="text" id="personinfo" /> 
  250.             </div> 
  251.             <div class="sub"> 
  252.                 <input type="submit" value="提交" id="send3" /><input type="reset" id="res" /> 
  253.             </div> 
  254.         </fieldset> 
  255.     </form> 
  256. </body> 
  257. </html> 

注意：1、<fieldset>标签是使表单相关元素分组；

      2、<legend>标签是为<fieldset>、<figure>、<details>变浅定义标题用的；

      3、<label>标签中的for 属性规定 label 与哪个表单元素绑定。

推荐阅读：
  1. 很经典的综合应用案例
  2. python前端jQuery综合应用

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

jquery 单行文本应用 多行文本应用

上一篇：关于python是面向对象还是面向过程的分析

下一篇：CDN视频存储解决方案浅谈

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号