JQuery学习笔记选择器 --- 表单选择器

yingzhicai

2015-09-13

关注关注

表单选择器

在基本选择器，层次选择器，过滤选择器之后，是表单选择器，也是最后的一个了、

表单选择器能极其方便地获取到表单的某个或某类型的元素

:input --- 选取所有的input, textarea, select, button元素---返回集合元素---$(":input")选取所有的input, textarea, select, button元素

:text --- 选取所有的单行文本框---返回集合元素---$(":text")选取所有的单行文本框

:password---选取所有的密码框---返回集合元素---$(":password")选取所有的密码框---返回集合元素---$(":password")选取所有的密码框

:radio---选取所有的单选框---返回集合元素---$(":radio")选取所有的单选框

:checkbox---选取所有的多选框---返回集合元素---$(":checkbox")选取所有的复选框

:submit---选取所有的提交按钮---返回集合元素---$(":submit")选取所有的提交按钮

:image---选取所有的图像按钮---返回集合元素---$(":image")

:reset---选取所有的重置按钮---返回集合元素---$(":reset")

:button---选取所有的按钮---返回集合元素---$(":button")

:file---选取所有的上传域---返回集合元素---$(":file")

:hidden---选取所有不可见的元素---返回集合元素---$

练习：

得到表单元素的个数：
$("#form1 :input").length
得到表单内单行文本框的个数：
$("#form1:text").length
得到表单内密码框的个数
$("#form1 :password").length

<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")

    $("form").submit(function () { return false; }); // return false;不能提交.

  });
  //]]>
  </script>

<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" /><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>

jquery选择器 jquery