jQuery选择器语法错误：ID选择器必须加#前缀-html教程-PHP中文网

jQuery选择器语法错误：ID选择器必须加#前缀

本文详解jQuery中ID选择器的正确写法，指出$("title"+id)因缺少#符号导致无法匹配元素，并通过对比错误与正确示例、代码演示及DOM选择原理，帮助开发者快速定位并修复此类常见低级错误。

本文详解jquery中id选择器的正确写法，指出`$("title"+id)`因缺少`#`符号导致无法匹配元素，并通过对比错误与正确示例、代码演示及dom选择原理，帮助开发者快速定位并修复此类常见低级错误。

在使用 jQuery 操作 DOM 元素时，选择器语法的准确性直接决定代码是否生效。你遇到的“1 和 2 不工作，3 和 4 却正常”的现象，根本原因在于 jQuery 选择器书写不规范——尤其是对 ID 选择器的误用。

原始代码中这一行是典型错误：

$("title"+id).attr("hidden", true)

它试图查找这样的 HTML 标签（即一个名为 title123 的自定义元素），但实际目标是 ID 为 "title123" 的

元素（如

...

）。jQuery 中通过 ID 查找元素必须使用 # 前缀，否则会被解析为标签名选择器。

✅ 正确写法应为：

jQuery 1.12.4

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

下载

$("#title" + id).attr("hidden", true);     // 选中 id="title123" 的元素
$("#edit" + id).attr("hidden", true);       // 选中 id="edit123"
$("#done" + id).removeAttr("hidden");       // 选中 id="done123"
$("#input" + id).removeAttr("hidden");      // 选中 id="input123"

⚠️ 注意事项：

$("#...") 匹配的是 id 属性值，不是标签名；
ID 在页面中必须唯一，重复 ID 会导致 jQuery 只操作第一个匹配项；
确保 DOM 已加载完成再执行脚本（推荐包裹在 $(document).ready(...) 或 $(function(){...}) 中）；
若 ID 含特殊字符（如点.、冒号:），需转义：$("#my\.id")。

完整修正后的 handler 函数如下：

function handler(id) {
  $("#title" + id).attr("hidden", true);
  $("#edit" + id).attr("hidden", true);
  $("#done" + id).removeAttr("hidden");
  $("#input" + id).removeAttr("hidden");
}

此外，现代开发更推荐使用 .hide() / .show() 或 CSS 类控制显隐（语义更清晰、性能更优）：

function handler(id) {
  $("#title" + id).hide();
  $("#edit" + id).hide();
  $("#done" + id).show();
  $("#input" + id).show();
}

总结：jQuery 的 $("#id") 是最基础也最易出错的选择器之一。记住——ID 选择器必带 #，类选择器带 .，标签选择器不加符号。一次疏忽的符号遗漏，就可能导致整个交互逻辑静默失效。养成检查选择器的习惯，能大幅减少调试时间。