溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

綜合jQuery在表單中的應用

發(fā)布時間：2020-04-07 16:14:39 來源：網(wǎng)絡 閱讀：451 作者：lflianglan 欄目：web開發(fā)

 

  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來實現(xiàn)* / 
  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.         //發(fā)送 
  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.         //是按鈕復選框和其他復選框聯(lián)動起來 
  92.         $("[name=items]:checkbox:gt(3)").click(function(){ 
  93.             /*var flag=true;   //聯(lián)動方法一： 
  94.             $("[name=items]:checkbox").each(function(){ 
  95.                 if(!this.checked){ 
  96.                     flag=false; 
  97.                 } 
  98.             }); 
  99.             $("#selectedAll").prop("checked",flag);*/ 
  100.             //聯(lián)動方法二： 
  101.             var $tmp=$("[name=items]:checkbox:gt(3)");//定義一個臨時變量 
  102.             //使用filter()方法篩選出選中的復選框，并直接給selectedAll賦值 
  103.             $("#selectedAll").prop("checked",$tmp.length==$tmp.filter(":checked").length); 
  104.             //判斷復選框的總數(shù)是否與選中的復選框數(shù)量相等 
  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><!--該標簽將表單內(nèi)的相關(guān)元素分組--> 
  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 屬性規(guī)定 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>標簽是使表單相關(guān)元素分組；

      2、<legend>標簽是為<fieldset>、<figure>、<details>變淺定義標題用的；

      3、<label>標簽中的for 屬性規(guī)定 label 與哪個表單元素綁定。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手