Jquery选择器(八) -- Forms

最新推荐文章于 2020-12-30 00:41:22 发布

原创最新推荐文章于 2020-12-30 00:41:22 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #ViewUI

jQuery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了使用jQuery选择不同类型的HTML表单元素的方法，包括输入框、密码框、单选按钮等，并提供了相应的JavaScript代码示例。

表单选择器

[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"});