jQuery选择器错误：ID选择器必须加#号，否则无法匹配元素-js教程-PHP中文网

jQuery选择器错误：ID选择器必须加#号，否则无法匹配元素

本文解析jQuery中因选择器语法错误导致DOM操作失效的常见问题，重点说明ID选择器必须使用#前缀，否则$("title123")会被误认为查找标签而非ID为title123的元素。

本文解析jquery中因选择器语法错误导致dom操作失效的常见问题，重点说明id选择器必须使用`#`前缀，否则`$("title123")`会被误认为查找``标签而非id为`title123`的元素。

在你提供的代码中，handler(id) 函数试图隐藏和显示多个动态生成的DOM元素，但第1、2行始终不生效：

$("title"+id).attr("hidden", true)   // ❌ 错误：缺少#，实际查找 <title123> 标签
$("edit" + id).attr("hidden", true)  // ❌ 错误：查找 <edit123> 标签，而非 id="edit123" 的元素</edit123></title123>

而第3、4行却能正常工作：

$("done" + id).removeAttr("hidden") // ✅ 可能因其他逻辑（如初始状态）掩盖了问题，但本质仍错误
$("input" + id).removeAttr("hidden") // ✅ 同上；真正起效依赖于元素初始未 hidden 或其他副作用

根本原因在于 jQuery选择器语法误解：

$("title123") → 查找HTML标签名为 title123 的元素（如 <title123>...</title123>），这几乎不存在，返回空集合，操作静默失败；
$("#title123") → 查找ID属性值为 title123 的元素（如 <p id="title123">...</p>），这才是预期行为。

✅ 正确写法应统一添加 # 前缀，严格按ID选择器规范书写：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

function handler(id) {
  $("#title" + id).attr("hidden", true);     // ✅ 匹配 <p id="title123">
  $("#edit" + id).attr("hidden", true);      // ✅ 匹配 <input id="edit123">
  $("#done" + id).removeAttr("hidden");       // ✅ 匹配 <input id="done123">
  $("#input" + id).removeAttr("hidden");      // ✅ 匹配 <input id="input123">
}</p>

⚠️ 补充注意事项：

hidden 是布尔属性，推荐使用 .prop() 而非 .attr() 控制（更语义化且兼容性更好）：
```
$("#title" + id).prop("hidden", true); // 推荐
```
确保DOM已加载完成再绑定事件，例如将 handler 调用或事件委托置于 $(document).ready() 中；
使用浏览器开发者工具（Elements 面板）实时验证选择器是否命中目标元素，避免“看似运行无报错，实则无效果”的陷阱。

总结：jQuery中ID选择器必须以 # 开头，这是不可妥协的基础语法规则。漏掉 # 不会报错，但会导致选择器完全失效——这是新手高频踩坑点，务必养成检查选择器前缀的习惯。