Jquery选择器(8) - Forms _Web前端

Jquery选择器(八) -- Forms

表单选择器

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

Js代码

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;?});???

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代码

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代码

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代码

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代码

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代码

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代码

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代码

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代码

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代码

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

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