jQuery表单选择器（:input/:text/:password/:radio/:checkbox/:submit/:image/:checked/:selected)

本文链接：https://blog.youkuaiyun.com/yeyang123_fy/article/details/46969457

1、获取表单全部元素,:input表单选择器可以实现

例：修改全部表单的背景色

 <body>
        <h3>修改全部表单元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <select>
            <option>Option</option>
        </select><br />
        <textarea rows="3" cols="8"></textarea><br />
        <button>
            Button</button><br />
        </form>        
        <script type="text/javascript">
            $("#frmTest :input").addClass("bg_blue");
        </script>
    </body>

style.css

.bg_blue
{
    background-color: blue;
}

2、:text表单文本选择器可以获取表单中全部单行的文本输入框元素

<body>
        <h3>修改多个单行输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="我是小纸条"/><br />
        <textarea rows="3" cols="8"></textarea><br />
        <input type="text" id="Text2" value="我也是小纸条"/><br />
        <button>
            Button</button><br />
        </form>
        <script type="text/javascript">
            $("#frmTest :text").addClass("bg_blue");
        </script>
    </body>

3、获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。

 <body>
        <h3>修改多个密码输入框元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="text" id="Text1" value="单行文本输入框"/><br />
        <input type="password" id="Text2" value="密码文本输入框"/><br />
        <textarea rows="3" cols="8">区域文本输入框</textarea><br />
        <input type="password" id="Text3" value="密码文本输入框"/><br />
        <button>
            Button</button><br />
        </form>
        <script type="text/javascript">
            $("#frmTest :password").addClass("bg_red");
        </script>
    </body>

.bg_red
{
    background-color: blue;
    color:Orange;
}

4、:radio选择器可轻松获取表单中的全部单选按钮元素。

<body>
        <h3>将表单中单选按钮设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Radio1" type="radio" />
        <label for="Radio1">
            男</label>
        <input id="Radio2" type="radio" />
        <label for="Radio2">
            女</label><br />
        <button>
            Button</button><br />
        </form>
        <script type="text/javascript">
            $("#frmTest :radio").attr("disabled","true");  //将radio设置为不可用
        </script>
    </body>

5、使用:checkbox选择器可以快速定位并获取表单中的复选框元素

    <body>
        <h3>将表单的全部复选框设为不可用</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Checkbox1" type="checkbox" />
        <label for="Checkbox1">
            西红柿</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label for="Checkbox2">
            茄子</label><br />
        <input id="Checkbox3" type="checkbox" />
        <label for="Checkbox3">
            黄瓜</label><br />
        <button>
            Button</button><br />
        </form>
        <script type="text/javascript">
           $("#frmTest :checkbox").attr("checked","true");  //将多选框均设为选中状态
        </script>
    </body>

6、使用:submit选择器可获取表单中的这个提交按钮元素。普通按钮可用button

 <body>
        <h3>修改表单中提交按钮的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input type="submit" value="点我就提交了" /><br />   //仅这个变色
        <button>
            Button</button><br />
        </form>
        <script type="text/javascript">
            $("#frmTest input:submit").addClass("bg_red"); 
        </script>
    </body>

        <script type="text/javascript">
            $("#frmTest :button").addClass("bg_blue");
        </script>

7、:image选择器

当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素

 <body>
        <h3>修改表单中图像元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />   //仅这个变色
        <br />
        <img alt="" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
        </form>
        
        <script type="text/javascript">
        $("#frmTest :image").addClass("bg_red");
        </script>
    </body>

.bg_red
{
    background-color: green;
    width:159px;
    height:42px;
    padding:20px;
}

8、调用:checked可以获取处于选中状态的全部元素。

 <span style="font-family: Arial, Helvetica, sans-serif;"><body></span><pre name="code" class="html">        <h3>将处于选中状态的元素设为不可用</h3>
        <form id="frmTest" action="#">
        <input id="Radio1" type="radio" checked="checked" />
        <label id="Label1" for="Radio1">
            苹果</label><br />
        <input id="Radio2" type="radio" />
        <label id="Label2" for="Radio2">
            桔子</label><br />
        <input id="Checkbox1" type="checkbox" checked="checked" />
        <label id="Label3" for="Checkbox1">
            荔枝</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label id="Label4" for="Checkbox2">
            葡萄</label><br />
        <input id="Checkbox3" type="checkbox" checked="checked" />
        <label id="Label5" for="Checkbox3">
            香蕉</label><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest :checked").attr("disabled", true);
        </script>
    </body>

9、:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

<body>
        <h3>获取处于选中状态元素的内容</h3>  //获取多选框选中的内容
        <form id="frmTest" action="#">
        <select id="Select1" multiple="multiple">
            <option value="0">苹果</option>
            <option value="1" selected="selected">桔子</option>
            <option value="2">荔枝</option>
            <option value="3" selected="selected">葡萄</option>
            <option value="4">香蕉</option>
        </select><br /><br />
        <div id="tip"></div>
        </form>
        
        <script type="text/javascript">
            var $txtOpt = $("#frmTest :selected").text();
            $("#tip").html("选中内容为:" + $txtOpt);
        </script>
    </body>