了解:
:input 表单子元素 input select textarea button==input tpye="button"
:text 文本框
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden 隐藏( type="hidden" display="none")
<!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" /> <title>09-表单选择器.html</title> <!-- 引入jQuery --> <script src="./js/jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ var $alltext = $("#form1 :text"); var $allpassword= $("#form1 :password"); var $allradio= $("#form1 :radio"); var $allcheckbox= $("#form1 :checkbox"); var $allsubmit= $("#form1 :submit"); var $allimage= $("#form1 :image"); var $allreset= $("#form1 :reset"); var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配 var $allfile= $("#form1 :file"); var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配. var $allselect = $("#form1 select"); var $alltextarea = $("#form1 textarea"); var $AllInputs = $("#form1 :input"); var $inputs = $("#form1 input"); $("div").append(" 有" + $alltext.length + " 个( :text 元素)<br/>") .append(" 有" + $allpassword.length + " 个( :password 元素)<br/>") .append(" 有" + $allradio.length + " 个( :radio 元素)<br/>") .append(" 有" + $allcheckbox.length + " 个( :checkbox 元素)<br/>") .append(" 有" + $allsubmit.length + " 个( :submit 元素)<br/>") .append(" 有" + $allimage.length + " 个( :image 元素)<br/>") .append(" 有" + $allreset.length + " 个( :reset 元素)<br/>") .append(" 有" + $allbutton.length + " 个( :button 元素)<br/>") .append(" 有" + $allfile.length + " 个( :file 元素)<br/>") .append(" 有" + $allhidden.length + " 个( :hidden 元素)<br/>") .append(" 有" + $allselect.length + " 个( select 元素)<br/>") .append(" 有" + $alltextarea.length + " 个( textarea 元素)<br/>") .append(" 表单有 " + $inputs.length + " 个(input)元素。<br/>") .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>") .css("color", "red") //显示所有的隐藏标签名称 $allhidden.each(function(){ $("div").append("<br/>").append($(this).get(0).nodeName); }); $("form").submit(function () { return false; }); // return false;不能提交. }); //]]> </script> </head> <body> <form id="form1" action="#"> <input type="button" value="Button"/><br/> <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/> <input type="file" /><br/> <input type="hidden" /><div style="display:none">test</div><br/> <input type="image" src="1.jpg"/><br/> <input type="password" /><br/> <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/> <input type="reset" /><br/> <input type="submit" value="提交"/><br/> <input type="text" /><br/> <select><option>Option</option></select><br/> <textarea rows="5" cols="20"></textarea><br/> <button>Button</button><br/> </form> <div></div> </body> </html>