本文介绍如何利用 jQuery 动态生成 0–99 的数字序列，并在用户输入目标数字、点击按钮后，将匹配的数字以加粗样式（）高亮显示。
本文介绍如何利用 jquery 动态生成 0–99 的数字序列，并在用户输入目标数字、点击按钮后，将匹配的数字以加粗样式（``）高亮显示。
要实现点击按钮后高亮显示指定数字（如 2 和 99）的效果，核心思路是：动态构建 HTML 字符串，对匹配的数字包裹 <strong></strong> 标签，其余保持普通文本。相比直接操作 DOM 节点或反复调用 .append()，批量生成字符串再一次性写入 #sequence 更高效、简洁。
以下为完整可运行的解决方案：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" id="field1" value="2" min="0" max="99" /> <br> <input type="number" id="field2" value="99" min="0" max="99" /> <br> <button type="button" id="getBtn">show me the highlighted numbers</button> <br> <div id="sequence"></div>
$('#getBtn').click(function(e) {
// 获取所有以 'field' 开头的 number 类型输入框的数值（自动转为 number 类型）
const vals = $('input[type=number][id^=field]').map((i, el) => el.valueAsNumber).get();
// 构建 0 到 99 的序列数组，每个元素为字符串：匹配则加 <strong>，否则为纯数字
const sequence = [];
for (let i = 0; i <= 99; i++) {
if (vals.includes(i)) {
sequence.push(`<strong>${i}</strong>`);
} else {
sequence.push(String(i));
}
}
// 用空格连接所有项，一次性写入容器，避免多次 DOM 操作
$("#sequence").html(sequence.join(' '));
});✅ 关键优化点说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用
el.valueAsNumber替代.val()，避免字符串与数字比较失效（如"2" === 2为false）； - 选择器
input[type=number][id^=field]支持任意多个字段（如field1,field2,field3），具备良好扩展性； - 循环范围严格限定为
0 to 99（含），符合题设要求； - 所有 HTML 拼接在内存中完成，最后单次
.html()赋值，性能更优。
⚠️ 注意事项：
- 建议为
<input type="number">添加min="0" max="99"属性，从 UI 层限制非法输入； - 若需支持重复数字或空输入，可在
vals处添加过滤：vals.filter(n => !isNaN(n) && n >= 0 && n ； - 如需高亮样式更丰富（如背景色、颜色），可改用 CSS 类（如
<span class="highlight">2</span>）并配合外部样式定义，便于维护。
该方案简洁、健壮、可扩展，是处理此类动态数字高亮场景的典型 jQuery 实践方式。
