10分钟-jQuery表单选择器介绍

1.:input表单选择器

如何获取表单全部元素？:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有标记的表单元素，而且还包括、<select></code> 和 <code><button></code>标记的表单元素，因此，它选择的表单元素是最广的。</p> <p>例：使用:input表单选择器获取表单元素，调用addClass()方法向这些元素添加一个样式类别，修改它们在页面中显示的背景色：</p> <pre class="brush:java;"><code class=" hljs css">.bg_blue { background-color: blue; }</code></pre> <pre class="brush:java;"><code class=" hljs xml"> <h3>修改全部表单元素的背景色</h3> <form id="frmTest" action="#"> <input type="button" value="Input Button" /><br /> <select> <option>Option</option> </select><br /> <textarea rows="3" cols="8">
Button
<script type="text/javascript"> //注意：#frmTest 与:input之间要有空格 $("#frmTest :input").addClass("bg_blue"); </script>

2.:text表单文本选择器

:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。

例：使用:text表单选择器修改多个单行文本输入框元素的背景颜色：

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

修改多个单行输入框元素的背景色

3.:password表单密码选择器

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

例：调用:password选择器，获取表单中的全部密码文本输入框，并使用addClass()方法修改它们的背景色：

修改多个密码输入框元素的背景色

4.:radio单选按钮选择器

表单中的单选按钮常用于多项数据中仅选择其一，而使用:radio选择器可轻松获取表单中的全部单选按钮元素。

例：使用:radio选择器获取表单中全部的单选按钮元素，并将它们的选择状态设为不可用：

将表单中单选按钮设为不可用

5.:checkbox复选框选择器

表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。

例：调用:checkbox选择器获取表单中的全部复选框，并使用attr方法将它们全部设为选中状态：

将表单的全部复选框设为选中

6.:submit提交按钮选择器

通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。

例：调用:submit选择器获取表单中的提交按钮元素，并使用addClass()方法修改该元素的背景色：

修改表单中提交按钮的背景色

注意：如果不写input在前面，结果是这样：

7.:image图像域选择器

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

例：使用:image选择器获取表单中指定的图像元素，并使用addClass()方法改变它的背景色：

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

修改表单中图像元素的背景色





8.:button表单按钮选择器

表单中包含许多类型的按钮，而使用:button选择器能获取且只能获取“type”属性值为“button”的和这两类普通按钮元素。

例：使用:button选择器获取表单中的普通按钮，并调用addClass()方法修改它们的背景色：

修改表单中按钮元素的背景色

9.:checked选中状态选择器

有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。

例：使用:checked选择器获取全部处于选中状态的元素，并调用attr()方法将它们设为不可用：

将处于选中状态的元素设为不可用

10.:selected选中状态选择器

与:checked选择器相比，:selected选择器只能获取下拉列表框中全部处于选中状态的选项元素。 例：使用:selected选择器获取处于选中状态的元素，并调用text()方法获取它们的内容，显示在页面中： select { width:120px; height:100px; } 获取处于选中状态元素的内容

总结：都是一个模子出来的，掌握一个就知道了。