Jquery选择器(八) -- Forms

表单选择器


[1]  :input      Returns: Array<Element(s)>
      说明： 匹配所有input, textarea, select和button元素。
      

Js代码

1. var allInputs = $(":input");   
2. var formChildren = $("form > *");   
3. $("#messages").text("Found " + allInputs.length + " inputs and the form has " +   
4.                        formChildren.length + " children.");   
5.     // so it won't submit   
6. $("form").submit(function () { return false; });   

var allInputs = $(":input");
var formChildren = $("form > *");
$("#messages").text("Found " + allInputs.length + " inputs and the form has " +
                       formChildren.length + " children.");
    // so it won't submit
$("form").submit(function () { return false; }); 

[2]  :text      Returns: Array<Element(s)>
      说明： 匹配所有类型为text的表单。
                   使用这个伪类选择器$(":text")等同于$("*:text")，是一个非常慢的选择器。因此建议使用$("input:text")。
      

Js代码

1. var input = $("form input:text").css({background:"yellow", border:"3px red solid"});  

var input = $("form input:text").css({background:"yellow", border:"3px red solid"});

[3]  :password      Returns: Array<Element(s)>
      说明： 匹配所有类型为password的表单。
      

Js代码

1. var input = $("form input:password").css({background:"yellow", border:"3px red solid"});  

var input = $("form input:password").css({background:"yellow", border:"3px red solid"});

[4]  :radio      Returns: Array<Element(s)>
      说明： 匹配所有类型为radio的表单。
                   使用这个伪类选择器$(":radio")等同于$("*:radio")，是一个非常慢的选择器。因此建议使用$("input:radio")。
                   若要选择一组相关联的单选按钮,可以使用$("input[name=gender]:radio")
      

Js代码

1. var input = $("form input:radio").css({background:"yellow", border:"3px red solid"});  

var input = $("form input:radio").css({background:"yellow", border:"3px red solid"});

[5]  :checkbox       Returns: Array<Element(s)>
      说明： 匹配所有类型为checkbox的表单。
      

Js代码

1. var input = $("form input:checkbox").css({background:"yellow", border:"3px red solid"});  

var input = $("form input:checkbox").css({background:"yellow", border:"3px red solid"});

[6]  :submit      Returns: Array<Element(s)>
      说明： 匹配所有类型为submit的表单。
      

Js代码

1. var input = $(":submit").parent('td').css({background:"yellow", border:"3px red solid"});  

var input = $(":submit").parent('td').css({background:"yellow", border:"3px red solid"});

[7]  :image      Returns: Array<Element(s)>
      说明： 匹配所有类型为image的表单。
      

Js代码

1. var input = $(":image").css({background:"yellow", border:"3px red solid"});  

var input = $(":image").css({background:"yellow", border:"3px red solid"});

[8]  :reset      Returns: Array<Element(s)>
      说明： 匹配所有类型为reset的表单。
      

Js代码

1. var input = $(":reset").css({background:"yellow", border:"3px red solid"});  

var input = $(":reset").css({background:"yellow", border:"3px red solid"});

[9]  :button      Returns: Array<Element(s)>
      说明： 匹配所有类型为button的表单和button元素( <button></button> )。
      

Js代码

1. var input = $(":button").css({background:"yellow", border:"3px red solid"});  

var input = $(":button").css({background:"yellow", border:"3px red solid"});

[10]  :file      Returns: Array<Element(s)>
      说明： 匹配所有类型为file的表单)。
      

Js代码

1. var input = $(":file").css({background:"yellow", border:"3px red solid"});  

var input = $(":file").css({background:"yellow", border:"3px red solid"});