本章将介绍 jQuery 选择器中的表单选择器。
jQuery 的表单选择器是专门简化表单元素选取的伪类选择器，无需写冗长的标签 / 属性选择器，就能快速定位各类表单控件，下面逐个拆解：
| 选择器 | 作用 | 等价原生选择器 |
|---|---|---|
:input | 选择所有表单元素（input/textarea/select/button） | $("input, textarea, select, button") |
:text | 选择所有单行文本框（type="text" 的 input） | $("input[type='text']") |
:password | 选择所有密码框（type="password" 的 input） | $("input[type='password']") |
:radio | 选择所有单选按钮（type="radio" 的 input） | $("input[type='radio']") |
:checkbox | 选择所有复选框（type="checkbox" 的 input） | $("input[type='checkbox']") |
:submit | 选择所有提交按钮（type="submit" 的 input/button） | $("input[type='submit'], button[type='submit']") |
:image | 选择所有图片提交按钮（type="image" 的 input） | $("input[type='image']") |
:reset | 选择所有重置按钮（type="reset" 的 input/button） | $("input[type='reset'], button[type='reset']") |
:button | 选择所有按钮（type="button" 的 input/button，不含 submit/reset） | $("input[type='button'], button:not([type='submit']):not([type='reset'])") |
:file | 选择所有文件上传框（type="file" 的 input） | $("input[type='file']") |
下面通过一个示例演示各个选择器的含义，通过为选中的元素添加样式，直观查看个基本选择器的效果。
<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; }
.app { border:solid 1px #ccc; padding: 5px; }
form { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
form p { margin: 4px; display: flex; align-items: flex-start; flex-wrap: wrap; }
form p label { display: inline-block; width: 120px; }
form p.ops { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
/* 效果样式 */
.myClass {
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>表单选择器</h3>
<form>
<p>
<input type="hidden" value="10240" />
</p>
<p>
<label>账号：</label>
<input type="text" placeholder="请输入账号" />
</p>
<p>
<label>密码：</label>
<input type="password" placeholder="请输入密码" />
</p>
<p>
<label>选择学历：</label>
<select title="学历">
<option value="val1">小学</option>
<option value="val2">中学</option>
<option value="val3">大学</option>
</select>
</p>
<p>
<label>选择爱好：</label>
<input type="checkbox" placeholder="游泳" />游泳
<input type="checkbox" placeholder="健身" />健身
<input type="checkbox" placeholder="看书" />看书
</p>
<p>
<label>婚姻情况：</label>
<input type="radio" name="hunyin" value="0" placeholder="未婚" />未婚
<input type="radio" name="hunyin" value="1" placeholder="已婚" />已婚
</p>
<p>
<label>上传个人简历：</label>
<input type="file" placeholder="选择一个文件" />
</p>
<p>
<label>自我简介：</label>
<textarea placeholder="简单介绍自己吧..."></textarea>
</p>
<p class="ops">
<input type="button" value="Input Button"/>
<input type="reset" value="Input Reset" />
<input type="submit" value="Input Submit" />
<input type="image" src="https://www.hxstrive.com/cdn/resources/img_submit.png" alt="提交" />
</p>
<p class="ops">
<button type="button">Button</button>
<button type="reset">Button Reset</button>
<button type="submit">Button Submit</button>
</p>
</form>
</div>
<div>
<!-- :input 匹配所有 input, textarea, select 和 button 元素 -->
<button type="button" onclick="
reset();
$(':input').addClass('myClass');
">:input</button>
<!-- :text 匹配所有的单行文本框 -->
<button type="button" onclick="
reset();
$(':text').addClass('myClass');
">:text</button>
<!-- :password 匹配所有密码框 -->
<button type="button" onclick="
reset();
$(':password').addClass('myClass');
">:password</button>
<!-- :radio 匹配所有单选按钮 -->
<button type="button" onclick="
reset();
$(':radio').addClass('myClass');
">:radio</button>
<!-- :checkbox 匹配所有复选框 -->
<button type="button" onclick="
reset();
$(':checkbox').addClass('myClass');
">:checkbox</button>
<!-- :submit 匹配所有提交按钮 -->
<button type="button" onclick="
reset();
$(':submit').addClass('myClass');
">:submit</button>
<!-- :image 匹配所有图像域 -->
<button type="button" onclick="
reset();
$(':image').addClass('myClass');
">:image</button>
<!-- :reset 匹配所有重置按钮 -->
<button type="button" onclick="
reset();
$(':reset').addClass('myClass');
">:reset</button>
<!-- :button 匹配所有按钮 -->
<button type="button" onclick="
reset();
$(':button').addClass('myClass');
">:button</button>
<!-- :file 匹配所有文件域 -->
<button type="button" onclick="
reset();
$(':file').addClass('myClass');
">:file</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098