表单选择器_选择input类型是bottom的-CSDN博客

本文链接：https://blog.csdn.net/kisslotus/article/details/53309184

:input表单选择器
如何获取表单全部元素？:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有input标记的表单元素，而且还包括textarea、select 和 button标记的表单元素，因此，它选择的表单元素是最广的。
使用:input表单选择器获取表单元素，并向这些元素增加一个CSS样式类别，修改它们在页面中显示的边框颜色。

<body>
<h3>修改全部表单元素的边框色</h3>
<form id="frmTest" action="#">
    <input type="button" name="" value="Input button" /><br/>
    <select>
        <option>Option</option>
    </select>
    <br/>
    <textarea rows="2" cols="8">

    </textarea>
    <br/>
</form>
</body>
<script type="text/javascript">
    $("$frmTest :input").addClsss("red");
</script>

2.:text表单文本选择器
:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。
在表单中添加多个元素，使用:text选择器获取单行的文本输入框元素，并修改字的边框颜色：

<body>
<h3>修改单行输入框表单元素的边框色</h3>
<form id="frmTest" action="#">
    <input type="text" name="" id="Text1" value="我是小纸条" /><br/>
    <textarea rows="3" cols="8">

    </textarea>
    <br/>
    <button>Button</button>
</form>
</body>
<script type="text/javascript">
    $("$frmTest :text").addClsss("red");
</script>

3.:password表单密码选择器
如果想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。
在表单中添加多个输入框元素，使用:password获取密码输入文本框元素，并修改它的边框颜色：

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

4.:radio单选按钮选择器
表单中的单选按钮常用于多项数据中仅选择其一，而使用:radio选择器可轻松获取表单中的全部单选按钮元素。
在表单中添加多种类型的表单元素，使用:radio选择器获取并隐藏这些元素中的全部单选按钮元素：

<body>
<h3>隐藏表单中单选按钮</h3>
<form id="frmTest" action="#">
    <input type="button" name="" id="Text1" value="Input Button" /><br/>
    <input type="radio" name="" id="Radio1"/>
    <label for="Radio1">男</label>
    <input type="radio" name="" id="Radio2"/>
    <label for="Radio2">女</label>
    <button>Button</button>
</form>
</body>
<script type="text/javascript">
    $("$frmTest :radio").hide();
</script>

5.:checkbox复选框选择器
表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
在表单中增加多个不同类型的元素，使用:checkbox选择器获取其中的全部复选框元素，并将它们全部设为选中状态：

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

6.:submit提交按钮选择器
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。
在表单中添加多个不同类型的按钮，使用:submit选择器获取其中的提交按钮，并使用attr()方法修改按钮显示的文本内容：

<body>
<h3>修改表单中提交按钮显示的文字</h3>
<form id="frmTest" action="#">
    <input type="button" name="" id="Text1" value="Input Button" /><br/>
    <input type="submit" name="" id="Text1" value="Input Button" /><br/>
    <button>Button</button>
</form>
</body>
<script type="text/javascript">
    $("$frmTest input:submit").attr("value", "点我就提交了");
</script>

7.:image图像域选择器
当一个input元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式：

<body>
<h3>修改表单中图像元素的边框</h3>
<form id="frmTest" action="#">
    <input type="image" src="Images/jquery-log.png" /><br/>
    <img src="Images/jquery-log.png" alt="">
</form>
</body>
<script type="text/javascript">
    $("$frmTest :image").addClsss("red");
</script>

8.:button表单按钮选择器
表单中包含许多类型的按钮，而使用:button选择器能获取且只能获取“type”属性值为“button”的input和button这两类普通按钮元素。
在表单中添加多种类型的按钮元素，使用:button选择器获取其中的普通按钮元素，并修改它们的边框色：

<body>
<h3>修改表单中按钮元素的边框</h3>
<form id="frmTest" action="#">
    <input type="button" name="" id="Button1" value="我是普通按钮" /><br/>
    <input type="submit" name="" id="Submit1" value="点我就提交了" /><br/>
    <button>我也是普通按钮</button>
</form>
</body>
<script type="text/javascript">
    $("$frmTest :button").addClsss("red");
</script>

9.:checked选中状态选择器
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。
在表单中添加多个复选框和单选按钮，其中有一些元素处于选中状态，使用:checked获取并隐藏处于选中状态的元素：

<body>
<h3>隐藏处于选中状态的元素</h3>
<form id="frmTest" action="#">
    <input type="radio" name="" id="Radio1" checked="checked" /><br/>
    <label id="Label1" for="Radio1">
        苹果
    </label>
    <br/>
    <input type="radio" name="" id="Radio2"/><br/>
    <label id="Label2" for="Radio2">
        桔子
    </label>
    <br/>
    <input type="checkbox" name="" id="Checkbox1" checked="checkbox">
    <label id="Label3" for="Checkbox1">
        荔枝
    </label>
    <br/>
    <input type="checkbox" name="" id="Checkbox2">
    <label id="Label4" for="Checkbox2">
        葡萄
    </label>
    <br/>
    <input type="checkbox" name="" id="Checkbox3" checked="checkbox">
    <label id="Label5" for="Checkbox3">
        香蕉
    </label>
</form>
</body>
<script type="text/javascript">
    $("$frmTest :checked").hide();
</script>

10.:selected选中状态选择器
与:checked选择器相比，:selected选择器只能获取select下拉列表框中全部处于选中状态的option选项元素。
在一个添加多个option选项的下拉列表框中，使用:selected选择器修改处于选中状态的内容值：

<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>
</form>
</body>
<script type="text/javascript">
    $("$frmTest :selected").text("我处于选中状态");
</script>