本章将介绍 jQuery 中的可见性选择器 :hidden 和 :visible 的具体作用。
用于选取页面中满足“隐藏”条件的所有元素。jQuery 判断元素为 hidden 的规则（满足任一即判定为隐藏）：
CSS display 属性值为 none；
元素是表单元素且 type="hidden"；
元素宽度和高度都为 0；
元素处于隐藏的父容器中（即使自身 display 为 block，但父容器隐藏导致无法显示）；
visibility: hidden 或 opacity: 0 不判定为 hidden（这类元素仍占据空间，jQuery 视为 visible）；
示例：
<form lang="zh-CN">
<input type="hidden" name="userId" value="1000" />
<p>
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" disabled /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" style="display: none;" /> <label>旅行</label>
</fieldset>
</form>运行如下代码：
log.info('选择的元素如下：');
$('input:hidden').each(function(index, element) {
// 1. 获取核心属性
const name = $(this).attr('name'); // 获取name属性
const value = $(this).val(); // 获取value值
const type = $(this).attr('type'); // 获取input类型
// 2. 打印遍历结果
log.info(`第 ${index+1} 个隐藏 input：value: ${value}, type: ${type}`);
});将选择如下元素：
<input type="hidden" name="userId" value="1000" />
<input type="checkbox" title="旅行" style="display: none;" />用于选取页面中满足“可见”条件的所有元素。jQuery 判断元素为 visible 的规则如下：
与 :hidden 相反，只要元素不满足上述任何一个“隐藏”条件，即判定为 visible；
即使元素被定位到视口外（如 position: absolute; left: -9999px），只要其 display 不为 none、宽高大于 0，仍会被判定为 visible。
示例：
<form lang="zh-CN">
<input type="hidden" name="userId" value="1000" />
<p>
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" disabled /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" style="display: none;" /> <label>旅行</label>
</fieldset>
</form>运行 代码，将选择如下元素：
<input type="hidden" name="userId" value="1000" />
<input type="checkbox" title="运动" disabled />
<input type="checkbox" title="看书" checked="checked" />下面通过一个示例演示各个选择器的含义，通过为选中的元素添加样式，直观查看个基本选择器的效果。
<html>
<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>
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>
<h3>可见性选择器</h3>
<form>
<input type="hidden" name="userId" value="1000" />
<p>
<label>姓名：</label>
<input id="myName" type="text" name="name" placeholder="你的姓名" />
</p>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" title="运动" disabled /> <label>运动</label>
<input type="checkbox" title="看书" checked="checked" /> <label>看书</label>
<input type="checkbox" title="旅行" style="display: none;" /> <label>旅行</label>
</fieldset>
<p>我的特长：</p>
<ul>
<li>擅长编写代码</li>
<li>擅长户外生存</li>
<li>擅长下厨</li>
<li>擅长打篮球</li>
<li>擅长唱歌，歌声悦耳动听</li>
<li style="display: none;"></li>
</ul>
<p>我的缺点：</p>
<ul></ul>
</form>
</div>
<div>
<!-- :hidden 匹配所有不可见元素，或者type为hidden的元素 $("tr:hidden") -->
<button type="button" onclick="
reset();
log.info('选择的元素如下：');
$('input:hidden').each(function(index, element) {
// 1. 获取核心属性
const name = $(this).attr('name'); // 获取name属性
const value = $(this).val(); // 获取value值
const type = $(this).attr('type'); // 获取input类型
// 2. 打印遍历结果
log.info(`第 ${index+1} 个隐藏 input：value: ${value}, type: ${type}`);
});
">input:hidden</button>
<!-- :visible 匹配所有的可见元素 $("tr:visible") -->
<button type="button" onclick="
reset();
// 匹配所有可见的input元素，但不包括type为hidden的元素
$('input:visible').addClass('myClass');
">input:visible</button>
</div>
<script>
function reset() {
$('*').removeClass('myClass');
}
</script>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098