【jQuery表单选择器】

jQuery表单选择器

用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素

语法	描述	示例
:input	匹配所有input . textarea select和button元素	$(" #myform :input")选取表单中所有的input. select和button元素
:text	匹配所有单行文本框	$("#myform :text")选取email和姓名两个input元素
:password	匹配所有密码框	$("#emyform :password")选取所有 元素
:radio	匹配所有单项按钮	S("#myform :radio"")选取 ****元素
:checkbox	匹配所有复选框	$("#myform :checkbox"}选取 元素
:submit	匹配所有提交按钮	$("#myform :submit ")选取 <input type="submit“/>元素

:image	匹配所有图像域	$("#myform :image")选取 元素
:reset	匹配所有重置按钮	$("#myform :reset ”)选取 ****元素
:button匹配所有按钮	匹配所有按钮	$("#myform :button")选取button元素
:file	匹配所有文件域	$("#myform :file")选取 ****元素
:hidden	匹配所有不可见元素，或者type 为hidden的元素	$("#myform :hidden")选取 、style="display:none"等元素

表单过滤选择器
属性过滤选择器

语法	示例	描述
:enabled	匹配所有可用元素	$("#userform :enabled")匹配form内部除编号 输入框外的所有元素
:disabled	匹配所有不可用元素	$("#userform :disabled")匹配编号输入框
:checked	匹配所有被选中元素 （复选框、单项按钮、 select中的option)	$(" #userform :checked")匹配“性别”中的“男" 选项和“爱好”中的“编程”选项
:selected	匹配所有选中的option元素	S("#userform :selected") 匹配“家乡”中的“北京”选项

form代码

 <form action="" method="get" id="myForm">
        <input type="color" id="color">
        <input type="text">
        <select name="" id="a"></select>
        <input type="password">
        <textarea name="" id="b" cols="30" rows="10">1</textarea>
        <button></button>
        <input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女

        <input type="checkbox" name="hobby" value="打篮球" checked>打篮球
        <input type="checkbox" name="hobby" value="打乒乓" checked>打乒乓
        <input type="checkbox" name="hobby" value="踢足球">踢足球

        <input type="image" src="images/1.jpg">
        <input type="file">

        <input type="hidden"  value="1">

        <input type="text"  readonly disabled placeholder="ooo">

        <select name="" id="">
            <option value="java">java</option>
            <option value="c">c</option>
            <option value="php">php</option>
            <option value="go" selected>go</option>
        </select>
        <input type="reset">
        <input type="submit">
    </form>

script代码

$(function () {
        $("#color").blur(function () {
            let colorVal = $(this).val();
            //:input:所有input、textarea、select、button
            $("#myForm :input").css("background",colorVal);
            console.log($("#myForm :input").eq(2).val());
        });

        //:text:选取所有input类型为text的元素
        $("#myForm :text").css("background","pink");

        //:password:选择所有input类型为password的元素
        $("#myForm :password").css("background","green");

        //:radio:选取所有input类型为radio的元素
        let $myForm = $("#myForm :radio");
        console.log($myForm.eq(0).val())
        console.log($myForm.eq(1).val())

        //:checkbox:选取所有input类型为checkbox的元素
        console.log($("#myForm :checkbox").eq(0).val());
        console.log($("#myForm :checkbox").eq(1).val());
        console.log($("#myForm :checkbox").eq(2).val());
        console.log($("#myForm :checkbox").eq(0).prop("checked"));

        //:submit:选取所有input类型为submit/button的元素
        $("#myForm :submit").css("background","red");

        //:image   选取所有input类型为image的元素(图片域(提交表单作用))
        $("#myForm :image").css({"width":"40px","height":"40px"});

        //:reset   选取所有input类型为reset的元素
        $("#myForm :reset").css("background","green");

        //:button  选取所有input类型为button的元素
        $("#myForm :button").css("background","blue");
        
        //:file    选取所有file类型为button的元素(文件域)
        $("#myForm :file").css("background","pink");

        //:hidden  选取所有不可见的元素
        console.log($("#myForm :hidden").val());

        //表单过滤选择器
        //:enabled  选取所有的可用元素
        $("#myForm :enabled").css("background","pink");

        $("#myForm :disabled").css("background","yellow");

        //:checked 选取所有被选中的元素（复选框 单选框 select中的option）
        console.log($("#myForm :checked"));

        //:selected 选取所有被选中的option
        console.log($("#myForm :selected").val());
        //index():下标
        console.log($("#myForm :selected").index());

    });