1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>第2章示例8</title> 6 <style type="text/css"> 7 body { width:760px; } 8 label,textarea,select { display:block; } 9 textarea { width:600px; } 10 div button { font:bold 16px/1 Arial,Helvetica,sans-serif; margin:1px 3px; padding:2px 0; cursor:pointer; width:160px; } 11 </style> 12 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 $(document).ready(function(){ 15 $("#btn1").click(function(){alert("表单内<input>、<textarea>、<select>、<button>共有："+$("form :input").length+"个");}); 16 $("#btn2").click(function(){alert("<input type='text'>有："+$(":text").length+"个");}); 17 $("#btn3").click(function(){alert("<input type='password'>有："+$(":password").length+"个");}); 18 $("#btn4").click(function(){alert("<input type='radio'>有："+$(":radio").length+"个");}); 19 $("#btn5").click(function(){alert("<input type='checkbox'>有："+$(":checkbox").length+"个");}); 20 $("#btn6").click(function(){alert("<input type='image'>有："+$(":image").length+"个");}); 21 $("#btn7").click(function(){alert("<input type='file'>有："+$(":file").length+"个");}); 22 $("#btn8").click(function(){alert("<input type='hidden'>有："+$("input:hidden").length+"个");}); 23 $("#btn9").click(function(){alert("表单内<input type='button'>和<button>共有："+$("form :button").length+"个");}); 24 $("#btn10").click(function(){alert("表单内<input type='reset'>和<button type='reset'>共有："+$("form :reset").length+"个");}); 25 $("#btn11").click(function(){alert("表单内<input type='submit'>和<button type='submit'>共有："+$("form :submit").length+"个");}); 26 }); 27 </script> 28 </head> 29 <body> 30 <form id="test"> 31 <form id="test"><br/> 32 <input type="hidden"/> 33 <label><input type="text"/><input type="text"/></label> 34 <label><input type="password"/><input type="password"/></label> 35 <label><input type="file"/><input type="file"/></label> 36 <label><input type="image"/><input type="image"/></label> 37 <label><input type="radio" value="radio1" checked="checked"/><input type="radio" value="radio1" checked="checked"/></label> 38 <label><input type="radio" value="radio2"/><input type="radio" value="radio2"/></label> 39 <label><input type="radio" value="radio3"/><input type="radio" value="radio3"/></label> 40 <label><input type="radio" value="radio4" disabled="disabled"/><input type="radio" value="radio4" disabled="disabled"/></label> 41 <label><input type="checkbox" value="checkbox1" checked="checked"/><input type="checkbox" value="checkbox1" checked="checked"/></label> 42 <label><input type="checkbox" value="checkbox2" checked="checked"/><input type="checkbox" value="checkbox2" checked="checked"/></label> 43 <label><input type="checkbox" value="checkbox3"/><input type="checkbox" value="checkbox3"/></label> 44 <label><input type="checkbox" value="checkbox4" disabled="disabled"/><input type="checkbox" value="checkbox4" disabled="disabled"/></label> 45 <textarea disabled="disabled"><textarea disabled="disabled"></textarea></textarea> 46 <select><br/> 47 <select> 48 <option value="option1" selected="selected"><option value="option1" selected="selected"></option></option> 49 <option value="option2"><option value="option2" selected="selected"></option></option> 50 <option value="option3"><option value="option3" selected="selected"></option></option> 51 <option value="option4" disabled="disabled"><option value="option4" selected="selected"></option></option> 52 </select> 53 </select> <br/> 54 <select multiple="multiple"><br/> 55 <select multiple="multiple"> 56 <option value="option1" selected="selected"><option value="option1" selected="selected"></option></option> 57 <option value="option2" selected="selected"><option value="option2" selected="selected"></option></option> 58 <option value="option3"><option value="option3" selected="selected"></option></option> 59 <option value="option4" disabled="disabled"><option value="option4" selected="selected"></option></option> 60 </select> 61 </select> <br/> 62 <input type="button" value="<input type="button" value="**"/>"/><br /> 63 <input type="reset" value="<input type="reset" value="**"/>"/><br /> 64 <input type="submit" disabled="disabled" value="<input type="submit" value="**" disabled="disabled"/>"/><br /> 65 <button type="button"><button type="button"></button></button><br /> 66 <button type="reset"><button type="reset"></button></button><br /> 67 <button type="submit" disabled="disabled"><button type="submit" disabled="disabled"></button></button><br/> 68 </form> 69 </form> 70 <div> 71 <button type="button" id="btn1">$("form :input")</button> 72 <button type="button" id="btn2">$(":text")</button> 73 <button type="button" id="btn3">$(":password")</button> 74 <button type="button" id="btn4">$(":radio")</button><br/> 75 <button type="button" id="btn5">$(":checkbox")</button> 76 <button type="button" id="btn6">$(":image")</button> 77 <button type="button" id="btn7">$(":file")</button> 78 <button type="button" id="btn8">$("input:hidden")</button><br/> 79 <button type="button" id="btn9">$("form :button")</button> 80 <button type="button" id="btn10">$("form :reset")</button> 81 <button type="button" id="btn11">$("form :submit")</button> 82 </div> 83 </body> 84 </html>
