13. jQuery-表單過濾選擇器
阿新 • • 發佈：2018-12-09
<!DOCTYPE html> <html> <head> <title>jQuery表單過濾選擇器</title> <style type="text/css"> body{font-size:12px;text-align:center} form{width:241px} textarea,select,button,input,span{display:none} .btn {border:#666 1px solid;padding:2px;width:60px; filter: progid:DXImageTransform.Microsoft. Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D8);} .txt{border:#666 1px solid;padding:3px} .img{padding:2px;border:solid 1px #ccc;width:60px;height: 70px;} .div{border:solid 1px #ccc; background-color:#eee;padding:5px} </style> </head> <body> <form id="form1"> <textarea class="txt"> TextArea</textarea> <select><option value="0"> Item 0</option></select> <input type="text" value="Text" class="txt"/> <input type="password" value="PassWord" class="txt"/> <input type="radio" /><span id="Span1"> Radio</span> <input type="checkbox" /> <span id="Span2"> CheckBox</span> <input type="submit" value="Submit" class="btn"/> <input type="image" title="Image" src="../img/480.jpg" class="img"/> <input type="reset" value="Reset" class="btn"/> <input type="button" value="Button" class="btn"/> <input type="file" title="File" class="txt"/> <div id="divShow"></div> </form> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //顯示所有檔案域物件 $("#form1 :file").show(); //顯示所有按鈕物件 //$("#form1 :button").show(); //顯示所有重置按鈕物件 //$("#form1 :reset").show(); //顯示所有圖片域物件 //$("#form1 :image").show(); //顯示所有提交按鈕物件 //$("#form1 :submit").show(); //顯示所有複選框物件 //$("#form1 :checkbox").show(); //$("#form1 #Span2").show(); //顯示所有單選按鈕物件 //$("#form1 :radio").show(); //$("#form1 #Span1").show(); //顯示所有密碼框物件 //$("#form1 :password").show(); //顯示所有文字框物件 //$("#form1 :text").show(); }) /* $(function(){ //顯示input型別的總數量 $("#form1 div").html("表單共找出input型別的元素："+$("#form1 :input").length); $("#form1 div").addClass("div"); }) */ </script> </body> </html>