jQuery表单对象属性过滤器有哪些？（附带实例）

jQuery 中，表单对象的属性过滤器通过表单元素的状态属性（如被选中、不可用等状态属性）匹配元素，包括:checked 过滤器、:disabled 过滤器、:enabled 过滤器和 :selected 过滤器 4 种，如下表所示：

表：jQuery表单对象的属性过滤器
过滤器	说明	示例
:checked	匹配所有被选中的元素	$("input:checked") //匹配所有被选中的<input>元素
:disabled	匹配所有不可用的元素	$("input:disabled") //匹配所有不可用的<input>元素
:enabled	匹配所有可用的元素	$("input:enabled") //匹配所有可用的<input>元素
:selected	匹配所有被选中的<option>元素	$("select option:selected") //匹配所有被选中的<option>元素

【实例】利用表单对象的属性过滤器匹配表单中相应的元素。
1) 创建一个名为 index.html 的文件，在该文件的 <head>标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，添加一个表单，并在该表单中添加 3 个复选框、1 个不可用按钮和 1 个下拉列表框，其中前两个复选框为被选中状态。关键代码如下：

<form>
    复选框 1：<input type="checkbox" checked="checked" value="复选框 1"/>
    选框 2：<input type="checkbox" checked="checked" value="选框 2"/>
    选框 3：<input type="checkbox" value="选框 3"/><br />
    不可用按钮：<input type="button" value="不可用按钮" disabled><br />
    下拉列表框：
    <select onchange="selectVal()">
        <option value="">列表项 1</option>
        <option value="">列表项 2</option>
        <option value="">列表项 3</option>
    </select>
</form>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现匹配表单中的被选中的 <input> 元素、不可用 <input> 元素和被选中的 <option> 元素的值。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
    $("input:checked").css("background-color","red"); // 设置被选中的复选框的背景颜色
    $("input:disabled").val("我是不可用的"); // 为不可用按钮赋值
})
function selectVal() {
    alert($("select option:selected").val()); // 显示被选中的列表项的值
}
</script>

运行本实例，选中下拉列表框中的“列表项3”，将弹出提示对话框显示选中列表项的值，如下图所示。在该图中，选中的两个复选框的背景颜色为红色，另一个复选框没有设置背景颜色，“不可用按钮”的 value 值被修改为“我是不可用的”。

图 1 利用表单对象的属性过滤器匹配表单中相应的元素

jQuery表单对象属性过滤器有哪些？（附带实例）

相关文章