本章将介绍 jQuery 中针对表单对象属性的四个核心选择器（:enabled、:disabled、:checked、:selected）的用法。
用于选中所有可用的表单元素，即没有设置 disabled="disabled" 属性的元素），常见适用 input、button、select、textarea 等元素。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input type="text" name="name" placeholder="你的姓名" />
</p>
<p>
<label>地址：</label>
<input type="text" name="name" placeholder="你的地址" disabled />
</p>
<p>
<label>选择学历：</label>
<select title="学历">
<option value="val1">小学</option>
<option value="val2" selected>中学</option>
<option value="val3">大学</option>
</select>
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" /> <label>旅行</label>
</fieldset>
</form>运行 $('input:enabled') 代码，将选择如下元素：
<input type="text" name="name" placeholder="你的姓名" />
<input type="checkbox" title="运动" /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" /> <label>旅行</label>用于选中所有被禁用的表单元素，即设置了 disabled="disabled" 属性的元素。注意，禁用元素无法被用户交互（输入、点击等）。例如：
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input type="text" name="name" placeholder="你的姓名" />
</p>
<p>
<label>地址：</label>
<input type="text" name="name" placeholder="你的地址" disabled />
</p>
<p>
<label>选择学历：</label>
<select title="学历">
<option value="val1">小学</option>
<option value="val2" selected>中学</option>
<option value="val3">大学</option>
</select>
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" /> <label>旅行</label>
</fieldset>
</form>运行 $('input:disabled') 代码，将选择如下元素：
<input type="text" name="name" placeholder="你的地址" disabled />用于选中所有被勾选的表单元素，主要用于：
复选框（type="checkbox"）
单选按钮（type="radio"）
注意：<option> 不用这个，用 :selected。例如：
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" /> <label>旅行</label>
</fieldset>运行 $('input:checked') 代码，将选择如下元素：
<input type="checkbox" title="看书" checked="checked" />用于专门选中下拉框（<select>）中被选中的 <option> 元素。
下面通过一个示例演示各个选择器的含义，通过为选中的元素添加样式，直观查看个基本选择器的效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程：选择器</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
div { margin:20px; }
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
ul li { margin: 3px 0;}
h3 { font-size: 18px; }
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>表单对象属性筛选器</h3>
<form lang="zh-CN">
<p>
<label>姓名：</label>
<input type="text" name="name" placeholder="你的姓名" />
</p>
<p>
<label>地址：</label>
<input type="text" name="name" placeholder="你的地址" disabled />
</p>
<p>
<label>选择学历：</label>
<select title="学历">
<option value="val1">小学</option>
<option value="val2" selected>中学</option>
<option value="val3">大学</option>
</select>
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" /> <label>旅行</label>
</fieldset>
<p>我的特长：</p>
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
</ul>
</form>
</div>
<div>
<!-- :enabled 匹配所有可用元素 -->
<button type="button" onclick="
reset();
$('input:enabled').addClass('myClass');
">input:enabled</button>
<!-- :disabled 匹配所有不可用元素 -->
<button type="button" onclick="
reset();
$('input:disabled').addClass('myClass');
">input:disabled</button>
<!-- :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，
对于select元素来说，获取选中推荐使用 :selected -->
<button type="button" onclick="
reset();
$('input:checked').addClass('myClass');
">input:checked</button>
<!-- :selected 匹配所有选中的option元素 -->
<button type="button" onclick="
reset();
let selectedObj = $('option:selected');
if(!!selectedObj) {
log.info('值：' + selectedObj.val() + ', 文本：' + selectedObj.text());
}
">option:selected</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098